jquery图片放大镜效果
时间:2019-03-30
本文章向大家介绍jquery图片放大镜效果,主要包括jquery图片放大镜效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
昨天看一篇博文的时候,说到了这个效果,于是自己想试着写一个,没有使用插件,
基本的想法就是,左边是小图,右边对应大图,鼠标进去小图范围之后,获取他的坐标(x,y)然后计算
x/小图的宽度*大图得宽度/2
y/小图的高度*大图得高度/2
计算出来的两个结果即为大图得左右偏移距离
/2是为了让右边区域不会出现空白。
经过测试,ie7以上以及主流浏览器都可以用,代码如下:
<div class="wrap"> <div class="small"> <img src="1s.jpg"> <div class="tool" id="tool"></div> </div> <div class="big"><img src="1.jpg"></div> </div>
.wrap{overflow:hidden;margin:50px auto;} .small{position:relative;float:left;width:214px;height:328px;} .tool{width:100px;height:100px;position:absolute;top:50px;left:100px;background:rgba(255,255,255,0.5);} .big{float:left;margin:0 40px;width:330px;overflow:hidden;height:328px;display:none;position:relative;} .big img{position:absolute;width:650px;height:960px;}
主要的JS代码如下:
//不加蒙版放大镜 $('.small').mousemove(function(e) { $(this).siblings('.big').show(); //var e = event || window.event; var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; //滚动条距离屏幕左边的宽度 var scrollY = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离屏幕上面的高度 //e.pageX相对于文档左边的高度 //e.pageY相对于文档上面的高度 //e.clientX相对于屏幕左边的高度 //e.clientY相对于屏幕上面的高度 var xx = e.pageX || e.clientX + scrollX;//相对于文档左边的宽度 var yy = e.pageY || e.clientY + scrollY;//相对于文档上面的高度 //.offset().top元素相对于文档上面的位置 //.offset().left元素相对于文档左面的位置 var y=yy-$(this).offset().top;//鼠标相对于元素的x,y坐标 var x=xx-$(this).offset().left; var width=$(this).width(); var lwidth=$(this).siblings('.big').find('img').width(); //按照大图与小图的比例来进行移动的 var left=x/width*lwidth/2; var height=$(this).height(); var lheight=$(this).siblings('.big').find('img').height(); var top=y/height*lheight/2; $(this).siblings('.big').find('img').css({left:-left,top:-top}); //console.log(x + '---' + y); //不加蒙版放大镜结束 //蒙版跟着动 var twidth=$(this).find('.tool').width(); var theight=$(this).find('.tool').height(); var tleft=x-twidth/2; var ttop=y-theight/2; if(tleft<0){ tleft=0; } if(tleft>width-twidth){ tleft=width-twidth; } if(ttop<0){ ttop=0 } if(ttop>height-theight){ ttop=height-theight; } $(this).find('.tool').css({left:tleft,top:ttop}); });
效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Instagram 开源用于 Python 3的MonkeyType 工具
- 拼凑了几个自定义的Panel(包括FishEyePanel,WrapPanel等几个常用的布局)
- jquery获取父级一级节点的序号
- Docker容器学习梳理--基础知识(2)
- Blend生成的TransformGroup如何引用?
- 今日头条写新闻机器人获吴文俊人工智能科技发明奖
- Docker容器学习梳理--应用程序容器环境部署
- 异步方式访问网页
- Silverlight:利用Panel实现自定义布局
- 《物联网智能终端信息安全白皮书》再次敲响物联网时代警钟
- Gitlab可视化代码树插件-Octotree
- 子线程调用UI线程的方法
- Silverlight:Dependency Property(依赖属性)学习笔记
- Silverlight:利用异步加载Xap实现自定义loading效果
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 结构型设计模式:代理模式
- kubernete中的原子调度单位:pod
- mybatis-generator在命令行及IEAD中的使用
- mybatis-generator在命令行及IDEA中的使用
- 70-STM32+ESP8266+AIR202基本控制篇-移植使用-移植单片机MQTT底层包到自己的工程项目
- springboot研究:springboot自带监控actuator
- springboot研究:springboot使用swagger自动构建api
- numpy/pandas瞎搞系列(一):OLS,WLS的numpy实现
- redis实战第三篇 redis sentinel安装和部署
- 后浪,谈谈你对jvm性能调优的理解
- Homer预测共表达基因的motif
- redis实战第一篇 安装和使用
- lombok在java项目中的使用
- MySQL 的全文索引.
- Swift Reusable开源库使用