JavaScript实现图片的放大缩小及拖拽功能示例

来源：动视网责编：小采时间：2020-11-27 21:56:56

JavaScript实现图片的放大缩小及拖拽功能示例

JavaScript实现图片的放大缩小及拖拽功能示例:本文实例讲述了JavaScript实现图片的放大缩小及拖拽功能。分享给大家供大家参考，具体如下：实现效果如下：实现代码： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <

推荐度：

点击下载本文 文档为doc格式

导读JavaScript实现图片的放大缩小及拖拽功能示例:本文实例讲述了JavaScript实现图片的放大缩小及拖拽功能。分享给大家供大家参考，具体如下：实现效果如下：实现代码： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <

本文实例讲述了JavaScript实现图片的放大缩小及拖拽功能。分享给大家供大家参考，具体如下：

实现效果如下：

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 div{width:400px;height:400px;overflow:hidden;position:relative;border:1px solid #000;}
 div img{position:absolute;height:100%;width:auto;cursor:move;}
 </style>
</head>
<body>
<div id="div" onmousewheel="return bbimg(this)"><img id="img" border="0" src="img/zs.jpg" /></div>
<script language="javascript">
 var params = {
 zoomVal:1,
 left: 0,
 top: 0,
 currentX: 0,
 currentY: 0,
 flag: false
 };
 //图片缩放
 function bbimg(o){
 var o=o.getElementsByTagName("img")[0];
 params.zoomVal+=event.wheelDelta/1200;
 if (params.zoomVal >= 0.2) {
 o.style.transform="scale("+params.zoomVal+")";
 } else {
 params.zoomVal=0.2;
 o.style.transform="scale("+params.zoomVal+")";
 return false;
 }
 }
 //获取相关CSS属性
 var getCss = function(o,key){
 return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
 };
 //拖拽的实现
 var startDrag = function(bar, target, callback){
 if(getCss(target, "left") !== "auto"){
 params.left = getCss(target, "left");
 }
 if(getCss(target, "top") !== "auto"){
 params.top = getCss(target, "top");
 }
 //o是移动对象
 bar.onmousedown = function(event){
 params.flag = true;
 if(!event){
 event = window.event;
 //防止IE文字选中
 bar.onselectstart = function(){
 return false;
 }
 }
 var e = event;
 params.currentX = e.clientX;
 params.currentY = e.clientY;
 };
 document.onmouseup = function(){
 params.flag = false;
 if(getCss(target, "left") !== "auto"){
 params.left = getCss(target, "left");
 }
 if(getCss(target, "top") !== "auto"){
 params.top = getCss(target, "top");
 }
 };
 document.onmousemove = function(event){
 var e = event ? event: window.event;
 if(params.flag){
 var nowX = e.clientX, nowY = e.clientY;
 var disX = nowX - params.currentX, disY = nowY - params.currentY;
 target.style.left = parseInt(params.left) + disX+ "px";
 target.style.top = parseInt(params.top) + disY+ "px";
 if (typeof callback == "function") {
 callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
 }
 if (event.preventDefault) {
 event.preventDefault();
 }
 return false;
 }
 }
 };
 startDrag(document.getElementById("img"),document.getElementById("img"))
</script>
</body>
</html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JavaScript实现图片的放大缩小及拖拽功能示例

推荐度：

点击下载本文 文档为doc格式

标签：图片功能实现

热门焦点

JavaScript实现图片的放大缩小及拖拽功能示例

JavaScript实现图片的放大缩小及拖拽功能示例

JavaScript实现图片的放大缩小及拖拽功能示例

最新推荐

猜你喜欢

热门推荐