jquery实现放大镜功能
来源:互联网 发布:香榭的落叶淘宝 编辑:程序博客网 时间:2024/06/11 02:15
放大镜效果,被广泛的应用于商城的商品展示,其效果相比大家都不陌生。其原理也不是很难,那么今天就实现下放大镜效果!
主要的CSS样式:溢出隐藏overflow:hidden,隐藏图层display:none,边距margin-left,margin-right
用的主要事件:鼠标移动事件mousemove()和鼠标移出事件mouseout();
原理与算法:展示图片的长宽/放大镜里的图片长宽 = 放大镜长宽/放大区域的长宽 = 鼠标移动量 / 放大镜显示图片的偏移量
发文目的:希望可以得到大神的指点,无论是代码质量还是代码风格,亦或是有更好的实现方法,都请提出宝贵建议。同时也希望能给予和我一样的菜鸟一定的帮助!
效果展示:http://sandbox.runjs.cn/show/zidjlhoh
代码展示:
html代码:
<div class="con-FangDa" id="fangdajing"> <div class="con-fangDaIMg"> <img src="/uploads/rs/304/hownr3so/bb.jpg"><!-- 正常现实的图片 --> <div class="magnifyingBegin"></div><!-- 滑块 --> <div class="magnifyingShow"><!-- 放大镜显示的图片 --> <img src="/uploads/rs/304/hownr3so/bb.jpg"> </div> </div> <ul class="con-FangDa-ImgList"><!-- 图片显示列表 --> <li class="active"><img src="/uploads/rs/304/hownr3so/bb.jpg"></li> <li><img src="/uploads/rs/304/hownr3so/a.jpg"></li> <li><img src="/uploads/rs/304/hownr3so/bb.jpg"></li> <li><img src="/uploads/rs/304/hownr3so/a.jpg"></li> <li><img src="/uploads/rs/304/hownr3so/bb.jpg"></li> </ul> </div>
css代码:
*{margin:0;padding:0}.con-FangDa{width:300px;height:550px;background-color:cyan}.con-fangDaIMg{width:300px;height:450px;position:relative;background-color:#454545}.con-fangDaIMg > img{width:100%;height:100%}.magnifyingBegin{width:100px;height:100px;left:0;top:0;background-color:#454545;opacity:0.5;position:absolute;cursor:move;display:none}.magnifyingShow{width:300px;height:300px;display:none;position:absolute;right:-300px;top:0;overflow:hidden;background-color:#454545}.magnifyingShow > img{width:900px;height:1350px;margin-left:0;margin-top:0}.con-FangDa-ImgList{list-style:none}.con-FangDa-ImgList > li{width:50px;height:50px;float:left;margin:4px 0 0 4px;cursor:pointer;border:2px solid #454545;background-color:#454545}.con-FangDa-ImgList > li:first-child{margin-left:0}.con-FangDa-ImgList > li > img{width:100%;height:100%}.con-FangDa-ImgList > .active{border-color:red}js代码:$(function(){
$(function(){$.fn.magnifying = function(){var that = $(this), $imgCon = that.find('.con-fangDaIMg'),//正常图片容器 $Img = $imgCon.find('img'),//正常图片,还有放大图片集合 $Drag = that.find('.magnifyingBegin'),//拖动滑动容器 $show = that.find('.magnifyingShow'),//放大镜显示区域$showIMg = $show.find('img'),//放大镜图片$ImgList = that.find('.con-FangDa-ImgList > li >img'),multiple = $show.width()/$Drag.width();//倍数$imgCon.mousemove(function(e){$Drag.css('display','block');$show.css('display','block'); //获取坐标的两种方法 // var iX = e.clientX - this.offsetLeft - $Drag.width()/2, // iY = e.clientY - this.offsetTop - $Drag.height()/2, var iX = e.pageX - $(this).offset().left - $Drag.width()/2, iY = e.pageY - $(this).offset().top - $Drag.height()/2, MaxX = $imgCon.width()-$Drag.width(), MaxY = $imgCon.height()-$Drag.height(); /*这一部分可代替下面部分,判断最大最小值 var DX = iX < MaxX ? iX > 0 ? iX : 0 : MaxX, DY = iY < MaxY ? iY > 0 ? iY : 0 : MaxY; $Drag.css({left:DX+'px',top:DY+'px'}); $showIMg.css({marginLeft:-3*DX+'px',marginTop:-3*DY+'px'});*/ iX = iX > 0 ? iX : 0; iX = iX < MaxX ? iX : MaxX; iY = iY > 0 ? iY : 0; iY = iY < MaxY ? iY : MaxY; $Drag.css({left:iX+'px',top:iY+'px'}); $showIMg.css({marginLeft:-multiple*iX+'px',marginTop:-multiple*iY+'px'}); //return false;});$imgCon.mouseout(function(){ $Drag.css('display','none');$show.css('display','none');//return false;});$ImgList.click(function(){var NowSrc = $(this).attr('src');$Img.attr('src',NowSrc);$(this).parent().addClass('active').siblings().removeClass('active');});}$("#fangdajing").magnifying();});
0 0
- jquery实现放大镜功能
- jQuery放大镜功能---jqzoom
- jQuery插件Magnify放大镜实现javascript图片放大功能
- canvas实现放大镜功能
- jquery实现放大镜
- jquery实现的放大镜
- jQuery实现放大镜效果
- jquery实现放大镜效果
- jQuery实现放大镜效果
- jQuery实现放大镜效果
- jQuery实现放大镜效果
- jQuery实现放大镜效果
- jQuery实现放大镜效果
- JQuery实现放大镜
- jQuery实现轮播功能,及其在其基础上实现类似放大镜自动轮播功能
- Android 实现放大镜功能源码
- JQuery 实现图片放大镜插件
- 图片放大镜效果-- jquery实现
- Struts2中使用Servlet-API步骤
- 拿什么来衡量程序员的生产力?
- Evaluate Reverse Polish Notation
- 如何有效地解Bug (RED方法)
- 呵呵
- jquery实现放大镜功能
- 《coredump问题原理探究》Linux x86版6.7节多继承
- MyEclipse中SVN的使用方法
- day01拨号器心得
- 管理学定律五:二八定律与木桶理论
- 镜头校准参数解析
- 突破思维障碍 之思维导图
- 1881闪烁的繁星——线段树vijos
- unity3d 游戏对象消失三种方法的区别(enabled/Destroy/active)