首页 新闻 会员 周边

如何使用JS在小范围内清晰显示大图片,要求可缩放,可拖拽。像看地图一样

0
悬赏园豆:100 [待解决问题]

如何使用JS在小范围内清晰显示大图片,要求可缩放,可拖拽

醉今生的主页 醉今生 | 初学一级 | 园豆:23
提问于:2012-05-30 09:20
< >
分享
所有回答(1)
0

var divId; 
var v_left; 
var v_top; 
window.onload=function(){ 
divId = document.getElementById("block1"); 
var height1 = images1.height;//图片的高度 
var width1 = images1.width;//图片的宽度 
v_left=(document.body.clientWidth-width1)/2; 
v_top=(document.body.clientHeight-height1)/2; 
divId.style.left=v_left; 
divId.style.top=v_top; 


drag = 0; 
move = 0; 
// 拖拽对象 
var ie = document.all; 
var nn6 = document.getElementById && !document.all; 
var isdrag = false; 
var y, x; 
var oDragObj; 
function moveMouse(e) { 
if (isdrag) { 
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px"; 
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px"; 
return false; 


// 拖拽方法 
function initDrag(e) { 
var oDragHandle = nn6 ? e.target : event.srcElement; 
var topElement = "HTML"; 
while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") { 
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement; 

if (oDragHandle.className == "dragAble") { 
isdrag = true; 
oDragObj = oDragHandle; 
nTY = parseInt(oDragObj.style.top + 0); 
y = nn6 ? e.clientY : event.clientY; 
nTX = parseInt(oDragObj.style.left + 0); 
x = nn6 ? e.clientX : event.clientX; 
document.onmousemove = moveMouse; 
//document.onmouseup=MUp;// 事件会在鼠标按键被松开时发生 
return false; 


document.onmousedown = initDrag; 
document.onmouseup = new Function("isdrag=false"); 
//上下左右移动 
function clickMove(s) { 
if (s == "up") { 
dragObj.style.top = parseInt(dragObj.style.top) + 100; 
} else { 
if (s == "down") { 
dragObj.style.top = parseInt(dragObj.style.top) - 100; 
} else { 
if (s == "left") { 
dragObj.style.left = parseInt(dragObj.style.left) + 100; 
} else { 
if (s == "right") { 
dragObj.style.left = parseInt(dragObj.style.left) - 100; 





//缩小倍数 
function smallit() { 
//将图片缩小,失去热点 
height1 = images1.height; 
width1 = images1.width; 
images1.height = height1 / 1.1; 
images1.width = width1 / 1.1; 

//放大倍数 
function bigit() { 
/*//将图片放大,不失热点 
var zoom = parseInt(images1.style.zoom, 10) || 100; 
zoom += event.wheelDelta / 12; 
if (zoom > 0) { 
images1.style.zoom = (zoom+10) + "%"; 
}*/ 
//将图片放大,失去热点 
height1 = images1.height; 
width1 = images1.width; 
images1.height = height1 * 1.1; 
images1.width = width1 * 1.1; 

//还原 
function realsize() { 
images1.style.zoom=100+"%"; 
images1.height = images2.height; 
images1.width = images2.width; 
divId.style.left=v_left; 
divId.style.top=v_top; 

function featsize() { 
var width1 = images2.width; 
var height1 = images2.height; 
var width2 = 360; 
var height2 = 200; 
var h = height1 / height2; 
var w = width1 / width2; 
if (height1 < height2 && width1 < width2) { 
images1.height = height1; 
images1.width = width1; 
} else { 
if (h > w) { 
images1.height = height2; 
images1.width = width1 * height2 / height1; 
} else { 
images1.width = width2; 
images1.height = height1 * width2 / width1; 


block1.style.left = 0; 
block1.style.top = 0; 

//鼠标滚轮放大缩小 
function bbimg(o) { 
/*var eleLeft; 
var eleTop; 
if(document.documentElement){ 
eleLeft = document.documentElement.scrollLeft; 
eleTop = document.documentElement.scrollTop; 

else{ 
eleLeft = document.body.scrollLeft; 
eleTop = document.body.scrollTop; 


v_left+=eleLeft; 
v_top+=eleTop; 
//divId.style.left=v_left; 
//divId.style.top=v_top; 
alert(document.documentElement.scrollTop +"----xxx"+document.body.scrollTop+window.pageyoffset);*/ 
var zoom = parseInt(o.style.zoom, 10) || 100; 
zoom += event.wheelDelta / 12; 
if (zoom > 0) { 
o.style.zoom = zoom + "%"; 


return false; 
}

┢┦偉 | 园豆:1240 (小虾三级) | 2012-05-30 09:38

楼上回答看似很强大  能不能给个在页面里的例子让我测试下效果

我要做的是类似地图效果的那种,拖拽,缩放

支持(0) 反对(0) 醉今生 | 园豆:23 (初学一级) | 2012-05-30 11:58

求救啊

支持(0) 反对(0) 醉今生 | 园豆:23 (初学一级) | 2012-06-05 09:43
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册