<SCRIPT>
var dir=1;//每步移动像素，大＝快
var speed=10;//循环周期（毫秒）大＝慢
var MyMar=null;
function Marquee(){//正常移动
var demo = document.getElementById("demo");
var demo2 = document.getElementById("demo2");
if (dir>0 && (demo2.offsetWidth-demo.scrollLeft)<=0)
{
demo.scrollLeft=0;
}
if (dir<0 &&(demo.scrollLeft<=0))
{
demo.scrollLeft=demo2.offsetWidth;
}
demo.scrollLeft+=dir;
}
function onmouseoverMy() {
window.clearInterval(MyMar);
}//暂停移动
function onmouseoutMy() {
MyMar=setInterval(Marquee,speed);
}//继续移动
function r_left()
{
if (dir==-1)
dir=1;
}//换向左移
function r_right()
{
if (dir==1)
dir=-1;
}//换向右移
function IsIE()
{
var browser=navigator.appName
if ((browser=="Netscape"))
{
return false;
}
else if(browser=="Microsoft Internet Explorer")
{
return true;
}
else
{
return null;
}
}
var _IsIE = IsIE();
var _MousePX = 0;
var _MousePY = 0;
var _DivLeft = 0;
var _DivRight = 0;
var _AllDivWidth = 0;
var _AllDivHeight = 0;
function MoveDiv(e){
var obj = document.getElementById("demo");
_MousePX = _IsIE ? (document.body.scrollLeft + event.clientX) : e.pageX;
_MousePY = _IsIE ? (document.body.scrollTop + event.clientY) : e.pageY;
//Opera Browser Can Support ''window.event'' and ''e.pageX''
var obj1 = null;
if(obj.getBoundingClientRect)
{
//IE
obj1 = document.getElementById("demo").getBoundingClientRect();
_DivLeft = obj1.left;
_DivRight = obj1.right;
_AllDivWidth = _DivRight - _DivLeft;
}
else if(document.getBoxObjectFor)
{
//FireFox
obj1 = document.getBoxObjectFor(obj);
var borderwidth = (obj.style.borderLeftWidth != null && obj.style.borderLeftWidth != "") ? parseInt(obj.style.borderLeftWidth) : 0;
_DivLeft = parseInt(obj1.x) - parseInt(borderwidth);
_AllDivWidth = Cut_Px(obj.style.width);
_DivRight = _DivLeft + _AllDivWidth;
}
else
{
//Other Browser(Opera)
_DivLeft = obj.offsetLeft;
_AllDivWidth = Cut_Px(obj.style.width);
var parent = obj.offsetParent;
if(parent != obj)
{
while (parent) {
_DivLeft += parent.offsetLeft;
parent = parent.offsetParent;
}
}
_DivRight = _DivLeft + _AllDivWidth;
}
var pos1,pos2;
pos1 = parseInt(_AllDivWidth * 0.4) + _DivLeft;
pos2 = parseInt(_AllDivWidth * 0.6) + _DivLeft;
if(_MousePX > _DivLeft && _MousePX < _DivRight)
{
if(_MousePX > _DivLeft && _MousePX < pos1)//Move left
{
r_left();
}
else if(_MousePX < _DivRight && _MousePX > pos2)//Move right
{
r_right();
}
if(_MousePX > pos1 && _MousePX < pos2)//Stop
{
onmouseoverMy();
MyMar=null;
}else if(_MousePX < pos1 || _MousePX > pos2)
{
if(MyMar==null)
{
MyMar=setInterval(Marquee,speed);
}
}
}
}
function Cut_Px(cswidth)
{
cswidth = cswidth.toLowerCase();
if(cswidth.indexOf("px") != -1)
{
cswidth.replace("px","");
cswidth = parseInt(cswidth);
}
return cswidth;
}
function MoveOutDiv()
{
if(MyMar == null)
{
MyMar=setInterval(Marquee,speed);
}
}
</SCRIPT>
<div style="width:100%;text-align:left">
<DIV id="demo" style="OVERFLOW: hidden; WIDTH: 500px; COLOR: #ffffff; HEIGHT: 100px" onmousemove="MoveDiv(event);" onmouseout="MoveOutDiv();">
<div id="demo1" style="width:100%;">
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR vAlign=top>
<TD vAlign=top noWrap>
<DIV align=right>
<img src="membership_seminar.jpg"> <img src="pwpsoftcover.jpg"> <img src="rhemacards.jpg"> <img src="traks_classes.jpg"> <img src="citycompschool.jpg"> <img src="citykidssite.jpg"> <img src="gc-general.jpg"> <img src="groups.jpg">
</DIV></TD></TR></TBODY></TABLE></TD>
<TD width="0">
<div id="demo2" style="width:100%;"></div>
</TD>
</TR></TBODY></TABLE>
</DIV>
</div><script type="text/javascript">
document.getElementById("demo2").innerHTML = document.getElementById("demo1").innerHTML;
MyMar=setInterval(Marquee,speed);
</script>
图片不断循环滚动的js特效
1星 需积分: 16 81 浏览量
2012-07-25
23:42:37
上传
评论
收藏 92KB RAR 举报 
图片不断向左循环滚动js特效代码.rar （10个子文件） 
图片不断向左循环滚动js特效代码 js 
rhemacards.jpg 7KB membership_seminar.jpg 7KB
index.html 4KB traks_classes.jpg 5KB gc-general.jpg 10KB citycompschool.jpg 7KB groups.jpg 8KB citykidssite.jpg 12KB pwpsoftcover.jpg 6KB
Thumbs.db 36KB
评论1
最新资源