快捷导航
蚂蚁部落 网站首页 实例代码 jQuery实例 查看内容

文本垂直循环滚动效果

2017-4-19 00:47| 发布者: antzone| 查看: 634| 评论: 0|来自: 蚂蚁部落

分享一段代码实例,它利用jQuery实现了文本垂直循环滚动的效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
#container{
  width:500px;
  height:300px;
  margin:200px  auto;
  border:1px solid #ddd;
  text-align: center;
  background-color:#eee;
}
.text{
  width:200px;
  height:60px;
  overflow:hidden;
  cursor:pointer;
  margin:0 auto;
}
.text ul{
  margin:0px;
  padding:0px;
  list-style:none;
}
.text ul li{
  width:200px;
  height:30px;
  background:#ccc;
  line-height:30px;
  font-size:12px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script >
$(function() {
  function textslide() {
    var height = ($('.text ul li').height());
    $('.text ul li').eq(0).animate({
      marginTop: -height
    }, function() {
      $(this).remove().appendTo('.text ul').css({
        marginTop: 0
      })
    });
  }
  var t = setInterval(textslide, 1000);
  $('.text').hover(function() {
    clearInterval(t);
  }, function() {
    t = setInterval(textslide, 1000);
  })
})
</script>
</head>
<body>
<div id="container">
  <div class="text">
    <ul>
      <li>本站的url地址是www.softwhy.com</li>
      <li >只有努力奋斗才会有美好的未来</li>
      <li>前端学习和后端一样都需要花大力气</li>
    </ul>
  </div>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的详细实现过程。

相关阅读:

(1).$(function() {}),文档结构完全加载完毕再去执行函数中的代码。

(2).function textslide() {},此方法可以实现向上滚动效果。

(3).var height = ($('.text ul li').height()),获取li元素的高度。

(4).$('.text ul li').eq(0).animate({

  marginTop: -height

},获取第一个li元素,然后以动画方式设置它的margin-top值,值是负数,大小恰好是li元素的高度,这样也就是向上滚动了一条。

(5).function() {

  $(this).appendTo('.text ul').css({

    marginTop: 0

  })

},当上移一条完成之后,将此条追加到列表的最后。

然后再将这个li元素的margin-top重置为0。

(6).var t = setInterval(textslide, 1000),每隔一秒执行一次textslide函数,于是实现了垂直滚动效果。

(7).$('.text').hover(function() {

  clearInterval(t);

}, function() {

  t = setInterval(textslide, 1000);

}),鼠标悬浮停止滚动,离开再继续滚动。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-10-19 02:13 , Processed in 0.063960 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部