日期:2014-05-16  浏览次数:20506 次

鼠标拖动图片,实在是拖不动了,请求支援
本来是想模仿这个效果自己弄个出来,但不要自动滚动
http://www.popub.net/script/example.asp?id=16
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖动</title>
<style type="text/css">
*{ margin:0; padding:0;}
html,body{ height:100%; width:100%; font-size:12px;}
#picrun{ position:absolute; top:10px; height:100px; left:100px; width:500px; overflow:hidden;}
#picrun li{ list-style:none; float:left; margin-left:12px; text-align:center; background:#FFF; width:100px;}
#picrun img{ width:100px; height:60px; border:none;display:block; padding-bottom:3px;}
</style>
</head>

<body>
<div id="container">

</div>
<div id="picrun">
    <ul id="li_img">
        <li><a href=""><img src="http://www.baidu.com/img/513_01d1df20e56f282ab5104866d0a718de.gif" /></a>1这里哪个厅</li>
        <li><a href=""><img src="http://www.baidu.com/img/513_01d1df20e56f282ab5104866d0a718de.gif" /></a>2哪个厅这个</li>
        <li><a href="http://www.baidu.com"><img src="http://www.baidu.com/img/513_01d1df20e56f282ab5104866d0a718de.gif" /></a>3这里哪个厅</li>
        <li><a href=""><img src="http://www.baidu.com/img/513_01d1df20e56f282ab5104866d0a718de.gif" /></a>4哪个厅这个</li>
        <li><a href=""><img src="http://www.baidu.com/img/513_01d1df20e56f282ab5104866d0a718de.gif" /></a>5这里哪个厅</li>
        <li><a href=""><img src="http://www.baidu.com/img/513_01d1df20e56f282ab5104866d0a718de.gif" /></a>6哪个厅这个</li>
        <li><a href=""><img src="http://www.baidu.com/img/513_01d1df20e56f282ab5104866d0a718de.gif" /></a>7这里哪个厅</li>
        <li><a href=""><img src="http://www.baidu.com/img/513_01d1df20e56f282ab5104866d0a718de.gif" /></a>8哪个厅这个</li>
        <li><a href=""><img src="http://www.baidu.com/img/513_01d1df20e56f282ab5104866d0a718de.gif" /></a>这里哪个厅</li>
        <li><a href=""><img src="http://www.baidu.com/img/513_01d1df20e56f282ab5104866d0a718de.gif" /></a>哪个厅这个</li>
        <li><a href=""><img src="http://www.baidu.com/img/513_01d1df20e56f282ab5104866d0a718de.gif" /></a>这里哪个厅</li>
    </ul>
</div>
<script type="text/javascript">
var picrun=document.getElementById("picrun");
var li_img=document.getElementById("li_img");
var li=li_img.getElementsByTagName("li");
var ig=li_img.getElementsByTagName("img");
var li_w=li[0].clientWidth+12;
li_img.style.width=li_w*li.length+"px";
function Move(o, e){
    var e = window.event || e;
    var _sx = e.clientX;
    var _xx = picrun.scrollLeft;
    document.onmouseup = function(){
            this.onmousemove = null;
    }
    if(e.preventDefault){
            e.preventDefault();
    }
    document.onmousemove = function(e){
            var e = window.event || e;
            if(document.all && e.button == 0){
                    this.onmousemove = null;
                    return false;
            };
            picrun.scrollLeft =_xx - e.clientX + _sx;
            o.setAttribute('IsMove', 'true');
    }
}
for