【前端学习之路】——使用jQuery制作放大镜

效果如图所示：
可根据选择切换至上一张下一张

话不多说，放代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>#small{width: 250px;height: 365px;border: 1px solid #000;position: absolute;left: 100px;top: 100px;}#small img{width: 100%;height: 100%;}#big img{width:1000px;height:1450px;position: absolute;}#big{display: none;width: 400px;height: 365px;border: 1px solid #000;position: absolute;left: 400px;top: 100px;overflow: hidden;}#mark{width: 100px;height: 100px;background-color: white;opacity: 0.5;filter: alpha(opacity=50);position: absolute;left: 0px;top: 0px;display: none;}#prev{top: 10px;left: 60px;position: relative;}#next{top: 10px;left: 80px;position: relative;}</style><script src="js/jquery-3.4.1.min.js"></script><script>$(function(){$("#small").mouseenter(function(){$("#mark,#big").show()}).mouseleave(function(){$("#mark,#big").hide()}).mousemove(function(ev){var l=ev.pageX-$(this).offset().left-50;var t=ev.pageY-$(this).offset().top-50if(l<=0){l=0}if(l>=150){l=150}if(t<=0){t=0}if(t>=265){t=265}//改变遮罩层的位置$("#mark").css({left:l,top:t})//同时改变放大图片的位置  四倍于遮罩层图片的位置//而且是反方向的$("#big img").css({left:-4*l,top:-4*t})})var index=1;//切换上一张图片function prev(){if(index>=2){index--}else{index=4}return index}//切换下一张图片function next(){if(index>11){index=1}else{index++}return index}//点击上一张图片$("#prev").click(function(){prev()$("#small img").attr("src","img/"+(index)+".jpg")$("#big img").attr("src","img/"+(index)+".jpg")})$("#next").click(function(){next()$("#small img").attr("src","img/"+(index)+".jpg")$("#big img").attr("src","img/"+(index)+".jpg")})})</script></head><body><div id="small"><img src="img/1.jpg" /><div id="mark"></div><button id="prev">上一张</button><button id="next">下一张</button></div><div id="big"><img src="img/1.jpg" /></div></body>
</html>

如此…一个简单的放大镜就做成功啦~

【前端学习之路】——使用jQuery制作放大镜相关推荐

前端开始学java_[Java教程]开启前端学习之路
[Java教程]开启前端学习之路 0 2014-06-10 17:00:06 前言第一次在博客园写博客,写写自己开启前端学习之路.应该是受邢师兄的影响吧,不得不说邢师兄人很好,学习也很认真,师兄的前 ...
前端学习之路之图片(魔方旋转)
前端学习之路之图片(魔方旋转) 前面实现了图片的轮播,同时实现了自动轮播图片.图片轮播的就是通过js监听通过改变css样式实现图片轮播的.改文章也是图片的轮播不过是增加了一些css样式,是的旋转的时 ...
前端学习之路之图片轮播(已实现自动轮播)
前端学习之路之图片轮播近期学习了不少的前端知识和前端的一些应用,今天呢就实现了一下图片的轮播效果,话不多说. 图片轮播的本质就是类似走马灯,当用户点击指示器的时候,需要轮播的图片发生偏移就行了. 使 ...
【转】一个40岁老程序员的前端学习之路｜2021 年中总结
40岁的老程序员感言时光给我留下了什么? 不知不觉间虚度了40年光阴,看着父母逐渐的苍老和孩子逐渐长大,看着自己发福的身材,已知道自己在这个陌生的城市里已经扎根,估计是很难再去哪里了.回首故里似乎和 ...
【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...
一个普通本科在校生的前端学习之路
原创西安前端交流会: 卡农 ovenzeze@qq.com 本文章同步发表在wdShare西安前端交流会网站.我的个人博客以及segmentFault和掘金. 转载请注明出处这是西安初级前端群里边 ...
2020最新版前端学习路线图--微信小程序制作原来如此简单
黑马程序员前端学习路线图大纲中第六阶段的学习是微信小程序的学习:主要介绍了前端学习路线图中微信小程序的学习目标,前端学习路线图中微信小程序的市场价值,前端学习路线图中微信小程序的重点知识.前端学习路线 ...
前端学习之路---node.js（二）
知识点下一篇 vue(一) 网站开发模型 + 黑盒子.哑巴 + 写代码让它变得更智能 + 按照你设计好的套路供用户使 ...
前端学习之路---CSS
CSS学习内容下一篇 javascript基础(1) 1. 学会使 ...

【前端学习之路】——使用jQuery制作放大镜

【前端学习之路】——使用jQuery制作放大镜相关推荐

最新文章

热门文章