JS实现横向跑马灯效果代码
更新时间:2020年04月20日 08:25:32 作者:经典鸡翅
这篇文章主要介绍了JS实现横向跑马灯效果代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
首先我们需要一个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); }) } }
跑马灯效果就此实现。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
最近网站改版想让复制代码功能在多个浏览器上都可以实现,最近看网上不少说我们的代码复制功能不好用的,我们最近将会增加代码高亮等功能,希望大家多多支持我们2014-06-06JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
下面小编就为大家带来一篇JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-05-05详解JavaScript原生封装ajax请求和Jquery中的ajax请求
在本篇文章中我们总结了关于JavaScript原生封装ajax请求和Jquery中的ajax请求的知识点内容,需要的朋友们学习参考下。2019-02-02实现checkbox全选、反选、取消JavaScript小脚本异常
实现checkbox全选,反选,取消JavaScript小脚本的时出现点小异常,大家可以看看,以后就不要犯这个特别2的错误了2014-04-04
最新评论