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 20 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
使用微信SDK自定义分享的方法
Jul 03 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
mysql+php分页类(已测)
2008/03/31 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
popdiv
2006/07/14 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
python去除文件中重复的行实例
2018/06/29 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
基于django传递数据到后端的例子
2019/08/16 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
实现Python与STM32通信方式
2019/12/18 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
社区道德讲堂实施方案
2014/03/21 职场文书
2014年技术员工作总结
2014/11/18 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
学生检讨书范文
2019/06/24 职场文书
python 命令行传参方法总结
2021/05/25 Python