JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】

Miki ·

更新时间:2024-09-20

· 563 次阅读

本文实例讲述了JS实现放大、缩小及拖拽图片的方法。分享给大家供大家参考，具体如下：


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;
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

方法 js实现图片火狐 ie js

1024 个赞