微客导航 » 文章资讯 » JS滚轮控制图片缩放大小和拖动的实例代码
JS滚轮控制图片缩放大小和拖动的实例代码

2023-09-05 14:22:04 145
具体代码如下所示：




Document





window.onload=function(){
varoImg=document.getElementsByTagName("img")[0];
functionfnWheel(obj,fncc){
obj.onmousewheel=fn;
if(obj.addEventListener){
obj.addEventListener('DOMMouseScroll',fn,false);
}
functionfn(ev){
varoEvent=ev||window.event;
vardown=true;
if(oEvent.detail){
down=oEvent.detail>0
}else{
down=oEvent.wheelDelta<0
}
if(fncc){
fncc.call(this,down,oEvent);
}
if(oEvent.preventDefault){
oEvent.preventDefault();
}
returnfalse;
}
};
fnWheel(oImg,function(down,oEvent){
varoldWidth=this.offsetWidth;
varoldHeight=this.offsetHeight;
varoldLeft=this.offsetLeft;
varoldTop=this.offsetTop;
varscaleX=(oEvent.clientX-oldLeft)/oldWidth;//比例
varscaleY=(oEvent.clientY-oldTop)/oldHeight;
if(down){
this.style.width=this.offsetWidth*0.9+"px";
this.style.height=this.offsetHeight*0.9+"px";
}else{
this.style.width=this.offsetWidth*1.1+"px";
this.style.height=this.offsetHeight*1.1+"px";
}
varnewWidth=this.offsetWidth;
varnewHeight=this.offsetHeight;
this.style.left=oldLeft-scaleX*(newWidth-oldWidth)+"px";
this.style.top=oldTop-scaleY*(newHeight-oldHeight)+"px";
});
}
  
            
                                    上一篇
浅析python的优势和不足之处
                
                                    下一篇
朴素贝叶斯Python实例及解析
                            
            
            
                     
                热门推荐 
                                        1 毛坯房验收经验和常识 看了之后再验房心里有底  
                                        2 二手房收房如何交接 二手房收房注意问题  
                                        3 专业验收毛坯房的价格 商品房验收合格的标准  
                                        4 精装房怎么验收 精装房请验房师有用吗  
                                        5 一般要到哪里找验房师 验房师有哪些作用呢  
                                        6 请人验房一般是多少钱 验房师费用是多少  
                                        7 怎样测量房子面积 建筑面积和使用面积怎么算  
                                        8 收房需要注意什么 仔细检查不松懈  
                                        9 收房时三书一证一表是什么 主要作用介绍  
                                        10 交房时交房税费有哪些 本文为你一一讲解  
                                        11 验房都需要验什么 要做哪些准备呢  
                                        12 毛坯房验房师有必要请吗 毛坯房装修完如何验收  
                                        13 地下室防水工程质量验收规范详解  
                                        14 水性涂料、油性涂料区别介绍  
                                        15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包  
                                        16 三棵树漆怎么样？三棵树漆官方网站  
                                        17 家庭“装修套餐”中猫腻你知道吗？  
                                        18 小空间大浴望 卫浴间装修巧支招
返回顶部
3162201930
czq8825@qq.com
JS滚轮控制图片缩放大小和拖动的实例代码

热门推荐

随机推荐
