如何实现在IE内一张尺寸超过IE窗口的图片,鼠标在图上可以拖动图片查看,相当于IE滚动条功能。 如何实现在IE内一张尺寸超过IE窗口的图片,鼠标在图上可以拖动图片查看,相当于IE滚动条功能。 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 在主页面上包含一个<iframe src="imghtml.html">imghtml.html中<img scr="test.jpg" width ='2000' heigth='3000'即可 是不是这样的?<!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=utf-8" /><title>无标题文档</title><style type="text/css">html, body{ margin:0px; padding:0px;}#container{ overflow:hidden; position:relative;}#img { display:none; position:absolute; cursor:move;}</style><script type="text/javascript">function $(id){ return document.getElementById(id);}window.onload = function(){ var con = $("container"), img = $("img"), x, y , isMove = false; var width = document.body.clientWidth || document.documentElement.clientWidth, height = document.body.clientHeight || document.documentElement.clientHeight; con.style.width = width+ "px"; con.style.height = height + "px"; img.style.display = "block"; img.style.left = "0px"; img.style.top = "0px"; img.onmousedown = function(oEvent){ isMove = true; oEvent = oEvent || window.event; document.all && img.setCapture(); x = oEvent.clientX; y = oEvent.clientY; }; img.onmousemove = function(oEvent){ if(!isMove) return; oEvent = oEvent || window.event; var mx = parseInt(img.style.left) + oEvent.clientX - x; var my = parseInt(img.style.top) + oEvent.clientY - y; mx = Math.max(Math.min(0, mx), width - img.width); my = Math.max(Math.min(0, my), height - img.height); img.style.left = mx + "px"; img.style.top = my + "px"; x = oEvent.clientX; y = oEvent.clientY; document.title = mx + " " + my; }; img.onmouseup = function(){ isMove = false; document.all && img.releaseCapture(); };};</script></head><body><div id="container"> <img id="img" src="http://travel.dahangzhou.com/fengjing/347/pics/20071025164439994.jpg" /></div></body></html> document.all && img.setCapture();这句中的document.all &&是做什么用的? img.onmousedown = function(oEvent){这里为什么还会有个oEvent?看MSDN上面似乎没有这个参数,而且貌似也是多余的。莫非是兼容其他浏览器用的? 啊.有点问题.Firefox下一片空白 终于想出来了。麻辣隔壁的,原来document.all && img.setCapture();也是兼容浏览器的。查了查setCapture,原来是IE Only,在js中&&前面的条件为false的话是不会执行后面的条件语句的,例如:alert(true && alert(1) );把true换成false后就只执行一次alert(false);而在true下时会弹出两次。狗日的浏览器,狗日的W3C.祝Microsoft千秋万载,一统糨糊! 一个很简单的问题~~ 麻烦各位啦~~~· 立马结贴!!!!!!!!! 单击网页元素,得到它的ID并显示出来,怎样实现? 关于函数控制多图层隐藏显现的问题~ Jquery制作树形菜单 关于宝丽通播放器 JavaScript在这个软件调试得吗? JS函数不能调用,怎么回事? 该JS代码,为何在IE下正常,在FF没有任何反应,也没有错误提示 我想实现的功能是等用户在某页停留1分钟后,把他的ip地址等信息录入到数据库中!否则不执行录入~用Ajax实现(见下面) 怎么实现如下密码复杂性要求? 请问校内或开心网的新提醒功能是怎么做的 问个查看网页js源码的问题
<img scr="test.jpg" width ='2000' heigth='3000'
即可
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
html, body{
margin:0px; padding:0px;
}
#container{
overflow:hidden; position:relative;
}
#img {
display:none; position:absolute; cursor:move;
}
</style>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
window.onload = function(){
var con = $("container"), img = $("img"), x, y , isMove = false;
var width = document.body.clientWidth || document.documentElement.clientWidth,
height = document.body.clientHeight || document.documentElement.clientHeight;
con.style.width = width+ "px";
con.style.height = height + "px";
img.style.display = "block";
img.style.left = "0px";
img.style.top = "0px";
img.onmousedown = function(oEvent){
isMove = true;
oEvent = oEvent || window.event;
document.all && img.setCapture();
x = oEvent.clientX;
y = oEvent.clientY;
};
img.onmousemove = function(oEvent){
if(!isMove) return;
oEvent = oEvent || window.event;
var mx = parseInt(img.style.left) + oEvent.clientX - x;
var my = parseInt(img.style.top) + oEvent.clientY - y;
mx = Math.max(Math.min(0, mx), width - img.width);
my = Math.max(Math.min(0, my), height - img.height);
img.style.left = mx + "px";
img.style.top = my + "px";
x = oEvent.clientX;
y = oEvent.clientY;
document.title = mx + " " + my;
};
img.onmouseup = function(){
isMove = false;
document.all && img.releaseCapture();
};
};
</script>
</head>
<body>
<div id="container">
<img id="img" src="http://travel.dahangzhou.com/fengjing/347/pics/20071025164439994.jpg" />
</div>
</body>
</html>
这句中的document.all &&是做什么用的?
这里为什么还会有个oEvent?
看MSDN上面似乎没有这个参数,而且貌似也是多余的。
莫非是兼容其他浏览器用的?
麻辣隔壁的,原来document.all && img.setCapture();也是兼容浏览器的。
查了查setCapture,原来是IE Only,在js中&&前面的条件为false的话是不会执行后面的条件语句的,例如:
alert(true && alert(1) );
把true换成false后就只执行一次alert(false);而在true下时会弹出两次。狗日的浏览器,狗日的W3C.
祝Microsoft千秋万载,一统糨糊!