jquery实现放大镜简单方法
网上有许多放大镜的jquery的插件,但是用着不是那么得心应手,现在一页代码实现一个放大镜功能,如果需要附加的功能可以手动修改,原理都在注释里
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<!DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title>放大镜效果</title> <style type= "text/css" > * { margin: 0; padding: 0; } .small { margin-left:40px; margin-top:50px; width: 150px; height: 150px; /*border: 2px solid yellow;*/ } .small>img { width: 150px; height: 150px; } .slider { width: 50px; height: 50px; background: rgba(180,180,135,0.3); position: absolute; display: none; } #big { //设置为固定大小; width: 200px; height: 200px; position: absolute; /* border: 2px solid red;*/ overflow: hidden; display: none; } </style> </head> <body> <!--缩略图--> <p class = "small" > <img src= "thumb.jpg" /> <!--放大镜,在原图不上的小块--> <p class = "slider" ></p> </p> <!--放大镜区域,大图,设置为none隐藏--> <p id= "big" > <img id= "bigImg" src= "big.jpg" /> </p> even.clientX<input type= "text" value= "0" id= "test" /><br/> even.clientY<input type= "text" value= "0" id= "test1" /> <script type= "text/javascript" src= "jquery-1.7.2.min.js" ></script> <script type= "text/javascript" > var small = $( ".small" )[0]; var slider = $( ".slider" )[0]; var big = document.getElementById( "big" ); //试一试js获取 var bigImg = document.getElementById( "bigImg" ); //让slider跟随鼠标移动.给小的方块绑定事件 $( ".small" ).mousemove( function (e) { var even = e || event; //兼容火狐浏览器 var x = even.clientX - small.offsetLeft - slider.offsetWidth/2; var y = even.clientY - small.offsetTop - slider.offsetHeight/2; //测试even.clientX和even.clientY $( "#test" ).val(even.clientX); $( "#test1" ).val(even.clientY); //水平方向的最大值 var maxX = small.clientWidth - slider.clientWidth; //竖直方向的最大值 var maxY = small.clientHeight - slider.clientHeight; if (x<0){ //相当于超出左侧,超出左侧时,拉回 x=0; } //超出右侧时拉回 if (x>maxX){ x = maxX; } //顶部超出 if (y<0){ y=0; } //底部超出 if (y>maxY){ y = maxY; } slider.style.top = (y+small.offsetTop) + "px" ; slider.style.left = (x+small.offsetLeft) + "px" ; //放大的图片的主要实现代码:比例计算, big.scrollLeft是id=big的p中下方滚轴的位置 //由于id=big的p设置成固定大小,而图片又非常大,所以这个p就像个放大镜一样在大图上晃 //比例计算很简单,鼠标在缩略图的位置与缩略图宽高比=鼠标在大图位置与大图宽高比,现在未知数是大图鼠标的位置 big.scrollLeft = x/maxX * (bigImg.clientWidth - big.clientWidth) ; big.scrollTop = y/maxY * (bigImg.clientHeight -big.clientHeight) ; }); //鼠标移入事件 $( ".small" ).mouseenter( function (){ //鼠标移入到缩略图时候实现,上面出现的小的方块 $( ".slider" ).css( "display" , "block" ); $( "#big" ).css( "top" ,small.offsetTop+ "px" ); //隐藏的大图=获取左图的左边位置+宽度+10(隔开点缝隙与缩略图)+px big.style.left = small.offsetLeft + small.offsetWidth + 10 + "px" ; //右侧的大图区域显示出来图片 $( "#big" ).css( "display" , "block" ); }); //移除事件 //添加鼠标移出事件,鼠标移出缩略图的时候 $( ".small" ).mouseleave( function (){ $( ".slider" ).css( "display" , "none" ); $( "#big" ).css( "display" , "none" ); }); </script> </body> </html> |
相关推荐:
jquery实现放大镜简单方法的更多相关文章
- JS去掉首尾空格 简单方法大全(原生正则jquery)
JS去掉首尾空格 简单方法大全 var osfipin= ' http://www.cnblogs.com/osfipin/ '; //去除首尾空格 osfipin.replace(/(^\s*)|( ...
- jQuery插件实现的方法和原理简单说明
下文来自 http://www.itzhai.com/jquery-plug-ins-to-achieve-the-methods-and-principles-of-simple-instructi ...
- jQuery实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
- jquery常用函数与方法
1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目.jQuery 1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...
- chm转换为html的超简单方法
在Windows下chm转换为html的超简单方法(反编译CHM文件的方法) 通过调用Windows命令,将chm 文件转换为html 文件. 方法: 命令行(cmd),输入hh -decompile ...
- jquery 中一些 特殊方法 的特殊使用 一览表
cnblogs的页面, 一种是管理页面, 是随笔的列表 a full list of essays. 另一种是 首页. 要搜索文档的话, 就使用 "首页"的那种方式. 一个jque ...
- magento jQuery冲突N种方法
在做修改模板的时候在page中加入jquery库发现原本自带的js冲突 商品无法加入购物车,很多js都没有效果 这是jQuery和magento自带prototype的冲突解决版本有很多种,说个简单点 ...
- jquery中的clone()方法使用
clone([Even[,deepEven]]) 描述: 克隆匹配的DOM元素并且选中这些克隆的副本. 在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用. 1:一个布尔值(true 或者 ...
- JQuery asp.net 简单入门
1.A标签 <a href="javascript:setURL('Invelogin.aspx');">Login.aspx</a> <a href ...
随机推荐
- html5 图片墙
代码实例: <!DOCTYPE html> <html> <head> <style> body,html{ padding:0;margin:0;wi ...
- VS2005下使用GSL-1.15小结
最近在复习高等数学,有时为了验证顺便复习下C语言,看了看自己下载收集的软件,发现C语言有一个数学工具包,是GNU开发的,叫做GSL--GNU Scientific Library,中文:C++科学计算 ...
- 【leetcode】1024. Video Stitching
题目如下: You are given a series of video clips from a sporting event that lasted Tseconds. These video ...
- JSON对象及方法
1.JSON JSON 包括 JSON 字符串和 JSON 对象.JSON 通常用于与服务端交换数据,在给服务器接收和发送数据时用的都是字符串,可以是 JSON 字符串或者一般的键值对字符串.把Jav ...
- 求1+2+3.。。。n的和
思路: 利用递归累加,逻辑运算符的短路运算. class Solution { public: int Sum_Solution(int n) { int result=n; result & ...
- python3安装pdfminer并使用
1.python3不同与2版本不能使用pdfminer pip install pdfminer3k 2.使用pdfminer解析相应文档并保存到相应的文件夹中 # encoding : udf-8 ...
- 对于vue绑定的model值里边get和set的小动作
先看下例子: template里边内容: <el-form-item label="导航条类型"> <el-radio-group v-model="n ...
- LOJ 2302 「NOI2017」整数——压位线段树
题目:https://loj.ac/problem/2302 压30位,a最多落在两个位置上,拆成两次操作. 该位置加了 a 之后,如果要进位或者借位,查询一下连续一段 0 / 1 ,修改掉,再在含有 ...
- AcWing 252. 树 (点分治)打卡
题目:https://www.acwing.com/problem/content/254/ 题意:求一棵树上,路径<=k的有多少条 思路:点分治,我们用两个指针算solve函数,首先对算出来的 ...
- UIStakView的添加与移除
subView和arrangedSubView对于Stack View的子控件添加和移除,我们是这样描述的. 添加-->(Stack View管理的subview) addArrangedSub ...