鼠标拖动图片，实在是拖不动了，请求支援

本帖最后由 bing475879749 于 2012-05-13 20:18:36 编辑

解决方案 »

  1.   

    <!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');
    return false;    }
    }
    for(i=0;i<ig.length;i++){
        (function(n){
            ig[n].onmousedown = function(e){            ig[n].setAttribute('IsMove', 'false');
                return Move(ig[n], e);
            }
            ig[n].onclick = function(){
                if(this.getAttribute('IsMove') == 'true'){                
                    return false;
                }
            }
        })(i)
    }
    </script>
    </body>
    </html>