无缝循环marquee滚动JS代码实现,兼容IE, FireFox, Chrome,供大家参考,具体内容如下
首先是CSS和HTML如下:
#marquee_zxd { border: 1px solid red; white-space: nowrap; overflow: hidden; width: 500px; padding-top: 5px; } #marquee_zxd img { height: 100px; } <!-- 横向一定要是span --> <div id="marquee_zxd"><span> <!-- 内嵌一个div很重要,里面的元素必须是一个整体的移动。另外横移时,必须是行级元素只占自己的空间。 --> <div id="marquee_inner" style="position:relative; display: inline-block;"> <img src="/UploadFiles/2021-04-02/duck.png">下面是JS实现marquee_zxd.js:
/**除了Chrome以外的浏览器可以通过scrollLeft属性控制滚动*/ function scrolleft(obj){ var $obj = $(obj); //到右边顶端后不会再变 //var temp = obj.scrollLeft; //obj.scrollLeft++; var temp = $obj.scrollLeft(); //console.log(temp); $obj.scrollLeft(temp+1); //当滚动条到达右边顶端时;或本身长度不够不好滚动(漫出才好滚) //if(obj.scrollLeft == temp){ if($obj.scrollLeft() == temp){ obj.innerHTML += obj.innerHTML; console.log('copy'); } //当滚动条滚动了初始内容的宽度时,滚动条回到最左端,模拟循环 //if (obj.scrollLeft >= obj.firstChild.offsetWidth) // obj.scrollLeft = 0; if ($obj.scrollLeft() >= obj.firstChild.offsetWidth) $obj.scrollLeft(0); } /**除了Chrome以外的浏览器可以通过scrolleft()滚动*/ function initMarquee(){ var aaa = document.getElementById('marquee_zxd'); var MyMar = setInterval(function(){ scrolleft(aaa); }, 20); //鼠标移上时清除定时器达到滚动停止的目的 aaa.onmouseover=function() {clearInterval(MyMar);}; //鼠标移开时重设定时器 aaa.onmouseout=function() {MyMar = setInterval(function(){ scrolleft(aaa); }, 20);}; } /**Chrome定时器循环函数,通过relative布局的left属性控制滚动*/ function scrolleftChrome($marquee_inner, inner_width){ var width = parseInt(inner_width); var leftPx = $marquee_inner.css("left"); //兼容IE if(leftPx == 'auto') leftPx = 0; //位置左移 var left = parseInt(leftPx); left = left - 1; //到顶归位 if(left <= -width) left = 0; $marquee_inner.css("left", left); //console.log(width + ", " + left); } /**Chrome浏览器可以通过scrolleftChrome滚动*/ function initMarqueeChrome() { //局部变量不污染全局变量空间 var $marquee_inner = $('#marquee_inner'); //原内容大小 var inner_width = $marquee_inner.css('width'); //复制一份原内容 var innerHtml = $marquee_inner.html(); $marquee_inner.html(innerHtml + innerHtml); console.log(inner_width); //参数采用字符串形式的缺陷:参数不能被周期性改变,参数必须是全局变量 //var MyMar = setInterval("scrolleftChrome($marquee_inner, inner_width)", 5000); var MyMar = setInterval(function(){ //参数不污染全局变量空间 scrolleftChrome($marquee_inner, inner_width); }, 50); var marquee_zxd = document.getElementById('marquee_zxd'); //鼠标移上时清除定时器达到滚动停止的目的 marquee_zxd.onmouseover=function() {clearInterval(MyMar);}; //鼠标移开时重设定时器 marquee_zxd.onmouseout=function() { //参数采用字符串形式的缺陷:参数不能被周期性改变,参数必须是全局变量 //MyMar = setInterval("scrolleftChrome($marquee_inner, inner_width)", 50); MyMar = setInterval(function(){ //参数不污染全局变量空间 scrolleftChrome($marquee_inner, inner_width); }, 50); }; } $(function(){ var ua = window.navigator.userAgent; var isIE = window.ActiveXObject != undefined && ua.indexOf("MSIE") != -1; var isFirefox = ua.indexOf("Firefox") != -1; var isChrome = ua.indexOf("Chrome") && window.chrome; if(isChrome){ initMarqueeChrome(); console.log("isChrome: initMarqueeChrome"); }else{ initMarquee(); console.log("isChrome: initMarquee"); } });以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- 任天堂今晚举行直面会!第三方及独立游戏展示
- 《哆啦A梦的铜锣烧店物语》发售!开罗公式+哆啦A梦
- 任天堂公布《塞尔达传说》系列时间线:野炊与王泪独立在外
- 五条人.2012-一些风景2CD【刀马旦】【WAV+CUE】
- 陈奕迅.2013-Easons.Life演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许美静.1995-遗憾(新马版)【上华】【WAV+CUE】
- 《叶倩文 歌声情缘》[WAV+CUE][410MB]
- 《张国荣 首首动听经典不容错过 追忆的风 2CD》[WAV+CUE][870MB]
- 《腾格尔 容中尔甲 亚东 高原三星 男人篇 3CD》[WAV/分轨][1GB]
- 命运圣契公测实测可用兑换码大全 命运圣契最新兑换码分享
- 黑神话悟空上品疾蝠精魄获取方法一览|上品疾蝠精魄收集攻略
- 《七龙珠电光炸裂!ZERO》GT角色预告片曝光,15位新角色登场
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-7