jquery实现放大镜简洁代码(推荐)
时间:2019-03-30
本文章向大家介绍jquery实现放大镜简洁代码(推荐),主要包括jquery实现放大镜简洁代码(推荐)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
简介
网上有许多放大镜的jquery的插件,但是用着不是那么得心应手,现在一页代码实现一个放大镜功能,如果需要附加的功能可以手动修改,原理都在注释里
<!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> <!--缩略图--> <div class="small"> <img src="thumb.jpg" /> <!--放大镜,在原图不上的小块--> <div class="slider"></div> </div> <!--放大镜区域,大图,设置为none隐藏--> <div id="big"> <img id="bigImg" src="big.jpg" /> </div> 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的div中下方滚轴的位置 //由于id=big的div设置成固定大小,而图片又非常大,所以这个div就像个放大镜一样在大图上晃 //比例计算很简单,鼠标在缩略图的位置与缩略图宽高比=鼠标在大图位置与大图宽高比,现在未知数是大图鼠标的位置 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>
下载demo
https://github.com/mytheshow/...
链接: http://pan.baidu.com/s/1nvMBgb3
以上所述是小编给大家介绍的jquery实现放大镜简洁代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 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 数组属性和方法
- 团体程序设计天梯赛-练习集 L1-042 日期格式化
- 官方工具|MySQL Router 高可用原理与实战
- 团体程序设计天梯赛-练习集 L1-030 一帮一
- 团体程序设计天梯赛-练习集 L1-035 情人节
- 团体程序设计天梯赛-练习集 L1-038 新世界
- 团体程序设计天梯赛-练习集 L1-040 最佳情侣身高差
- 团体程序设计天梯赛-练习集 L1-041 寻找250
- 十年磨一剑!腾讯QQ Linux版 2.0.0 Beta重磅发布!
- 团体程序设计天梯赛-练习集 L1-045 宇宙无敌大招呼
- 团体程序设计天梯赛-练习集 L1-047 装睡
- 团体程序设计天梯赛-练习集 L1-052 2018我们要赢
- 团体程序设计天梯赛-练习集 L1-053 电子汪
- 团体程序设计天梯赛-练习集 L1-056 猜数字
- PAT (Basic Level) Practice (中文)1001 害死人不偿命的(3n+1)猜想
- PAT (Basic Level) Practice (中文)1002 写出这个数