前段时间在项目中需要用到一个图片平滑滚动的效果，因为要涉及到多种浏览器到兼容，所以考虑到用JQUERY来做，在网上找了几个插件，都不理想，不是太繁琐就是实现效果不好。后来看到有一段比较简单的JS写的平滑滚动，代码效率不错，就试着用JQUERY改写了，发现效果还不错，代码如下：
代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<div id="advScroll" class="adv"><table cellpadding="0" cellspacing="0" border="0">
<tr><td id="demo1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><a href=""><img alt="" src="../Imames/aaa.jpg" style="border:solid 1x #fee8d8;"></a></td><td><a href=""><img alt="" src="../Imames/bbb.jpg" style="border:solid 1x #fee8d8;"></a></td><td><a href=""><img alt="" src="../Imames/ccc.jpg" style="border:solid 1x #fee8d8;"></a></td><td><a href=""><img alt="" src="../Imames/ddd.jpg" style="border:solid 1x #fee8d8;"></a></td><td><a href=""><img alt="" src="../Imames/eee.jpg" style="border:solid 1x #fee8d8;"></a></td></tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var speed = 1//速度数值越大速度越慢
$("#demo2").html($("#demo1").html()) ;
function Marquee() {
if ($("#advScroll").scrollLeft() <= 0)
$("#advScroll").scrollLeft($("#advScroll").scrollLeft() + $("#demo2").width());
else {
$("#advScroll").scrollLeft($("#advScroll").scrollLeft()-1);
}
}
var MyMar = setInterval(Marquee, speed)
$("#advScroll").bind("mouseover", function() { clearInterval(MyMar); });
$("#advScroll").bind("mouseout", function() { MyMar = setInterval(Marquee, speed); });
</script>
</body>
</html>
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<div id="advScroll" class="adv"><table cellpadding="0" cellspacing="0" border="0">
<tr><td id="demo1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><a href=""><img alt="" src="../Imames/aaa.jpg" style="border:solid 1x #fee8d8;"></a></td><td><a href=""><img alt="" src="../Imames/bbb.jpg" style="border:solid 1x #fee8d8;"></a></td><td><a href=""><img alt="" src="../Imames/ccc.jpg" style="border:solid 1x #fee8d8;"></a></td><td><a href=""><img alt="" src="../Imames/ddd.jpg" style="border:solid 1x #fee8d8;"></a></td><td><a href=""><img alt="" src="../Imames/eee.jpg" style="border:solid 1x #fee8d8;"></a></td></tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var speed = 1//速度数值越大速度越慢
$("#demo2").html($("#demo1").html()) ;
function Marquee() {
if ($("#advScroll").scrollLeft() <= 0)
$("#advScroll").scrollLeft($("#advScroll").scrollLeft() + $("#demo2").width());
else {
$("#advScroll").scrollLeft($("#advScroll").scrollLeft()-1);
}
}
var MyMar = setInterval(Marquee, speed)
$("#advScroll").bind("mouseover", function() { clearInterval(MyMar); });
$("#advScroll").bind("mouseout", function() { MyMar = setInterval(Marquee, speed); });
</script>
</body>
</html>