合规国际互联网加速 OSASE为企业客户提供高速稳定SD-WAN国际加速解决方案。 广告
说明:`kxbdSuperMarquee.js`可谓是一个滚动的神器,关于滚动的什么效果都可以实现,文字的滚动,图片的滚动,轮播图,向上、向下、向左、向右都可以实现。只要用好了它,几本上什么滚动都不会愁的。下面我介绍最常用的,至于很多其他效果以后有时候都会跟帖的。 >兼容浏览器:IE6+/Firefox/Google Chrome 官方链接:www.kxbd.com(现已无法访问) 作者:@author Aken Li(www.kxbd.com) JS下载:http://www.ijquery.cn/study/demo/kxbdSuperMarquee/kxbdSuperMarquee.js 本站地址: http://www.ijquery.cn/study/demo/kxbdSuperMarquee/index.html # JS代码: ``` <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="kxbdSuperMarquee"></script> <script type="text/javascript"> $(function(){ $(‘#marquee’).kxbdSuperMarquee({ isMarquee:true, isEqual:false, scrollDelay:20, controlBtn:{up:’#goUM’,down:’#goDM’}, direction:’up’ }); }); </script> ``` ## HTML代码: ``` <h2>无缝上下文字滚动 支持左右无缝滚动</h2> <div id="marquee"> <ul> <li><a href="#" title="">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li> <li><a href="#" title="">制作CSS3和HTML5的一个单页网站模板</a></li> <li><a href="#" title="">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li> <li><a href="#" title="">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li> <li><a href="#" title="">用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox</a></li> <li><a href="#" title="">CSS如何定位工程</a></li> <li><a href="#" title="">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li> <li><a href="#" title="">制作CSS3和HTML5的一个单页网站模板</a></li> <li><a href="#" title="">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li> <li><a href="#" title="">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li> <li><a href="#" title="">用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox</a></li> <li><a href="#" title="">CSS如何定位工程</a></li> </ul> </div> <div>↑鼠标按住:<a href="javascript:void(0);" id="goUM">加速上移</a> <a href="javascript:void(0);" id="goDM">加速下移</a></div> ``` ## CSS代码 ``` #marquee{width:600px;height:200px; overflow:hidden;background:#EFEFEF;margin:0 auto;} #marquee ul li{padding:0 10px;line-height:24px;height:24px;overflow:hidden;text-align:left;font-size:12px;} /* control */ .control{height:24px;line-height:24px;overflow:hidden;padding:15px 0 0 0;} ``` # 参数说明: ``` distance:200,//一次滚动的距离 duration:20,//缓动效果,单次移动时间,越小速度越快,为0时无缓动效果 time:5,//停顿时间,单位为秒 direction: 'left',//滚动方向,'left','right','up','down' scrollAmount:1,//步长 scrollDelay:20//时长,单位为毫秒 isEqual:true,//所有滚动的元素长宽是否相等,true,false loop: 0,//循环滚动次数,0时无限 btnGo:{left:'#goL',right:'#goR'},//控制方向的按钮ID,有四个属性left,right,up,down分别对应四个方向 eventGo:'click',//鼠标事件 controlBtn:{left:'#goL',right:'#goR'},//控制加速滚动的按钮ID,有四个属性left,right,up,down分别对应四个方向 newAmount:4,//加速滚动的步长 eventA:'mouseenter',//鼠标事件,加速 eventB:'mouseleave',//鼠标事件,原速 navId:'#marqueeNav', //导航容器ID,导航DOM:<ul><li>1</li><li>2</li><ul>,导航CSS:.navOn eventNav:'click' //导航事件 ```