Jquery文字一行一行向上滚动

逆风飞舞0

2016-07-31

Jquery文字一行一行向上滚动效果是用了Jquery中animate这个方法实现的相对来说是蛮简单的虽然是简单点还是要分享下基本原理就是：运用了一个小技巧滚动的高度和每个li的高度一样的，先找到外层ul的容器然后相对于外层的容器进行向上滚动 ul在css里面没有设置他的高度默认情况下是n个li×li的高度向上是marginTop： -li.height(每个li的高度);
* 当滚动到最后一个li时候那么最外层的容器应该滚动到0了那么我就把第一个li加到ul里面去这样就实现了循环滚动
* 而不会滚动到最后一个就停止下来了基本的HTML/CSS如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul,li{list-style:none; margin:0; padding:0;}
.scroll{ width:500px; height:175px; overflow:hidden; border:1px solid #333; margin:50px auto 0;}
.scroll li{ width:500px; height:25px; line-height:25px; overflow:hidden;}
.scroll li a{ font-size:14px; font-family:"宋体";color:#333; text-decoration:none;}
.scroll li a:hover{ text-decoration:underline;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div class="scroll">
<ul class="list">
<li><a href="#" target="_blank">我来博主的空间了</a></li>
<li><a href="#" target="_blank">我来博主的空间了</a></li>
<li><a href="#" target="_blank">我来博主的空间了</a></li>
<li><a href="#" target="_blank">我来博主的空间了</a></li>
<li><a href="#" target="_blank">我来博主的空间了</a></li>
<li><a href="#" target="_blank">我来博主的空间了</a></li>
<li><a href="#" target="_blank">我来博主的空间了</a></li>
</ul>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

JS代码如下：

/**
* @author tugenhua
* @email [email protected]
* 一行一行文字向上滚动js
* 运用了Jquery中的animate动画方法
* 运用了一个小技巧滚动的高度和每个li的高度一样
* 先找到外层ul的容器然后相对于外层的容器进行向上滚动 ul没有设置他的高度默认情况下是n个li×li的高度向上是marginTop： -li.height(每个li的高度);
* 当滚动到最后一个li时候那么最外层的容器应该滚动到0了那么我就把第一个li加到ul里面去这样就实现了循环滚动
* 而不会滚动到最后一个就停止下来了
*/
function autoScroll(obj){
$(obj).find(".list").animate({
marginTop : "-25px"
},500,function(){
$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
})
}
$(function(){
setInterval('autoScroll(".scroll")',3000)

jquery border padding margin

安科网

Jquery文字一行一行向上滚动

逆风飞舞0

逆风飞舞0

相关推荐

jQuery UI组件库使用技巧小分享，让移动、Web界面开发更简单！

详解Vue数据驱动原理

JavaScript枚举选择jquery插件代码实例

7个 jQuery上手项目，Github超千人star

jQuery实现带进度条的轮播图

jQuery实现鼠标拖拽登录框移动效果

jquery实现简易验证插件封装

jQuery实现朋友圈查看图片

jQuery实现日历效果

jQuery中event.target和this的区别详解

9.jQuery初识—选择器、效果

Kendo UI for jQuery数据管理使用教程：PDF导出（二）

JQuery 06 属性

取代Jquery，用Vue 构建Bootstrap 4 应用

隐式迭代---ES5的数组方法以及jQuery的方法调用

jQuery Ajax 操作函数汇总

jQuery validate验证表单隐藏域

asp.net 利用Ajax和Jquery在前台向后台传参数并返回值

Ant-design中使用jQuery

56-58-前端-jQuery

逆风飞舞0