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 24 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
vue 解决异步数据更新问题
Oct 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
构建简单的Webmail系统
2006/10/09 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
php实现mysql封装类示例
2014/05/07 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
社区国庆节活动方案
2014/02/05 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
商铺租房协议书范本
2014/12/04 职场文书
个人总结与自我评价
2015/02/14 职场文书
体检通知范文
2015/04/21 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL