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 相关文章推荐
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
vue实现数字滚动效果
Jun 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
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
中国电视购物:快乐购
2017/02/04 全球购物
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
Gap英国官网:Gap UK
2018/07/18 全球购物
RealTek面试题
2016/06/28 面试题
一份报关员的职业规划范文
2014/01/08 职场文书
毕业设计计划书
2014/01/09 职场文书
校园创业策划书
2014/01/14 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
关于环保的演讲稿
2014/05/10 职场文书
英语系毕业生求职信
2014/07/13 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
Kubernetes控制节点的部署
2022/04/01 Servers