js图片放大
2015-09-08 10:51
597 查看
picZoom("#element")
function picZoom(ele){ $(function(){ var $ele=$(ele); $ele.each(function(){ var $this=$(this); $this.bind("click",function(){ var $picSrc=$this.attr("src"), $picH=$this.height(), $picW=$this.width(), wHeight=$(window).height(), wWidth=$(window).width(), scrTop=$(window).scrollTop(), scrLeft=$(window).scrollLeft(), dHeight=$(document.body).height(), dWidth=$(document.body).width(), $shadeDiv=$("<div id='shadeDiv'/>"), $picWrap=$("<div id='picWrap' />"), $pic=$("<img id='pic' />"); $shadeDiv.css({ 'display':'none', 'position': 'absolute', 'left': 0, 'top': 0, 'width': dWidth, 'height': dHeight, 'background-color': '#000', 'opacity': 0.7, 'z-index': 998 }).show(); $picWrap.css({ 'display':'none', 'position': 'absolute', 'left': 0, 'top': scrTop, 'width': wWidth, 'height': wHeight, 'z-index': 999 }).show(); $pic.attr("src",$picSrc); if($picH>$picW){ $pic.css({ 'position':'relative', 'left':(wWidth-($picW/$picH)*wHeight)/2, 'height':wHeight, 'width':($picW/$picH)*wHeight }); }else{ $pic.css({ 'position':'relative', 'top':(wHeight-($picH/$picW)*wWidth)/2, 'width':wWidth, 'height':($picH/$picW)*wWidth }); } $pic.bind("click",function(){ $shadeDiv.slideUp().remove(); $picWrap.slideUp().remove(); }); $picWrap.bind("touchmove",function(){ return false; }); $picWrap.append($pic); $("body").append($shadeDiv); $("body").append($picWrap); }); }); }); }
相关文章推荐
- js,在循环中添加事件,输出循环数 i 的值,i++与++i的问题
- Json解析
- JavaScript实现的经典文件树菜单效果
- Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置
- JavaScript高级程序设计笔记 事件冒泡和事件捕获
- js校验输入字符串的字节长度
- 【JS】通过JS实现超市小票打印功能——ActiveX控件
- Hibernate存取JSON数据
- grunt学习(三)——实现JavaScript资源的合并
- JS设计模式——中介者模式
- JS设计模式——策略模式
- maven 库中添加 net.sf.json JSONArray 引用的jar包 net.sf.json-lib问题
- JS设计模式——迭代器模式
- JS设计模式——外观模式
- JS设计模式——责任链模式
- JS设计模式——适配器模式
- Ember.js 入门指南——计算属性(compute properties)
- 深入理解javascript原型和闭包(完结
- Ember.js 入门指南——计算属性(compute properties)
- js 数组清空