jQuery kxbdMarquee 无缝滚动
转:http://code.ciaoca.com/jquery/kxbdmarquee/
<marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件。
载入 JavaScript 文件
<script src="jquery.js"></script>
<script src="jquery.kxbdmarquee.js"></script>
CSS 样式
/**
* 父容器需要设置溢出隐藏
* 如果是水平滚动,项目需要设置浮动
*/
#element_id{overflow:hidden;}
#element_id ul li{float:left;}
DOM 结构
<div id="element_id">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
JavaScript 调用方式
$('#element_id').kxbdMarquee();
$("#element_id").kxbdMarquee({direction:"up",isEqual:false});
参数说明
名称 | 默认值 | 说明 |
---|---|---|
direction | "left" | 滚动方向。可设置为:"left", "right", "up", "down" |
isEqual | true | 所有滚动的元素长宽是否相等。可设置为:true, false |
loop | 0 | 循环滚动次数,0 表示无限循环 |
scrollAmount | 1 | 步长(px) |
scrollDelay | 20 | 时长(ms) |
我的效果图
jQuery kxbdMarquee 无缝滚动的更多相关文章
- 一款经典的jQuery kxbdMarquee 无缝滚动插件
<marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery图片无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQuery的无缝滚动
图片无缝向左滚动的代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 基于JQuery打造无缝滚动新闻
JQuery实现 新闻无缝滚动 一.使用"首尾追加"实现无缝滚动 <head lang="en"> <meta charset="U ...
- 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器
项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...
- jquery实现无缝滚动
//点击上一页 $('.pointLeft').click(function() { if (prevAllow) { prevAllow = false; scrollUlLeft = scroll ...
- liMarquee – jQuery无缝滚动插件(制作跑马灯效果)
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...
随机推荐
- 蓝桥网试题 java 基础练习 十六进制转八进制
- -------------------------------------------------------------------------------------------------- ...
- redisson实现分布式锁原理
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- 面试之Java知识整理
1.面向对象都有哪些特性 继承.封装.多态性.抽象 2.Java中实现多态的机制是什么? 继承与接口 3.Java中异常分为哪些种类 3.1按照异常需要处理的时机分为编译时异常(CheckedExce ...
- iOS真机测试友盟碰到错误linker command failed with exit code 1 (use -v to see invocation) 百度地图的检索失败 sqlite 错误码
因为友盟不支持bitcode 在模拟器上运行正常,但是在模拟器上就会报错,这是因为xocde7之后增加了一个bitcode,bitcode是被编译程序的一种中间形式的代 码.包含bitcode配置的程 ...
- shell编程其实真的很简单(五)
通过前几篇文章的学习,我们学会了shell的基本语法.在linux的实际操作中,我们经常看到命令会有很多参数,例如:ls -al 等等,那么这个参数是怎么处理的呢? 接下来我们就来看看shell脚本对 ...
- CSS sliod属性
CSS solid 属性 制作过网页的人都有为画线而烦恼的经历,先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,它可以定义 ...
- 游戏UI框架设计(一) : 架构设计理论篇
游戏UI框架设计(一) ---架构设计理论篇 前几天(2017年2月)看到一篇文章,国内王健林.马云等大咖们看好的未来十大最有"钱途"产业中,排名第一的就是"泛娱乐&qu ...
- C#丨爬虫基础
在前几天看到一片公众号的文章是关于.NET玩爬虫. 所以今天小编索性来try一下,恰好小编最近在关注房价这一块的,索性就写了一个例子抓取房产信息的. 不善言辞的小编直接给出代码吧!相信读者也等不及了. ...
- NHibernate的常见问题及解决方案
问题1 : 异常:in expected: <end-of-text> (possibly an invalid or unmapped class name was used in th ...
- Linux系统(一)文件系统、压缩、打包操作总结
序言 当前的形势,.Net已经开源,.Net Core 正在跨平台,可见微软巨人在努力,在改变,在进步,在走向春天.从前被微软供作上帝的.Net从业者,如果不打开心扉面向开源,改变自己,那么很可能在不 ...