原生js--放大镜效果
在淘宝上购物时,总会看到类似放大镜的效果。以下为原生js写的一个放大镜效果,其中肯定有很多不足,请大牛们指正,谢啦!
我的大体思路是:时时监听鼠标的坐标,当鼠标移动时,透明层随着鼠标移动,大图片相对透明层的移动而移动。不废话了,看代码。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>放大镜</title> 6 <meta name="Keywords" content=""> 7 <meta name="author" content="@my_programmer"> 8 <style type="text/css"> 9 /*重置{*/ 10 html{color:#000;background:#fff;} 11 body,div{padding:0;margin:0;} 12 img{border:none;} 13 /*}重置*/ 14 .outer{width:200px;height:150px;position:relative;margin:20px auto;} 15 .inner{width:80px;height:60px;background:#f55;position:absolute;opacity:0.5;filter:alpha(opacity=50);left:0;top:0;cursor:pointer;} 16 .aa{width:320px;height:240px;position:relative;border:1px red solid;margin:20px auto;overflow:hidden;} 17 .imgs{position:absolute;} 18 .outer img{width:200px;height:150px;} 19 </style> 20 </head> 21 <body> 22 <div> 23 <div class="outer" id="outer"> 24 <img src="data:images/pobabyb.gif" alt="pobaby小图"/> 25 <div class="inner" id="inner"></div> 26 </div> 27 <div class="aa" id="aa"> 28 <div class="imgs" id="imgs" ><img src="data:images/pobabyb.gif" alt="pobaby大图"/></div> 29 </div> 30 </div> 31 <script type="text/javascript"> 32 var outer=document.getElementById("outer"); 33 var inner=document.getElementById("inner"); 34 var aa=document.getElementById("aa"); 35 var imgs=document.getElementById("imgs"); 36 var x,y,n=false; 37 inner.οnmοusedοwn=test1;//如果把inner改为document,鼠标在窗口任意位置点击,图片都会跟随 38 document.οnmοusemοve=test2;//document如果改为outer,鼠标在outer内才起作用 39 document.οnmοuseup=test3; 40 function test1(event){//鼠标按下时方法 41 var event=event || window.event;//调试兼容,各个浏览器认识event有差别. 42 n=true;//当n=true(n的值可随便设定)时,假定为鼠标按下的事件 43 x=event.clientX-inner.offsetLeft;//鼠标在透明层的相对横坐标=鼠标坐标-方块左边距 44 y=event.clientY-inner.offsetTop;//鼠标在透明层的相对纵坐标=鼠标坐标-方块上边距 45 } 46 function test2(event){//鼠标移动时方法 47 var event=event || window.event; 48 if(n==true){ 49 ////鼠标移动范围 50 inner.style.left=event.clientX-x+"px"; 51 inner.style.top=event.clientY-y+"px"; 52 ////图片移动范围 53 imgs.style.left=-4*parseInt(inner.style.left)+"px"; 54 imgs.style.top=-4*parseInt(inner.style.top)+"px"; 55 ////限定鼠标移动的范围 56 if(parseInt(inner.style.left)<0){ 57 inner.style.left=0+"px"; 58 } 59 if(parseInt(inner.style.top)<0){ 60 inner.style.top=0+"px"; 61 } 62 if(parseInt(inner.style.left)>outer.clientWidth-inner.clientWidth){ 63 inner.style.left=outer.clientWidth-inner.clientWidth+"px"; 64 } 65 if(parseInt(inner.style.top)>outer.clientHeight-inner.clientHeight){ 66 inner.style.top=outer.clientHeight-inner.clientHeight+"px"; 67 } 68 //限定图片移动的范围 69 if(parseInt(imgs.style.left)>0){ 70 imgs.style.left=0+"px"; 71 } 72 if(parseInt(imgs.style.top)>0){ 73 imgs.style.top=0+"px"; 74 } 75 if(parseInt(imgs.style.left)<-4*(outer.clientWidth-inner.clientWidth)){ 76 imgs.style.left=-4*parseInt(outer.clientWidth-inner.clientWidth)+"px"; 77 } 78 if(parseInt(imgs.style.top)<-4*(outer.clientHeight-inner.clientHeight)){ 79 imgs.style.top=-4*parseInt(outer.clientHeight-inner.clientHeight)+"px"; 80 } 81 } 82 } 83 function test3(){//鼠标松开时方法 84 n=false; 85 } 86 </script> 87 </body> 88 </html>
效果图(上图)
本文转自挨踢前端博客园博客,原文链接http://www.cnblogs.com/duanhuajian/archive/2012/08/21/2650053.html如需转载请自行联系原作者
@挨踢前端
原生js--放大镜效果相关推荐
- js动画与html动画效果,九种原生js动画效果
在做页面中,多数情况下都会遇到页面上做动画效果,我们大部分做动画的时候都是使用框架来做(比如jquery),这里我介绍下如何让通过原生的js来实现像框架一样的动画效果! 1.匀速动画效果说明:匀速动画 ...
- 基于canvas的原生JS时钟效果
概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
- 原生Js放大镜实例(附图附讲解可直接复制研究使用,小白福利)
(个人理解的画图在最后,审美差了点请见谅,) css *{margin: 0;padding: 0;}body>div{width: 1200px;height: 600px;margin: 1 ...
- 一个简单的原生js取色效果
效果图如上: HTML和js代码如下: <style> *{ padding: 0; margin:0; ...
- 移动端实现文字轮播_使用原生JS实现移动端图片轮播效果(一)
PC端上实现图片轮播效果非常简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现.话不多说,现在我们就开始移动端轮播效果的实现. 首先就是原生J ...
- 原生JS案例(面向对象)——按住鼠标实现左右拖动列表
按住鼠标实现左右拖动列表 需求 基本结构效果图 HTML页面 CSS样式 实现思路 原生JS 最终效果 实际应用 需求 鼠标在有色部分按下后, 可以对有颜色的部分进行左右拖拽 基本结构效果图 HTML ...
- 原生js实现放大镜效果
记录一次原生js实现放大镜效果. 文章目录 效果图 设计思路 基本架子 蒙版 放大效果图 逻辑设计 蒙版跟放大的图肯定要先隐藏 鼠标移入图片显示蒙版 鼠标移动蒙版跟着移动 处理边界情况 大图移动 小优 ...
- 原生JS实现简单放大镜效果
[前言] 本文介绍下原生JS实现简单图片放大镜效果 [主体] 时间问题,直接上源码 <!DOCTYPE html> <html> <head><meta ch ...
- html 放大镜 js,原生js实现简单的放大镜效果
前言: 相信很多同学在浏览购物网站的时候都会用到过放大镜的功能,这个功能在日常的网站也会经常用到.接下来我们开始实现一下它吧: (1)首先了解一下放大镜效果的html架构:如下图,它由两部分组成. h ...
- 原生JS实现简单的淘宝放大镜效果
大家经常去淘宝买东西会发现,淘宝上的放大镜效果挺有意思的,这里简单的实现了下,代码中的图片地址 亲们可以自行更换; <!DOCTYPE html> <html> <hea ...
最新文章
- UBUNTU无法播放mp4格式电影的烦恼-是否可行待验证
- 大数据测试之hadoop命令大全 2
- python怎么使用int四舍五入_使用Python 3的数字格式可以将数字四舍五入到成百上千个...
- qt5.3.2移植到arm上出undefined reference to '__sync_sub_and_fetch_4的错
- POJ2406-Power Strings【KMP】
- 工业以太网交换机:核心优点解析
- 直接请求接口_http类型的post和get接口测试
- 撤销前进快捷键_电脑win7系统的快捷键大全
- 【绝对干货】TEASER前传之QUASAR:基于四元数的存在外点Wahba问题的可证明最优解
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
- 【数据结构】3、模拟银行窗口排队叫号系统——C++
- 【ihaonet微测试】你出题,我开发
- 常用编程语言介绍及特点
- javascript回调函数有什么用
- linux下kegg注释软件,科学网—生物信息——kegg分析的kobas软件的安装与使用 - 孙朋川的博文...
- 使用GAN+RL来进行关键词生成
- 安卓打包出现“app:processReleaseManifest“问题的一种解决方案
- 软件测试建模:Google ACC
- setVisibility中INVISIBLE和GONE的区别
- linux c 获得root权限,Linux下获取root权限的c程序
热门文章
- 计算机网络实验【利用wireshark抓包工具抓包】
- idea 生成sdk_如何安装独立的Android SDK,然后将其添加到Windows上的IntelliJ IDEA?
- python读取文件路径乱码 linux_Python之pandas读写文件乱码的解决方法
- 开发这么久你真知道for循环内部执行顺序吗?
- 怎样把电脑换linux系统软件,如何将OS/2应用程序移植到Linux操作系统 -电脑资料...
- sourcetree提示无效路径_关于今明可转债申购的温馨提示
- mongooes怎么链接mysql_如何使用Node + Mongoose连接远程MongoDB数据库
- ssh相关命令Linux,Linux SSH常用命令 [长期更新]...
- webstorm下载微信小程序插件_微信电脑版可以打开小程序喽 前提你得下载测试版...
- linux mysql多实例启动_Mysql实例Linux下启动多个mysql服务器例子