`
xiangqian0505
  • 浏览: 322300 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js放大缩小拖拽图片(兼容IE、火狐)

阅读更多
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;
}
分享到:
评论

相关推荐

    用JS实现和google地图类似的图片查看器-----放大、缩小、移动和还原,都控制在div里,兼容ie,FF

    在本文中,我们将深入探讨如何使用JavaScript(JS)来创建一个类似于Google地图的图片查看器。...通过这些技术的结合,我们可以构建出一个功能强大且用户体验良好的图片查看器,同时兼容IE和Firefox浏览器。

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

    本文实例讲述了JS实现放大、缩小及拖拽图片的方法。分享给大家供大家参考,具体如下: var divId; var v_left; var v_top; [removed]=function(){ divId = document.getElementById(block1); var height1 = images1...

    用JS实现和google地图类似的图片查看器-放大、缩小、移动和还原,都控制在div里,兼容ie,FF

    这个查看器将具备放大、缩小、移动和还原图片的功能,并且能够在浏览器的div元素内运行,同时兼容Internet Explorer(IE)和Firefox等主流浏览器。 ### 1. 基本结构与HTML布局 首先,我们需要创建一个HTML页面,...

    JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动

    - FF兼容:这里指的是兼容Firefox(火狐)浏览器,意味着适用于不同的浏览器环境。 3. 实现技术细节: - JS:即JavaScript,一种广泛应用于网页前端的脚本语言,负责实现网页图片查看器的功能逻辑。 - 兼容性...

    纯JS实现的头像/图片裁剪,支持设置预期尺寸,支持拖动放大缩小,无冗余功能

    4. **浏览器兼容性**:支持IE10及以上的浏览器,满足了大部分用户的使用需求,同时也可以无缝集成到现代浏览器环境,如Chrome、Firefox、Safari等。 5. **框架兼容性**:该工具还支持与Vue等前端框架配合使用,可以...

    jquery+css实现世界地图放大缩小效果

    标题中的“jquery+css实现世界地图放大缩小效果”是指使用JavaScript库jQuery以及CSS样式来创建一个交互式的世界地图,该地图具有缩放和平移功能,同时在鼠标悬停时提供提示信息。这个技术通常用于数据可视化、地理...

    jquery 弹出窗口,可缩放,可拖拽

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的...兼容:IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景。

    jquery(旋转、缩放、拖拽)

    本文将详细解释这些技术及其在兼容IE9+浏览器中的应用。 ### 1. jQuery旋转(Rotate) jQuery本身并不直接提供旋转功能,但通过CSS3的`transform`属性和jQuery的`css()`方法,我们可以轻松实现元素的旋转。例如,...

    Js图片查看

    Firefox(FF)和其他基于Webkit的浏览器(如Chrome、Safari)通常对新特性的支持较好,而Internet Explorer(ie)则可能需要特殊处理。例如,IE9以下版本不支持CSS3的`transform`,此时可能需要借助jQuery或者其他库...

    JS地图查看大全(含四个实例)

    我们将深入探讨如何使用JS来实现地图的交互功能,包括图片的放大、缩小、移动和还原等操作,并且这些功能都是在div容器内完成的,确保了跨浏览器的兼容性,支持Internet Explorer(IE)和Firefox(FF)等主流浏览器...

    Lightbox效果完整示例

    8. **兼容性**:Lightbox JS设计时考虑了跨浏览器兼容性,能在大部分现代浏览器(如Chrome、Firefox、Safari、Edge和IE9及以上版本)中正常运行。 9. **响应式设计**:随着移动设备的普及,Lightbox也支持响应式...

    JavaScript 图片放大镜(可拖放、缩放效果)第1/4页

    JavaScript图片放大镜实现涉及的主要技术点包括拖放功能的实现、元素缩放技术以及图片的切割和预览技术。 首先,拖放功能是Web开发中常见的交互方式。在实现拖放功能时,需要对元素进行拖动操作,并限制其拖动的...

    PhotoLook:仿windows自带的图片查看器,网页版

    支持ie10+,chrome,firefox等主流浏览器(因为使用了FileReader,所以没有兼容低版本ie)。 ps:由于360浏览器禁止了拖拽图片到其他标签页,所以该功能被限制,可以使用其他浏览器体验该功能。另外,初次加载主页时...

    highstock-demo.rar

    10. **跨浏览器兼容性**:Highstock兼容大部分现代浏览器,包括Chrome、Firefox、Safari、Edge和IE9+。 通过“highstock-demo.docx”文档,你可以了解如何配置和使用Highstock,包括如何导入库、设置图表选项、处理...

    JQUBar 基于JQUERY的柱状图插件

    4. **浏览器兼容性**:JQUBar已测试并支持IE7、IE8、Firefox和Chrome等主流浏览器,确保了在多种浏览器环境下都能正常运行。 在HTML代码中,需要一个包含`id="con"`的`div`作为JQUBar的容器,以及用于控制图表行为...

    vml 教程实例教程实例

    - VML主要在Internet Explorer浏览器中得到良好支持,其他现代浏览器如Firefox、Chrome等倾向于使用SVG(Scalable Vector Graphics)作为矢量图形的标准。 - 在非IE浏览器中,可以使用CSS3的`-ms-transform`和`-ms...

Global site tag (gtag.js) - Google Analytics