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 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
JS常用表单验证方法总结
May 22 Javascript
理解javascript正则表达式
Mar 08 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
JavaScript实现Excel表格效果
Feb 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
php+oracle 分页类
2006/10/09 PHP
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
node.js实现端口转发
2016/04/14 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
Vue 去除路径中的#号
2018/04/19 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
python实现彩票系统
2020/06/28 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
C面试题
2015/10/08 面试题
广州迈达威.net面试题目
2012/03/10 面试题
三年级学生评语
2014/04/23 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
导游词之昭君岛
2020/01/17 职场文书