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 相关文章推荐
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
js实现消息滚动效果
Jan 18 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
openlayers实现地图弹窗
Sep 25 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四种基础算法代码实例
2013/10/29 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
vc6编写python扩展的方法分享
2014/01/17 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
python实现简单颜色识别程序
2020/02/19 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
毕业典礼主持词
2015/06/29 职场文书
公司回复函格式
2015/07/14 职场文书
运动会入场词
2015/07/18 职场文书
化工厂员工工作总结
2015/10/15 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸