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 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
javascript 显示当前系统时间代码
Dec 28 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
在vue中嵌入外部网站的实现
Nov 13 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中的traits简单使用实例
2015/05/13 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
PHP 图片处理
2020/09/16 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
JS 有名函数表达式全面解析
2010/03/19 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
Vue header组件开发详解
2018/01/26 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
python检测lvs real server状态
2014/01/22 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
Python中enumerate函数代码解析
2017/10/31 Python
numpy数组拼接简单示例
2017/12/15 Python
python树的同构学习笔记
2019/09/14 Python
tensorflow的计算图总结
2020/01/12 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
基于python实现计算两组数据P值
2020/07/10 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
市场督导岗位职责
2015/04/10 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
地道战观后感
2015/06/04 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
财产分割协议书
2016/03/22 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
SQL Server使用导出向导功能
2022/04/08 SQL Server