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 相关文章推荐
js 设置选中行的样式的实现代码
May 24 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
js与applet相互调用的方法
Jun 22 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
JavaScript实现网页留言板功能
Nov 23 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静态类
2006/11/25 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
行政助理岗位职责范文
2013/12/03 职场文书
消防安全检查制度
2014/02/04 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
高中班主任心得体会
2016/01/07 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
汽车销售合同文本
2019/08/08 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP