js跑马灯成效
日期：2014-05-16 浏览次数：20377 次
js跑马灯效果
开始自己也写了个跑马灯 但是那效果不太好 过度不够平滑 以下是网上找的一个例子效果挺不错的
1.js
2.css
3.html
开始自己也写了个跑马灯 但是那效果不太好 过度不够平滑 以下是网上找的一个例子效果挺不错的
1.js
<script type="text/javascript" language="Javascript">
var scrlSpeed=1
// decreasing speed for mozilla
scrlSpeed=(document.all)? scrlSpeed : Math.max(1, scrlSpeed-1)
function initScroll(container,object){
if (document.getElementById(container) != null){
var contObj=document.getElementById(container);
var obj=document.getElementById(object);
contObj.style.visibility = "visible";
contObj.scrlSpeed = scrlSpeed;
widthContainer = contObj.offsetWidth;
obj.style.left=parseInt(widthContainer)+"px";
widthObject=obj.offsetWidth;
interval=setInterval("objScroll('"+ container +"','"+ object +"',"+ widthContainer +")",20);
contObj.onmouseover = function(){
contObj.scrlSpeed=0;
}
contObj.onmouseout = function(){
contObj.scrlSpeed=scrlSpeed;
}
}
}
function objScroll(container,object,widthContainer){
var contObj=document.getElementById(container);
var obj=document.getElementById(object);
widthObject=obj.offsetWidth;
if (parseInt(obj.style.left)>(widthObject*(-1))){
obj.style.left=parseInt(obj.style.left)-contObj.scrlSpeed+"px";
} else {
obj.style.left=parseInt(widthContainer)+"px";
}
}
// on page load we initiate scrolling
window.onload=function(){
initScroll("scrlContainer", "scrlContent");
}
</script>
2.css
<style type="text/css">
body{
margin:0;
padding:0;
background:#fff;
font: 70% Arial, Helvetica, sans-serif;
}
#scrlContainer{
visibility:hidden;
background:#f1f1f1;
position:relative;
overflow:hidden;
width:250px;
height:20px;
line-height:20px;
margin:1em;
}
#scrlContent{
position:absolute;
left:0;
top:0;
white-space:nowrap;
}
</style>
3.html
<html>
<body>
<div id="scrlContainer">
<div id="scrlContent">Some very, very useful information will
appear here, yet it will move around your screen so it will be hard to
read it. But the client wants it, so here it is. </div>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
