基于jQuery图片平滑连续滚动插件


Posted in Javascript onApril 27, 2009

* 此插件要求运行在jQuery v1.3 或更高版本上
* 插件可以实现图片平滑向上或向左滚动
* 如果您需要更多的效果或在使用中本插件存在BUG,可以给在彦磊的博客上留言,彦磊将尽自己最大努力完善此插件
* 您留言前请先到:http://gmarwaha.com/jquery/jcarousellite/ 上面下载jcarousellite插件 
* 来和彦磊图片平滑滚动的插件相互补充使用以获取更多的图片效果
* 彦磊图片平滑滚动插件只是对jcarousellite插件的补充
*
*
* 技术支持:HTTP://HI.BAIDU.COM/DPXDQX
* 此为自由拷贝版本,您可以在此基础上添加任何功能
* 彦磊建议您将修改过的版本或发布地址发到彦磊博客上以共享,也建议您保留部分彦磊的信息
*
*
* 此插件没有象jcarousellite插件样对相关元素的CSS全自动设置,部分CSS样式需要您为设置
* 原因很简单:您需要考虑部分用户的浏览器不支持JAVASCRIPT或相关功能被禁用
* 您需要让您的页面元素布局在此时也能显示正确,因此必要的CSS设置还需要您自己来做。
*
* 使用前您一定要引入jQurey及本脚本,如
* <script type="text/javascript" src="js/jquery_last.js"></script>
* <script type="text/javascript" src="js/YlMarquee.js">
* 使用方法:
*
* 1、为您要设置滚动的对象设置容器,并命名class,如class="ylMarquee"
* 2、将您要滚动的对象置入<ul></ul>中,并添加li标签,li标签中可以是图片、文字或表格……
* 3、此版本需要您设置每个li列表的宽度或高度一至
* <div class="ylMarquee">
* <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>
* </ul>
* </div>
* 4、设置ylMarquee的height或width样式——向上滚动必须设置height的大小,向左滚动必须设置width的大小,否则页面将显示不正常。
* 5、在页面中添加jQuery语句,调用此插件,并对相关参数进行设置,如:
* <script type="text/javascript">
* $(document).ready(function(){
* $(".stroll").jMarquee({
* visible:3,
* step:1,
* direction:"left"
* });
*});
* </script>
* 6、插件相关参数:
* visible:页面可见元素(图片)个数,默认为1,必须参数。
* step:滚动步长,整数,默认为1,增大此数可加快滚动速度,设为0,则不进行滚动。
* direction:滚动方向,有"left"(向左滚动)和"up"(向上滚动)两个参数,注意设置时一定要加英文的双引("")号或单引号('')。
*/
演示地址:http://img.3water.com/online/jquery_pic/jquery_pic.htm
下载地址 http://img.3water.com/online/jquery_pic/jquery_pic_files/YlMarquee.js

Javascript 相关文章推荐
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
JQuery教学之性能优化
May 14 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 Javascript
vant实现购物车功能
Jun 29 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 Javascript
js 发个判断字符串是否为符合标准的函数
Apr 27 #Javascript
jQuery 对象中的类数组操作
Apr 27 #Javascript
jquery遍历input取得input的name
Apr 27 #Javascript
jquery创建div 实现代码
Apr 27 #Javascript
js tab 选项卡
Apr 26 #Javascript
JavaScript 使用技巧精萃(.net html
Apr 25 #Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 #Javascript
You might like
学习使用curl采集curl使用方法
2012/01/11 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
laravel入门知识点整理
2020/09/15 PHP
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
Python爬虫中urllib库的进阶学习
2018/01/05 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
int在python中的含义以及用法
2019/06/27 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
Django返回HTML文件的实现方法
2020/09/17 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
奥运会口号
2014/06/13 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
《颐和园》教学反思
2016/02/19 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python