Jquery 图片随鼠标横向滚动
图片滚动代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
div.scrollMenu{
width:500px;
height:120px;
overflow: hidden;
border:1px solid red;
}
ul.scrollMenu{
list-style-type: none;
width:1280px;
height:100px;
margin:0;
}
.scrollMenu li{
float:left;
width:70px;
margin-top:30px;
text-align:center;
padding: 0 0 20px 20px;
}
.scrollMenu img{
text-align:center;
display: block;
}
.scrollMenu span{
display: block;
font-weight:bold;
}
</style>
<script language="javascript" src="jquery-1.6.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
var div = $("div.scrollMenu"),
ul = $("ul.scrollMenu");
div.mousemove(function(e){
var left = (e.pageX - div.offset().left)*(div.width()-ul.width())/div.width();
$("#show").html(-left);
div.scrollLeft(-left);
});
});
</SCRIPT>
</HEAD>
<BODY>
<div class="scrollMenu" title="图片横向滚动">
<ul class="scrollMenu">
<li><img src="Add.png"/><span> </span></li>
<li><img src="Address_Book.png"><span> </span></li>
<li><img src="Alert.png"><span> </span></li>
<li><img src="Announcement.png"><span> </span></li>
<li><img src="Back.png"><span> </span></li>
<li><img src="Bin_Empty.png"><span> </span></li>
<li><img src="Bin_Full.png"><span> </span></li>
<li><img src="Box.png"><span> </span></li>
<li><img src="Burn.png"><span> </span></li>
<li><img src="Calender.png"><span> </span></li>
<li><img src="CD.png"><span> </span></li>
<li><img src="Chat.png"><span> </span></li>
<li><img src="Clock.png"><span> </span></li>
<li><img src="Close.png"><span> </span></li>
<li><img src="Computer.png"><span> </span></li>
<li><img src="Contact.png"><span> </span></li>
<li><img src="Database.png"><span> </span></li>
<li><img src="Delete.png"><span> </span></li>
</ul>
</div>
<div id="show"></div>
</BODY>
</HTML>