js点击图片放大预览(js中点击图标变大)

相信小伙伴们都逛过淘宝,天猫,京东等电商购物平台网站,里面都有一个图片放大镜的效果案例。这样的下面就按照思路带大家实现这个效果案例。首先我们要知道案例的所有步骤,然后我们再用代码把每个步骤一步一步实现。这样就完成了整个案例。思路清晰了,代码就好写。下

相信小伙伴们都逛过淘宝,天猫,京东等电商购物平台网站,里面都有一个图片放大镜的效果案例。这样的

js点击图片放大预览(js中点击图标变大)

下面就按照思路带大家实现这个效果案例。

首先我们要知道案例的所有步骤,然后我们再用代码把每个步骤一步一步实现。这样就完成了整个案例。思路清晰了,代码就好写。下面我们就把思路一步一步理出来,便于小伙伴理解和观看,首先图片有两张,一张左边的预览图和右边的大的高清图,下面来说说思路。

  1. 初始的时候,蓝色蒙版和右边放大图片区域是隐藏状态。
  2. 鼠标移入左边图片区域,蓝色蒙版和放大区域图片显示。
  3. 鼠标移出左边图片区域,蓝色蒙版和放大区域图片隐藏。
  4. 鼠标在左边图片区域移动时,蓝色蒙版跟着鼠标移动。
  5. 右边放大区域图片跟着蓝色蒙版的移动(也就是改变右边图片的position位置)。

下面开始页面布局以及css样式。

HTML结构:

js点击图片放大预览(js中点击图标变大)

CSS样式:

js点击图片放大预览(js中点击图标变大)

js部分:

js点击图片放大预览(js中点击图标变大)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 55@qq.com 举报,一经查实,本站将立刻删除。转转请注明出处:https://www.szhjjp.com/n/36180.html

(0)
nan
上一篇 2021-10-18
下一篇 2021-10-18

相关推荐

  • 身家4千多亿的中国首富要做私募(究竟是是什么原因?)

    【身家4千多亿的中国首富要做私募】最近一家名为“关子私募基金管理(杭州)有限公司”的机构在中基协低调完成备案登记,其实际控制人正是农夫山泉创始人钟睒睒。身家4千多亿的中国首富要做私募?2021年福布斯全球富豪榜信息显示,钟睒睒以689亿美元

    2021-09-21
    0
  • 我的世界箱子怎么做标记(我的世界箱子无限物品指令)

    在游戏中玩家为了能给在游戏更快的在箱子中找到物品,所以玩家会在游戏中做出物品展示框来区分每个箱子中有什么。玩家在将箱子的物品整理好后,玩家就能在物品展示框中放上相应的方块。这玩家在游戏中能更快的找到自

    2021-12-14 用户投稿
    0
  • 佳木斯城市怎么样(佳木斯是哪个省的)

    佳木斯市,是黑龙江省地级市,国务院批复确定的黑龙江省东北部中心城市。佳木斯是中国陆地最东端的地级行政区,是中国最早迎接太阳升起的地方,素有“东极新天府,快乐佳木斯”之称。佳木斯能有今天的发展离不开国家…

    2022-02-18 随笔
    0
  • 深圳哪个区最好(深圳哪里最繁华)

    来源:读特8月1日,《小康》杂志社联合多个国家权威部门和专业机构发布了“2021中国夜经济繁荣百佳县市”榜单,罗湖区荣登十佳榜,是深圳唯一一个进入十佳榜的城区。好消息不止于此。在刚刚公布的深圳市上半年…

    2022-02-24
    0
  • 店铺简介怎么写吸引人(写店铺简介有什么技巧)

    店铺简介怎么写吸引人?写店铺简介有什么技巧,久久派带你了解相关信息。淘宝店铺的简介对于淘宝店铺来说是非常重要的,如果这个店铺简介写得比较好的话,就会有更多的人愿意来您的淘宝店铺消费,下面的内容中为大家介绍一下如何写好淘宝店铺简介。开网店的人都知道店铺的介绍写得好,是吸引顾客前来的重要因素,尤其是淘宝店铺,在淘宝里的店铺有成千上万,那么想要在这其中脱颖而出,店铺介绍就是其中至关重要的,

    2021-10-26
    0
  • 湖北值得去的旅游景点(湖北省境内旅游景点)

    旅游应该是大部分人都喜欢的活动吧。当然这也是需要一定的经济条件的,我国这么多适合游玩地方应该不好选择。那么今天我们说一说湖北这个地方,该省份共12个地级市,每一座城市都有自己独特的魅力,那么在湖北哪些地方好玩呢?一起来看看吧。湖北省境内旅游景点1

    2021-10-02 用户投稿
    0

发表回复

登录后才能评论