首页 > 基础知识 > 正文

js文字滚动,一个js文字无缝滚动的问题,这段代码滚动的原理到底是什么呀?

2020-04-30 09:44:41  来源:http://www.yummyboobs.net  编辑:admin

滚动的HTML代码公告,当内容滚动完后会现一段时间的空白,如何将这段时间的空白取掉,让文字连续滚动

你用的marquee 只是HTML标签里的跑马灯效果标签,该标签使用简单,对于显示效果要求不高的网站使用还不错。但对于要求效果高的地方就完全不能胜任了,他最大的问题就是你提出来的这个问题,一段内容显示完后会有一段空白。所以现在制作网站一般都不用marquee了,而是用JS来控制进行无缝滚动。下面是我给你写的代码。(注意该代码要想正使用,必须得内容文字高度大于外框高度时才能有效,就像我下面的代码,你可以直接贴上试试,这不是我写的代码有问题,这是所有这类代码都是这样,如果你能看懂原理就用我多说了)。<div id="demo" style="width:175px;height:160;border:1px solid red;overflow:hidden;"><div id="demo1">当钟声响彻夜空的时候,我们迎来636f7079e799bee5baa631333330323235了一个充满希望的2012年<br>我们迎来了一个充满希望的2012年<br>我们迎来了一个充满希望的2012年<br>我们迎来了一个充满希望的2012年</div><div id="demo2"></div></div><script type="text/javascript"><!--function $(Str){return document.getElementById(Str);}var speed=30;var demo=$("demo");var demo1=$("demo1");var demo2=$("demo2");demo2.innerHTML=demo1.innerHTML;function Marquee1(){if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight; } else{demo.scrollTop++}}var MyMar1=setInterval(Marquee1,speed)//设置定时器//鼠标移上时清除定时器达到滚动停止的目的demo.onmouseover=function() {clearInterval(MyMar1)}//鼠标移开时重设定时器demo.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}//--></script>

js实现文字内容超出span宽度,横向滚动,求助!

判断下当前文字的长度就行了!

求JS文字左右滚动代码!不要marquee这个标签!

保存成html文件,打开就能看到效果了。636f70797a686964616f31333330363133 <html><head><title>left to right</title></head><script type="text/javascript"> function onload() { window .setInterval( function() { var marginLeft = document .getElementById("leftToRight").style.marginLeft;moveAfterLeft = marginLeft.substr(0, marginLeft.length - 2) * 1 + 50; if (moveAfterLeft < screen.width - 150) { document.getElementById("leftToRight").style.marginLeft = moveAfterLeft; } else { clearInterval(); } }, 100); }</script><body onload="onload()"> <ul> <li id="leftToRight" style="margin-left: 0; width: 100px">left to right</li> </ul></body></html>

jQuery文字无缝滚动

jq有一个scroll.js插件,就是实现文字无缝滚动的。其使用方法也很简单。①:在<head></head>标签里面引用文件 jquery.js,scroll.js,style.css;②:调用相关zd的js;如:<scripttype="text/javascript">$(document).ready(function(){$('.list_lhli:even').addClass('lieven');$("div.list_lh").myScroll({speed:40,//数值越大,速度越慢rowHeight:68//li的高度});});</script>PS:li的高度与rowHeight的值要一致,要不然的话会出现卡顿。

这段html中的JS文字滚动代码,如何加入鼠标事件

var textDiv = document.getElementById("rollText");var textList = textDiv.getElementsByTagName("a");if(textList.length > 2){var textDat = textDiv.innerHTML;var br = textDat.toLowerCase().indexOf("<br",textDat.toLowerCase().indexOf("<br")+3);//var textUp2 = textDat.substr(0,br);textDiv.innerHTML = textDat+textDat+textDat.substr(0,br);textDiv.style.cssText = "position:absolute; top:0";var textDatH = textDiv.offsetHeight;MaxRoll();textDiv.onmouseenter = function() {//鼠标进入e69da5e6ba90e79fa5e9819331333335313731clearInterval(maxTime);}textDiv.onmouseleave = function() {//鼠标离开MaxRoll();}}var minTime,maxTime,divTop,newTop=0;function MinRoll(){newTop++;if(newTop<=divTop+40){textDiv.style.top = "-" + newTop + "px";}else{clearInterval(minTime);maxTime = setTimeout(MaxRoll,5000);}}function MaxRoll(){divTop = Math.abs(parseInt(textDiv.style.top));if(divTop>=0 && divTop<textDatH-40){minTime = setInterval(MinRoll,1);}else{textDiv.style.top = 0;divTop = 0;newTop=0;MaxRoll();}}