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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 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
mysql 字段类型说明
2007/04/27 PHP
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
js 编程笔记 无名函数
2011/06/28 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
Python读写文件方法总结
2015/06/09 Python
Python制作动态字符图的实例
2019/01/27 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
python selenium xpath定位操作
2020/09/01 Python
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
妇产医师自荐信
2014/01/29 职场文书
企业申诉管理制度
2014/01/30 职场文书
国际金融专业自荐信
2014/07/05 职场文书
高中生学习计划书
2014/09/15 职场文书
交通事故协议书范本
2014/11/18 职场文书
活着观后感
2015/06/03 职场文书
高中运动会前导词
2015/07/20 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
2019个人工作总结
2019/06/21 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL