简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jq文字向上滚动
Blogger Information
Blog 37
fans 0
comment 1
visits 28392
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jq文字向上滚动
kong
Original
1739 people have browsed it

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>文字向上间歇滚动</title>

<script src="jquery.min.js"></script>

</head>

<style>

*,p{

padding: 0;

margin: 0;

}

ul,ol{

padding: 0;

margin: 0;

list-style-type: none;

}

.big-box{

position: relative;

width: 500px;

border: 1px solid #ccc;

height: 30px;

margin: 30px auto;

}

.box{

position: absolute;

left: 5px;

top: 0;

width: 490px;

}

.box li{

line-height: 30px;

overflow: hidden;

}

</style>

<body>

<div>

<ul id="box">

<li>1、这是第一条</li>

<li>2、这是第二条</li>

<li>3、这是第三条</li>

<li>4、这是第四条</li>

<li>5、这是第五条</li>

</ul>

</div>

<script>

var $box = $("#box"); 

var $box_li =$("#box li");

var id = 0;  

var up_height = 30; // 每次向上的高度

$liLength = $box_li.length; //获取li的个数


var time = setInterval(up,2000); //定时任务


$box_li.eq(0).clone().appendTo("#box"); //克隆第一个li追加到box


//鼠标经过清除定时器与添加

$box.hover(function(){

clearInterval(time);

},function(){

time = setInterval(up, 2000)

})


//定义UP函数

function up(){

id++;

$box.animate({"top": -id*up_height}, 500,function(){

                //向上的次数大于等于li的个数时 box的top值为0

if(id >= $liLength){

id = 0;

$box.css("top",0)

}


})

}

</script>

</body>

</html>


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！