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 相关文章推荐
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 Javascript
javascript 数组的方法集合
Jun 05 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
vue的全局提示框组件实例代码
Feb 26 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
axios如何取消重复无用的请求详解
Dec 15 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模拟js函数unescape的函数代码
2012/10/20 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
js返回顶部实例分享
2016/12/21 Javascript
Node.js的特点详解
2017/02/03 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
python变量命名的7条建议
2019/07/04 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
通过Python实现一个简单的html页面
2020/05/16 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
python 两种方法删除空文件夹
2020/09/29 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
银行简历自我评价
2014/02/11 职场文书
贺卡寄语大全
2014/04/11 职场文书
还款承诺书范文
2014/05/20 职场文书
酒店节能减排方案
2014/05/26 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
新郎新娘答谢词
2015/01/04 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL