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 href的用法
May 13 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 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的zip解压缩类pclzip使用示例
2014/03/14 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
jquery等待效果示例
2014/05/01 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
python实现bucket排序算法实例分析
2015/05/04 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
python 生成图形验证码的方法示例
2018/11/11 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
Python定时器线程池原理详解
2020/02/26 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
Python 忽略文件名编码的方法
2020/08/01 Python
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
医学生自我鉴定范文
2013/11/08 职场文书
自我鉴定范文
2013/11/10 职场文书
师德先进个人材料
2014/12/20 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android