JS实现横向跑马灯效果代码


Posted in Javascript onApril 20, 2020

首先我们需要一个html代码的框架如下:

<div style="position: absolute; top: 0px; left: 168px; width: 100%; margin-left: auto; margin-right: auto; height: 47px; border: 0px solid red; overflow: hidden;">
    <ul id="syNoticeUlNew" style="margin: 0px;left:0; top:0;margin-bottom:0px;width:100%;height:47px;position:absolute;">

    </ul>
  </div>

我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容应该是动态的。于是应该发送ajax来进行内容的获取拼接。

$.ajax({
      type:"post",
      dataType:"json",
      url:"${contextPath}/indexPage/getSyNoticeInfo",
      success:function(result){
        var totalStr = "";
        if(result.length>0){
          for(var i=0 ; i<result.length;i++){
            str = "<li style=\"list-style: none;display:inline-block;float:left;height:47px;padding-right:50px;line-height:47px;\">"+
             "<a style=\"color:white;\" class=\"sstzNoticeStyle\">"+result[i].peopleName+"</a>"+
             "</li>";
            totalStr +=str;
          }
        }
        $("#syNoticeUlNew").empty();
        $('#syNoticeUlNew').html(totalStr);
        syRunHorseLight();
      }
    });

拼接li时候有个class为sstzNoticeStyle。其样式如下:

.sstzNoticeStyle{
  color:white; font-size:16px;text-decoration:none;
}
.sstzNoticeStyle:hover{
  color:white; font-size:16px;text-decoration:none;
}

ajax调用syRunHorseLight函数,函数如下:

function syRunHorseLight() {
    if (syTimer != null) {
      clearInterval(syTimer);
    }
    var oUl = document.getElementById("syNoticeUlNew");
    if(oUl != null){
      oUl.innerHTML += oUl.innerHTML;
      oUl.innerHTML += oUl.innerHTML;
      oUl.innerHTML += oUl.innerHTML;
      var lis = oUl.getElementsByTagName('li');
      var lisTotalWidth = 0;
      var resetWidth = 0;
      for (var i = 0; i < lis.length; i++) {
        lisTotalWidth += lis[i].offsetWidth;
      }
      for (var i = 1; i <= lis.length / 4; i++) {
        resetWidth += lis[i].offsetWidth;
      }
      oUl.style.width = lisTotalWidth + 'px';
      var left = 0;
      syTimer = setInterval(function() {
        left -= 1;
        if (left <= -resetWidth) {
          left = 0;
        }
        oUl.style.left = left + 'px';
      }, 20)
      $("#syNoticeUlNew").hover(function() {
        clearInterval(syTimer);
      }, function() {
        clearInterval(syTimer);
        syTimer = setInterval(function() {
          left -= 1;
          if (left <= -resetWidth) {
            left = 0;
          }
          oUl.style.left = left + 'px';
        }, 20);
      })
    }
  }

跑马灯效果就此实现。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js自带函数备忘 数组
Dec 29 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
vue2.x数组劫持原理的实现
Apr 19 #Javascript
vue2.x 对象劫持的原理实现
Apr 19 #Javascript
基于js判断浏览器是否支持webGL
Apr 18 #Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 #Javascript
javascript 内存模型实例详解
Apr 18 #Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 #Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 #Javascript
You might like
PHP 编写大型网站问题集
2010/05/07 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python编写暴力破解FTP密码小工具
2014/11/19 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
python3中函数参数的四种简单用法
2018/07/09 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
JAVA代码查错题
2014/10/10 面试题
四年级下册教学反思
2014/02/01 职场文书
生物学专业求职信
2014/07/23 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
2014年新教师工作总结
2014/11/08 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
解决golang在import自己的包报错的问题
2021/04/29 Golang
Python闭包的定义和使用方法
2022/04/11 Python