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


Posted in Javascript onAugust 23, 2016

本文实例讲述了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 相关文章推荐
jquery 多级下拉菜单核心代码
May 21 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
详解javascript数组去重问题
Nov 06 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
如何手动实现es5中的bind方法详解
Dec 07 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 #Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 #Javascript
js简单获取表单中单选按钮值的方法
Aug 23 #Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 #Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 #Javascript
JavaScript DOM节点操作方法总结
Aug 23 #Javascript
EasyUI创建对话框的两种方式
Aug 23 #Javascript
You might like
一个多文件上传的例子(原创)
2006/10/09 PHP
php目录拷贝实现方法
2015/07/10 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
js 上传图片预览问题
2010/12/06 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
Django视图和URL配置详解
2018/01/31 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
Python numpy数组转置与轴变换
2019/11/15 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
Python 日期与时间转换的方法
2020/08/01 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
企业承诺书格式
2014/05/21 职场文书
主题班会演讲稿
2014/05/22 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python