【jQuery】前端项目实践案例6——制作产品放大镜效果(仿京东淘宝图片效果)
使用jQuery制作产品放大镜效果实现效果:
使用jQuery制作产品放大镜效果实现原理:
通过设置图像的 CSS 属性( left 和 top ),来实现图像的移动。
使用jQuery制作产品放大镜效果实现思路:
(1)div+css布局,制作小图、放大镜和大图的布局。
(2)放大镜和大图,默认隐藏,鼠标移动到小图上时,显示放大镜和大图。
(3)鼠标在小图上移动时,控制放大镜和大图,同时进行移动
使用jQuery制作制作产品放大镜效果需要掌握的知识点:
(1)基础div+css布局
(2)jquery 基础事件的使用:mouseenter 、mouseleave 、mousemove
(3)获取鼠标元素的位置:event.pageX 属性 和 event.pageY 属性
(4)获取匹配元素在当前视口的相对偏移:offset() 方法的使用
使用jQuery制作制作产品放大镜效果实现步骤:
第一步:制作网页内容(小图、放大镜、大图)
<body><div id="fdj"><div id="small"><!-- 这里用来放小图片 --><img src="img/big.jpg" /><div id="mark"></div><!-- 这个用来作为放大镜 --></div><div id="big"><!-- 这里用来放大图片 --><img src="img/big.jpg" /></div></div></body>
第二步,添加 CSS样式
<style type="text/css">*{margin: 0; padding: 0;}#fdj { width: 800px;background-color: pink;margin: 20px auto;overflow: hidden; /* 清除里面small和big两个div浮动,带来的浮动塌陷 */}#small {position: relative;width: 250px;height: 250px;border: 1px solid red;float: left;}#small img {width: 100%;height: 100%;}#big {position: relative;width: 500px; /* 注意,大图的尺寸和小图的宽高,成比例放大 */height: 500px;border: 1px solid black;float: left;margin-left: 10px;display: none; /* 设置大图所在的div,默认隐藏 */overflow: hidden; /* 设置图片溢出部分,隐藏 */}#big img {position: absolute;}#mark {background-color: yellow;opacity: 0.5;width: 50px;height: 50px;position: absolute;display: none; /* 设置遮罩层默认隐藏 */}</style>
第三步:引入jQuery文件
<script src="js/jquery-3.4.1.min.js"></script><!--引入jquery-->
第四步:写jquery代码
<script>$(document).ready(function() {$("#small").mouseenter(function() { //鼠标移到small上,控制小div显示$("#mark").show();$("#big").show();});$("#small").mouseleave(function() {$("#mark").hide() //鼠标移出small时,控制小div隐藏$("#big").hide();});$("#small").mousemove(function(event){ //鼠标在samll上移动时,控制遮罩层小div移动,同时控制大图移动//获取遮罩层,mark的位置var markLeft = event.pageX-$(this).offset().left-25; //数字25是遮罩层宽度的一半,实现鼠标居中var markTop = event.pageY-$(this).offset().top-25;//设置不要超出边界if(markLeft<=0){markLeft = 0;}if(markLeft>=200){ //200数字的来源:samll的宽度-遮罩层的宽度markLeft = 200;}if(markTop<=0){markTop = 0;}if(markTop>=200){//200数字的来源:samll的高度-遮罩层的高度markTop = 200;}//改变遮罩层的位置$("#mark").css({ left:markLeft,top:markTop})//改变放大图片的位置$("#big img").css({ //注意,大图的移动方向,和遮罩层的移动方向是相反的left: -2 * markLeft,top: -2 * markTop})})})</script>
代码说明:
event.pageX 属性:返回鼠标指针的位置,相对于文档的左边缘。
offset() 方法:返回或设置匹配元素相对于文档的偏移(位置)。该方法返回第一个匹配元素的偏移坐标。该方法返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
案例扩展效果:
=====这里是结束分割线======
【jQuery】前端项目实践案例6——制作产品放大镜效果(仿京东淘宝图片效果)相关推荐
- 【jQuery】前端项目实践案例1——使用jQuery制作Tab选项卡点击切换效果
1.实现效果: 案例描述:当用户单击不同的导航时,与其对应的内容回相应的呈现. 案例要求:使用jquery制作实现tab选项卡单击切换效果. 2.实现思路: (1)div+css布局,制作选项卡和对应 ...
- 菜鸟窝-仿京东淘宝项目学习笔记(二)ToolBar的基本使用
本篇知识点均来自于菜鸟窝-仿京东淘宝实战项目视频中 今天继续仿京东淘宝项目的学习,第二天,学习ToolBar的基本使用,本篇记录视频中一些重要的笔记 笔记一:ToolBar的一些重要属性 xml st ...
- 从一个前端项目实践 Git flow 的流程与参考
Git flow 出自 A successful Git branching model,这里使用了一个前端项目配合本文稿实施了 git flow 并记录流程作出示例和参考,对 hotfix 与持续部 ...
- jquery入门与实践案例教程
为什么要学jquery 使用javascript开发过程中,有许多的缺点: 查找元素的方法单一,麻烦. 遍历数组很麻烦,通常要嵌套一大堆的for循环. 有兼容性问题. 想要实现简单的动画效果,也很麻烦 ...
- Bazel构建系统的使用以及go项目实践案例
文章目录 一.基本概念 1. `Bazel`是做什么的?使用场景 2. 什么是构建系统?种类有哪些 2.1 构建系统作用? 2.2 构建系统的目标? 2.3 为什么选择构建系统?为什么不直接使用编辑器 ...
- JS实现放大镜的效果 —— 仿京东详情页中的产品放大效果
案例简述 这次案列是模仿京产品详情页中,产品图放大的效果. 简单说下效果的具体步骤: 1.鼠标经过预览区时,遮盖层和产品大图显示:鼠标离开则隐藏 2.遮盖层跟随鼠标进行移动,并且遮盖层只在预览区域内移 ...
- 不要再说找不到前端项目练手了!
前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,实验楼就整理了一些前端项目 ...
- 【TOP100】100个中国大数据应用最佳实践案例—为您打开万亿元大数据产业的财富之门
热门下载(点击标题即可阅读) ☞[下载]2015中国数据分析师行业峰会精彩PPT下载(共计21个文件) 2017年3月28日至29日,由工业和信息化部指导.中国信息通信研究院和数据中心联盟主办的&qu ...
- 项目实践精解:ASP.NET应用开发
前 言 作者从事软件设计开发工作十多年,最近才萌发了写书的想法.因为作者希望推广一种最有效的学习捷径,这就是Project-Driven Training,也就是用项目实践来带动理论学习的方法.基于此 ...
最新文章
- C++开源代码项目汇总
- 【转】ZooKeeper原理及使用
- 回顾 | Apache Flink x TiDB Meetup · 北京站
- 音频文件 数据库存储_数据库系统是什么?它由哪几部分组成?
- 二、PyCharm 创建Django 第一个项目
- 最全的BAT Google等团队技术博客集合
- java的list和数组谁高效_java 中ArrayList与LinkedList性能比较
- android jenkins 动态版本,Jenkins工具(二)之 Jenkins集成android工程
- python 爬虫代码实例
- 树莓派测试USB摄像头是否可用
- JavaEE中的网络基础知识和网络通信基础
- 基于C++的关键字检索系统
- 10大热门的物联网初创公司
- Unity3d Mesh、Texture、UI 压缩降低内存
- Occlusion Culling(遮挡剔除)
- 嵌入式学习之STM32实现OLED
- [转] TCP/IP原理、基础以及在Linux上的实现
- composer 设置版本号_Composer 版本约束表达式的使用
- HUAWEI P20系列国内发布 徕卡三摄+AI开启智慧摄影新时代
- windows 打开PyCharm报错failed to load JVM DLL pycharm\jbr\\bin\server\jvm.dll
热门文章
- tenda腾达无线路由器,IOS手机老是掉线的解决
- Android进阶——ExoPlayer源码分析之宽带预测策略的算法详解
- python和c++情侣网名_打通Python和C++之后?你懂的!
- web安全之sql注入
- 第一台计算机像什么比喻,太阳像什么的比喻句
- NeurIPS 2022 | 细胞图像分割竞赛正式启动!
- java 魔法值_可别在代码种写那么多魔法值了!
- 用python海龟制图画花瓣_Python:海龟绘图(九)
- 在PyQt5中使用多进程(multiprocessing)
- 约瑟夫问题用循环链表解决