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百度地图放大缩小拖拽查看效果 js百度地图放大缩小拖拽查看效果
WPF 鼠标拖动图片放大缩小 添加图片->然后选择添加的图片->鼠标进行放大缩小->属性面板值变更
js实现图片在div内滚轮放大缩小拖动,有滚动条,双击回原状,无插件,赠送网上搜罗的其他的一些图片放大缩小文件,在每个压缩包是一个,打开压缩包里的网页文件就可以看效果。本人的在“自己的.html”里,记事本打开...
vue实现放大缩小拖拽功能 本文实例为大家分享了vue实现放大缩小拖拽功能的具体代码,供大家参考,具体内容如下 点击放大至全屏 再次点击缩小至原始 这个弹框是基于element dialog的基础上写的 1.再utils文件夹...
基于vue 图片拖拽放大缩小查看npm包
使用hammer.js 可以手势控制同时进行旋转 拖拽 放大缩小功能, 解决官网移动旋转复位效果, 重点解决官网旋转rotate demo旋转乱跳bug 官网:http://hammerjs.github.io/ (官网的demo真是坑 又是复位又是旋转抖动的....
js实现地图效果,实现地图拖拽、大小缩放,地图放大,地图缩小,地图拖动
根据网上找的代码修改后的成品,实现了图片的方法,缩小,旋转,拖动查看等功能
打开html可直接查看例子,例子中图片url写死的,是一个网络图片,如果该图片不见了可直接更改那个地址。 完全是自己写的滚动和拖动行为
本文实例讲述了JS实现放大、缩小及拖拽图片的方法。分享给大家供大家参考,具体如下: var divId; var v_left; var v_top; [removed]=function(){ divId = document.getElementById(block1); var height1 = images1...
1、图片在指定区域显示、采用刷图方式、可以随指针拖动、放大 缩小、 2、文件路径是通过参数传递的 3、程序中SHOW按钮显示图片 BT1 BT2 没有很好的代码效果 测试使用 4、Imageshow.h和CPP 可以再其他工程中直接使用...
实现SVG图片的Pan and Zoom 功能
原生js支持拖动放大缩小图片截图代码 原生js支持拖动放大缩小图片截图代码 原生js支持拖动放大缩小图片截图代码 原生js支持拖动放大缩小图片截图代码
JS查看图片放大缩小拖动插件 ,可以怼图片进行放大查看,缩小查看,以及在范围内拖动
这是一个 Android 自定义 地图控件,可以两根手指 拉伸放大 缩小 拖动, 在指定坐标 加点 加线
一屏显示横向三个图片,选中图片放大,中间图片伏在左右图片上方,图片放大缩小,拖动,多点触控等手势
MsChart 实现 放大 缩小 拖拽等效果 MsChart 实现 放大 缩小 拖拽等效果 MsChart 实现 放大 缩小 拖拽等效果 欢迎交流 qq:574311505
安卓app开发项目-控件以及双指放大缩小图片、单指拖动图片(源码).zip安卓app开发项目-控件以及双指放大缩小图片、单指拖动图片(源码).zip安卓app开发项目-控件以及双指放大缩小图片、单指拖动图片(源码).zip安卓app...
C#联合halcon,使用halcon控件实现通过鼠标放大缩小图片,拖拽图片。