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实现的论坛常用的运行代码的效果
Jul 15 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 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
JavaScript多线程的实现方法
2007/05/08 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
wxPython学习之主框架实例
2014/09/28 Python
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
python的setattr函数实例用法
2020/12/16 Python
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
车间统计员岗位职责
2014/01/05 职场文书
部队领导证婚词
2014/01/12 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python