jQuery模拟Marquee实现无缝滚动效果完整实例


Posted in Javascript onSeptember 29, 2016

本文实例讲述了jQuery模拟Marquee实现无缝滚动效果。分享给大家供大家参考,具体如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>模拟Marquee无缝滚动</title>
<style type="text/css">
/* CSS Document reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
  outline: 0;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  padding: 0;
  font-size: 12px;
  margin: 0px auto auto auto;
  color: black;
  cursor:default;
}
ol, ul {
  list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
  border-collapse: collapse;
  border-spacing: 0;
}
caption, th, td {
  font-weight: normal;
  text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
}
blockquote, q {
  quotes: "" "";
}
a img {
  border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
ul, li, ol {list-style: none;}
/* 水平滚动 */
.marquee_horizontal {overflow:hidden; width:360px; height:45px;}
.marquee_horizontal ul li {float:left; padding:0px; line-height:24px;}
.marquee_horizontal ul li img {display:block;}
/* 垂直滚动 */
.marquee_vertical {overflow:hidden; width:60px; height: 225px;}
.marquee_vertical ul li {float:left; padding:0px;}
.marquee_vertical ul li img {display:block;}
.marquee_c {overflow:hidden; width:360px; height: 25px;}
.marquee_c ul li {float:left; padding:0px; line-height: 24px;}
.marquee_d {overflow:hidden; width:180px; height:200px;}
.marquee_d ul li {float:left; width:180px; padding: 0px; line-height:20px;}
</style>
</head>
<body>
    <div id="marquee_a" class="marquee_horizontal">
      <ul>
        <li><a href="#"><img src="img/a1.jpg"></a></li>
        <li><a href="#"><img src="img/a2.jpg"></a></li>
        <li><a href="#"><img src="img/a3.jpg"></a></li>
        <li><a href="#"><img src="img/a4.jpg"></a></li>
        <li><a href="#"><img src="img/a5.jpg"></a></li>
        <li><a href="#"><img src="img/a6.jpg"></a></li>
        <li><a href="#"><img src="img/a7.jpg"></a></li>
        <li><a href="#"><img src="img/a8.jpg"></a></li>
      </ul>
    </div>
    <div id="marquee_b" class="marquee_vertical">
      <ul>
        <li><a href="#"><img src="img/a1.jpg"></a></li>
        <li><a href="#"><img src="img/a2.jpg"></a></li>
        <li><a href="#"><img src="img/a3.jpg"></a></li>
        <li><a href="#"><img src="img/a4.jpg"></a></li>
        <li><a href="#"><img src="img/a5.jpg"></a></li>
        <li><a href="#"><img src="img/a6.jpg"></a></li>
        <li><a href="#"><img src="img/a7.jpg"></a></li>
        <li><a href="#"><img src="img/a8.jpg"></a></li>
      </ul>
    </div>
    <div id="marquee_c" class="marquee_c">
      <ul>
        <li><a href="#">星期一要长</a></li>
        <li><a href="#">星期二特别长一点</a></li>
        <li><a href="#">星期三</a></li>
        <li><a href="#">星期四长度不等</a></li>
        <li><a href="#">星期五</a></li>
        <li><a href="#">星期六长短</a></li>
        <li><a href="#">星期日</a></li>
      </ul>
    </div>
    <div id="marquee_d" class="marquee_d">
      <ul>
        <li><a href="#">星期一星期一星期一星期一星期一星期一星期一星期一星期一</a></li>
        <li><a href="#">星期二</a></li>
        <li><a href="#">星期三星期三星期三星期三星期三星期三</a></li>
        <li><a href="#">星期四</a></li>
        <li><a href="#">星期五</a></li>
        <li><a href="#">星期六星期六星期六星期六星期六星期六星期六星期六星期六星期六星期六星期六星期六星期六星期六星期六星期六</a></li>
        <li><a href="#">星期日</a></li>
      </ul>
    </div>
<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js" type="text/javascript"></script>
<script src="http://ah.sina.com.cn/iframe/101/2014/1117/130.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("#marquee_a").kxbdMarquee();
  $("#marquee_b").kxbdMarquee({direction:"down"});
  $("#marquee_c").kxbdMarquee({direction:"left",isEqual:false});
  $("#marquee_d").kxbdMarquee({direction:"up",isEqual:false});
});
</script>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
js常用排序实现代码
Dec 28 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
javascript中字符串拼接详解
Sep 26 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
九种原生js动画效果
Nov 11 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 #Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 #Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 #Javascript
JSON 对象未定义错误的解决方法
Sep 29 #Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 #Javascript
json定义及jquery操作json的方法
Sep 29 #Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 #Javascript
You might like
php学习笔记 数组的常用函数
2011/06/13 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
asp批量修改记录的代码
2008/06/25 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
javascript实现动态标签云
2015/10/16 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
讲解Python中的标识运算符
2015/05/14 Python
Python变量作用范围实例分析
2015/07/07 Python
快速入手Python字符编码
2016/08/03 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
个人实习生的自我评价
2014/02/16 职场文书
环保公益广告语
2014/03/13 职场文书
成龙洗发水广告词
2014/03/14 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
Java内存模型之happens-before概念详解
2021/06/13 Java/Android
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS