//html
<ul class="line line1">
<li style="margin-top: 0px; "><a title="getElementsByTagName的简写方式" href="#">getElementsByTagName的简写方式</a> 2010年06月24日 (4)</li>
<li style="margin-top: 0px; "><a title="一个简单的鼠标划过切换效果" href="#">一个简单的鼠标划过切换效果</a> 2010年05月23日 (4)</li>
<li style="margin-top: 0px; "><a title="奇或偶数行高亮显示及鼠标划过高亮显示类" href="#">奇或偶数行高亮显示及鼠标划过高亮显示类</a> 2010年05月05日 (5)</li>
<li style="margin-top: 0px; "><a title="一个简单的纵横向动画效果类" href="#">一个简单的纵横向动画效果类</a> 2010年05月02日 (4)</li>
<li style="margin-top: 0px; "><a title="document.getElementById的简写方式" href="#">document.getElementById的简写方式</a> 2010年04月18日 (1)</li>
<li style="margin-top: 0px; "><a title="两种简单实现菜单高亮显示的JS类" href="#">两种简单实现菜单高亮显示的JS类</a> 2010年04月17日 (10)</li>
<li style="margin-top: 0px; "><a title="简易的点击展开/关闭效果(原生JS版和JQ版)" href="#">简易的点击展开/关闭效果(原生JS版和JQ版)</a> 2010年08月02日 (6)</li>
</ul>
//css
* {margin:0; padding:0}
body {font:14px Helvetica, sans-serif; font-weight:bold; background:#FFF}
ul.line{
width: 500px;
height: 30px;
background-color: #F8F8F8;
overflow: hidden;
margin-bottom: 20px;
border: 2px solid #363636;
margin-top: 100px;
margin-left: 100px;
}
ul.line li{height:30px;text-indent:15px; font-size:12px; line-height:30px;list-style:none}
调用
$(function(){
$(".line1").slideUp({
"time":5000,
"movetime":2000
});
$(".line2").slideUp();//走默认值
})
</script>
myslideup.js 封装好的滚动js文件
// JavaScript Document
(function($){
$.fn.extend({
"slideUp":function(value){
var docthis = this;
//默认参数
value=$.extend({
"li_h":"30",
"time":2000,
"movetime":1000
},value)
//向上滑动动画
function autoani(){
$("li:first",docthis).animate({"margin-top":-value.li_h},value.movetime,function(){
// $(this).css("margin-top",0).appendTo(".line");
$(this).css("margin-top",0).appendTo(docthis);
})
}
//自动间隔时间向上滑动
var anifun = setInterval(autoani,value.time);
//悬停时停止滑动,离开时继续执行
$(docthis).children("li").hover(function(){
clearInterval(anifun); //清除自动滑动动画
},function(){
anifun = setInterval(autoani,value.time); //继续执行动画
})
}
})
})(jQuery)
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/10337.html