鼠标拖动图片,实在是拖不动了,请求支援 本帖最后由 bing475879749 于 2012-05-13 20:18:36 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!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> js jQuery 事件绑定问题 关于google地图api解析限制的问题 javascript递归的疑惑 请教自动增行中对自动行如何删除 又是兼容性惹的> 蛙蛙请教:怎样设置一个窗口的名字呀,请教一下 如何判断一个页面中的单选框或复选框至少有一项被选中时候,按钮才可以按,否则按钮失效(disabled) 高分求解一个简单问题 ☆暂别Web版面,散尽可用分!☆ 为什么我这样写不行? javascript如何访问子ul标签 基于Jquery的焦点图切换源码分析
<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>