首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

多种JQuery循环滚动文字图片效果代码

Posted in Javascript onJune 23, 2020

自己模仿JQ插件的写法写了一个循环滚动列表插件，支持自定义上、下、左、右四个方向，支持平滑滚动或者间断滚动两种方式，都是通过参数设置。JQ里面有些重复的地方，暂时没想到更好的方法去精简。不过效果还是可以的，如下（效果图上传后都加速了，实际效果比这个要慢很多）：

多种JQuery循环滚动文字图片效果代码

html代码如下：

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>循环滚动列表</title>
<link href="css/style.css" rel="stylesheet"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/autoScroll.js"></script>
<script>
 $(function(){
 //下面是调用语句，以ID名区分

 $("#autoScroll01").autoScroll({
 direction: 'left',  //滚动方向，'up'、'down'、'left'、'right'，*必须参数
 interval: 40,   //滚动间隔，单位'ms'，一定要大于'滚动速度'，*必须参数
 speed: 10,   //滚动完成耗时，单位'ms'，一定要小于'滚动间隔'，*必须参数
 distance: 3,   //单次滚动距离，单位'px'，*必须参数 
 liWidth: 144,   //单个li的盒模型高度&宽度(包括margin值。左右滚动只有liWidth参数，上下滚动只有liHeight参数)，*必须参数
 showNum: 6   //显示几个li，父级高会自适应，但不要超过最大个数，*必须参数 
 });

 $("#autoScroll02").autoScroll({
 direction: 'up',   
 interval: 50,   //interval、speed、distance都很小时，就形成了平滑滚动现象。
 speed: 10,   
 distance: 1,   
 liHeight: 30,     
 showNum: 4   
 });

 $("#autoScroll03").autoScroll({
 direction: 'down',  //向下滚动
 interval: 2000,   //2秒滚动一次
 speed: 600,   //滚动耗时0.6秒（所以必须2秒内滚完，以免没滚完就执行下一次滚动了）
 distance: 40,   //一次滚动40px
 liHeight: 40,   //单个的li的盒模型高度是40px（上下滚动li没有margin跟padding值）
 showNum: 3   //容器里显示3个li标签
 });

 $("#autoScroll04").autoScroll({
 direction: 'right',
 interval: 2500,   //interval、speed、distance都很大时，就形成了间歇性滚动现象。
 speed: 800,
 distance: 288,   
 liWidth: 144,   //左右滚动时，liWidth要算上margin值，注意盒模型
 showNum: 5   
 });

 });
</script>
</head>
<body>
<!-- wrap和boxs box0*这个div非必需,用于布局而已 --> 
<div class="wrap">
 <!-- 布局必须结构为：外层容器id，里面是 ul 跟 li -->
 <div class="boxs box01">
 <div class="autoBox" id="autoScroll01">
 <ul class="clearfix">
 <li><a href="#"><img src="images/img01.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img02.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img03.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img04.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img05.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img06.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img07.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img08.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img09.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img10.jpg" alt=""></a></li>
 </ul>
 </div>
 </div>
 <!--第二个案例 保持结构不变，id不同就可以复用多个-->
 <div class="boxs box02">
 <div class="autoBox" id="autoScroll02">
 <ul>
 <li><a href="#">1. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">2. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">3. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">4. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">5. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">6. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">7. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">8. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 </ul>
 </div>
 </div>
 <div class="boxs box03">
 <div class="autoBox" id="autoScroll03">
 <ul>
 <li><a href="#">1. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">2. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">3. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">4. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">5. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">6. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">7. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 <li><a href="#">8. 何日功成名遂了，还乡，醉笑陪公三万场。不用诉离觞，痛饮从来别有肠。</a></li>
 </ul>
 </div>
 </div>
 <div class="clear"></div>
 <div class="boxs box04">
 <div class="autoBox" id="autoScroll04">
 <ul class="clearfix">
 <li><a href="#"><img src="images/img01.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img02.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img03.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img04.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img05.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img06.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img07.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img08.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img09.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/img10.jpg" alt=""></a></li>
 </ul>
 </div>
 </div>
</div>
</body>
</html>

css样式如下：

@charset "utf-8";
/* 简单reset */
body, ul, li {
 margin: 0;
 padding: 0;
}
body {
 font: 14px/24px Microsoft YaHei;
 color: #333;
}
ul { list-style: none; }
a {
 color: #333;
 outline: none;
 text-decoration: none;
}
a:hover { color: #2986dd; }
img { border: none; }
.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}
.clear {
 display: block;
 clear: both;
 height: 0;
 font-size: 0;
 line-height: 0;
 content: ".";
 overflow: hidden;
}
.wrap {
 width: 900px;
 padding-top: 30px;
 margin: 0 auto;
}
.boxs {
 padding: 15px;
 margin: 0 auto 30px;
 background-color: #e4fbff;
}
.box01 { width: 870px; }
.box02 {
 float: left;
 width: 400px;
}
.box03 {
 float: right;
 width: 400px;
}
.box04 { width: 720px; }
/* 具体样式 ---------- */
/* 通用必需样式 */ /* PS：有些重要样式在js里先写好了，下面id容器、ul和li标签的样式比较重要 */ 
.autoBox {
 position: relative;
 margin: 0 auto;
 overflow: hidden;
}
.autoBox ul {
 position: absolute;
 list-style: none;
 z-index: 2;
}
/* 第一、四个列表 */ /* PS：左右滚动型列表需要css定义高度，li标签可以有margin值 */
#autoScroll01, #autoScroll04 {
 width: auto;
 height: 174px;
}
#autoScroll01 ul li, #autoScroll04 ul li {
 float: left;
 width: 128px;
 height: 168px;
 padding: 3px;
 margin: 0 5px;
 _display: inline;
}
#autoScroll01 li a, #autoScroll04 li a {
 display: block;
 padding: 3px;
 border: 1px solid #dbdbdb;
 box-shadow: 0 0 3px rgba(170, 223, 252, 0.5);
}
#autoScroll01 li a:hover, #autoScroll04 li a:hover {
 border-color: #71ddff;
 box-shadow: 0 0 3px rgba(77, 185, 245, .90);
}
#autoScroll01 li img, #autoScroll04 li img {
 display: block;
 width: 120px;
 height: 160px;
}
/* 第二、三个列表 */ /* PS：上下滚动型列表需要css定义宽度，li标签尽量不要设置margin值 */
#autoScroll02, #autoScroll03 {
 width: 100%;
 height: auto;
}
#autoScroll02 ul li {
 height: 30px;
 line-height: 30px;
 overflow: hidden;
}
#autoScroll03 ul li {
 height: 40px;
 line-height: 40px;
 overflow: hidden;
}
#autoScroll02 li a, #autoScroll03 li a {
 display: block;
 width: 100%;
 height: 24px;
 line-height: 24px;
 margin: 3px 0;
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden;
}
#autoScroll03 li a { margin: 8px 0; }

js代码如下：

/** 
 * Name : 循环滚动列表 
 **/
 (function(jQuery){
 $.fn.autoScroll = function (o) {
 o = $.extend({     //设置默认参数 
  direction: 'left',
  interval: null,
  speed: null,
  distance: null,    
  liWidth: null,
  liHeight: null,     
  showNum: null
 },o || {});
 return this.each(function(){   //回调开始
  var $ts = $(this),
  $ul = $ts.children("ul"),
  $li = $ul.children("li"),
  len = $li.length;
  if (o.direction == 'up' || o.direction == 'down' ){  //根据类型设置css
  $ts.css({ "width": "100%", "height": o.showNum * o.liHeight });
  $ul.css({ "width": "100%", "height": len * o.liHeight });
  $li.css({ "float": "none", "width": "100%", "height": o.liHeight, "margin": 0,"padding": 0 });
  };  
  if (o.direction == 'left' || o.direction == 'right' ){ //其实也可以在css里写好
  $ts.css({ "width": o.showNum * o.liWidth });
  $ul.css({ "width": len * o.liWidth });
  $li.css({ "float": "left" });
  };
  switch (o.direction){     //分四种情况，进行事件调用
  case 'left': sroLeft();
  break;
  case 'right':sroRight();
  break;
  case 'up': sroUp();
  break;
  case 'down': sroDown();
  break; 
  };
  function sroLeft(){      //向左滚动事件
  $ul.css("left", 0); 
  var left;
  function leftMoving(){
   var dis = -o.distance,
   dif = -o.liWidth * (len - o.showNum);
   left = parseFloat($ul.css("left"));
   if (left <= dif){
   $ul.css("left",0);
   left = 0;
   $ul.delay(o.interval);
   };
   var ltDis = left + dis;
   if(ltDis <= dif){
   ltDis = dif;
   };
   $ul.animate({"left":ltDis+"px"}, o.speed);
  };
  $ul.hover(      //鼠标移上、移下的阻止与恢复滚动
   function(){
   clearInterval(fnLeft);
   },
   function(){
   fnLeft = setInterval(function(){leftMoving()}, o.interval);
   }
  );
  fnLeft = setInterval(function(){leftMoving()}, o.interval);
  };
  function sroRight(){     //向右滚动事件
  $ul.css("right", 0); 
  var right;
  function rightMoving(){
   var dis = -o.distance,
   dif = -o.liWidth * (len - o.showNum);
   right = parseFloat($ul.css("right"));
   if (right <= dif){
   $ul.css("right",0);
   right = 0;
   $ul.delay(o.interval);
   };
   var rtDis = right + dis;
   if(rtDis <= dif){
   rtDis = dif;
   };
   $ul.animate({"right":rtDis+"px"}, o.speed);
  };
  $ul.hover(
   function(){
   clearInterval(fnRight);
   },
   function(){
   fnRight = setInterval(function(){rightMoving()}, o.interval);
   }
  );
  fnRight = setInterval(function(){rightMoving()}, o.interval);
  };
  function sroUp(){      //向上滚动事件
  $ul.css("top", 0);
  var top;
  function upMoving(){
   var dis = -o.distance,
   dif = -o.liHeight * (len - o.showNum);
   top = parseFloat($ul.css("top"));
   if (top <= dif){
   $ul.css("top",0);
   top = 0;
   $ul.delay(o.interval);
   };
   var tpDis = top + dis;
   if(tpDis <= dif){
   tpDis = dif;
   };
   $ul.animate({"top":tpDis+"px"}, o.speed);
  };
  $ul.hover(
   function(){
   clearInterval(fnUp);
   },
   function(){
   fnUp = setInterval(function(){upMoving()}, o.interval);
   }
  );
  fnUp = setInterval(function(){upMoving()}, o.interval);
  };
  function sroDown(){      //向下滚动事件
  $ul.css("bottom",0);
  var bottom;
  function downMoving(){
   var dis = -o.distance,
   dif = -o.liHeight * (len - o.showNum);
   bottom = parseFloat($ul.css("bottom"));
   if (bottom <= dif){
   $ul.css("bottom",0);
   bottom = 0;
   $ul.delay(o.interval);
   };
   var bmDis = bottom + dis;
   if(bmDis <= dif){
   bmDis = dif;
   };
   $ul.animate({"bottom":bmDis+"px"}, o.speed);
  };
  $ul.hover(
   function(){
   clearInterval(fnDown);
   },
   function(){
   fnDown = setInterval(function(){downMoving()}, o.interval);
   }
  );
  fnDown = setInterval(function(){downMoving()}, o.interval);
  };
 });
 };
})(jQuery);

兼容到IE6+，jq库用1.7+的都没问题 。

多种JQuery循环滚动文字图片效果代码

- Author -

子纯不语

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript的函数
Jan 31 Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
三种AngularJS中获取数据源的方式
Feb 02 #Javascript
原生JS实现拖拽图片效果
Aug 27 #Javascript
基于jquery实现下拉框美化特效
Feb 02 #Javascript
AngularJS自动表单验证
Feb 01 #Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 #Javascript
AngularJS手动表单验证
Feb 01 #Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 #Javascript
Telnet(1) 负载均衡(6) 动静分离(1) http(6) 远程控制(1) IIS(7) Windows server 2016(6) Windows server 2019(5) https(7) Windows server 2008(5)
You might like
IP攻击升级，程序改进以对付新的攻击
2010/11/23 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
php中filter_input函数用法分析
2014/11/15 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
税务专业毕业生自荐信
2013/11/10 职场文书
出纳岗位职责模板
2013/11/27 职场文书
网页设计个人找工作求职信
2013/11/28 职场文书
编辑找工作求职信范文
2013/12/16 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
二手房购房协议书范本
2014/10/05 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
七个Python必备的GUI库
2021/04/27 Python