基于jQuery图片(文字)平滑连续滚动插件1.1

发布于 2022-09-30 12:18:52 字数 4194 浏览 12 评论 0

演示地址一:http://www.391zx.com/yl/ylmarquee/ylMarqueedemo.htm
演示地址二:http://www.hntzsd.com/yl/ylmarquee/ylmarqueedemo.htm
下载地址一:http://www.391zx.com/yl/ylMarquee.zip
下载地址二:http://www.hntzsd.com/yl/ylmarquee.zip
问题反馈,可加入122423636群反馈,不接受其它用户申请。

更新历史

[li]1.1版本(2010年8月10日):优化文字左滚动中遇到的问题。增加针对文字滚动的参数:textMode,默认为false,使文字滚动更加完美。visible不是必须参数,当设置后可由插件自动定义相应的高或宽。[/li][li]1.0版本(2010年7月19日):根据原ylMarquee升级而成,此次升级根据网友建议重写了全部代码,在运行效率上及CPU资源占用上都得到了很大的优化,功能上支持对文字的滚动。[/li][li]测试版本(2009年4月18日):手头项目有此需求,因此写了个,传到网上。[/li]
本插件 在IE6/IE7/IE8/火狐系列(Firefox 3.5.11.0/Firefox 3.6.8.0/Firefox 4.0b2/Firefox 4.0b3)/Safari 5.0/Opera 10.6/Chrom 5.0中测试通过,要求运行在jQuery v1.42或更高版本上,IE各版本的测试环境为IETest v0.4.4。
插件功能及特点:

[li]可以实现图片或文字平滑连续向上或向左滚动[/li][li]鼠标移动到图片(文字)上停止滚动,移去后继续滚动。[/li]当前图片(文字)数量少于指定数量且图片(文字)总长(宽)度小于指定长(宽)时不进行滚动。[/li][li]参与滚动的图片(文字)长和宽可以不同[/li][li]可以在不设置任何CSS样式的情况下实现滚动效果(但页面效果不一定好看)[/li][li]可以自定义相应容器的宽或高[/li][li]CPU占用率极低。[/li][li]可以自由设置参与滚动图片(文字)的个数[/li][li]兼容IE6、IE7、IE8、火狐、谷歌等众多浏览器[/li][li]页面表现和形为分离[/li]

如果您需要更多的效果或在使用中发现本插件存在BUG,欢迎在彦磊的博客上留言,留言时请将html代码及CSS样式一并写下,最好做到,彦磊通过复制您的代码就能看到运行效果,彦磊将尽自己最大努力完善此插件。您留言前请先详细查看帮助文档样例或常见问题解答。
本插件更新版本将发布到:HTTP://HI.BAIDU.COM/DPXDQX,此为自由拷贝版本,您可以在此基础上添加任何功能,彦磊建议您将修改过的版本或发布地址发到彦磊博客上以共享,也建议您保留部分彦磊的信息。
使用帮助
使用前您一定要引入jQurey及本脚本,如
         <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
         <script type="text/javascript" src="js/YlMarquee-1.1.min.js">

1、为您要设置滚动的对象设置容器,并命名id,如id="scroll"
2、将您要滚动的对象置入<ul></ul>中,并添加li标签,li标签中可以是图片、文字或表格……
<div id="scroll">
     <ul>
          <li><img src="image/1.jpg" alt="1"></li>
          <li><img src="image/2.jpg" alt="2"></li>
         <li><img src="image/3.jpg" alt="3"></li>
          <li><img src="image/4.jpg" alt="4"></li>
      </ul>
</div>
3、在页面中添加jQuery语句,调用此插件,并对相关参数进行设置,如:
<script type="text/javascript">
$(document).ready(function(){
$("#scroll".YlMarquee({
      visible:3,
      step:1
        });
});
</script>

4、插件相关参数:
  visible:页面可见元素(图片)个数,默认为0,非必须参数。必须小于总图片(文字)即<li>标签中的个数。设置后,如果不设置相应的width参数和height参数,系统将自动设置相应的外围容器(即说明2中的id为 scroll的容器)的高(向上滚动)或宽(向左滚动),优先级低于相应的width或height属性。
  step:滚动步长,整数,默认为3,增大此数可加快滚动速度。
  vertical:滚动方向,有"true"(向上滚动)和"false"(向左滚动)两个参数,默认为false(即向左滚动)。
         width:滚动的宽度(即说明2中id为scroll的宽度),可选,不指定则必须指定visible参数。此项对向上滚动无效。
         height:滚动的高度(即说明2中id为scroll的高度),可选,不指定则必须指定visible参数。此项对向左滚动无效。
         textMode:文字模式,当滚动内容为文字时,请指定为true(1.1版本新增参数)。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文