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 autocomplete插件修改
Apr 17 Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
浅谈node.js中间件有哪些类型
Apr 29 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基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
php数据序列化测试实例详解
2017/08/12 PHP
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
学习Node.js模块机制
2016/10/17 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
详解Layer弹出层样式
2017/08/21 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
python操作MongoDB基础知识
2013/11/01 Python
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python中方法链的使用方法
2016/02/23 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
python调用百度语音REST API
2018/08/30 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
python随机模块random使用方法详解
2020/02/14 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
keras.layer.input()用法说明
2020/06/16 Python
浅析Python迭代器的高级用法
2020/07/16 Python
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
生产部经理岗位职责
2013/12/16 职场文书
会计系个人求职信范文分享
2013/12/20 职场文书
学生评语大全
2014/04/18 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
vue实现列表垂直无缝滚动
2022/04/08 Vue.js