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改变文章字体大小的实例代码
Nov 27 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
vue 实现锚点功能操作
Aug 10 Javascript
JavaScript中的Proxy对象
Nov 27 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读取IMAP邮件
2006/10/09 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
destoon复制新模块的方法
2014/06/21 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
JS前端加密算法示例
2016/12/22 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
python 控制语句
2011/11/03 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
人事文员岗位职责
2014/02/16 职场文书
中央空调节能方案
2014/06/15 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
红歌会主持词
2015/07/02 职场文书
运动会新闻稿
2015/07/17 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
2016年少先队活动总结
2016/04/06 职场文书
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers
Go 内联优化让程序员爱不释手
2022/06/21 Golang