百叶窗滚动/公告

//html<ul class="line line1"> <li style="marg

//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

(0)
上一篇 2023年 4月 22日 下午11:58
下一篇 2023年 4月 22日 下午11:58

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信