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 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 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
用Flash图形化数据(一)
2006/10/09 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
AngularJS基础知识
2014/12/21 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
使用Python抓取模板之家的CSS模板
2015/03/16 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
Python使用wxPython实现计算器
2018/01/30 Python
python循环输出三角形图案的例子
2019/11/22 Python
Python绘图实现显示中文
2019/12/04 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
医学毕业生自荐信
2013/10/11 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
放假通知范文
2015/04/14 职场文书
小学教师见习总结
2015/06/23 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL