热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

js实现淘宝浏览商品放大镜功能

本文实例为大家分享了js实现淘宝浏览商品放大镜的具体代码,供大家参考,具体内容如下 1、准备两张图片,其中一张图片分辨率为另一张图片的二倍

本文实例为大家分享了js实现淘宝浏览商品放大镜的具体代码,供大家参考,具体内容如下

1、准备两张图片,其中一张图片分辨率为另一张图片的二倍。

2、前端页面布局

//box1位左侧原图,box2为右侧放大图额显示框,son为iv class="box1">
 

3、js写逻辑

let box1=document.querySelector(".box1");
 let box2=document.querySelector(".box2");
 let son=document.querySelector(".son");
 let ceng=document.querySelector(".ceng");
 //鼠标移入:son,box2出现
 ceng.Onmouseenter=function(){
  son.style.display="block"
  box2.style.display="block"
 }
 //鼠标移出:son,box2消失
 ceng.Onmouseleave=function(){
  son.style.display="none"
  box2.style.display="none"
 }
 //鼠标移动:son的位置随鼠标移动,box2背景图的位置变化
 ceng.Onmousemove=function(e){
  let sw=e.clientX-son.offsetWidth/2
  let sh=e.clientY-son.offsetHeight/2  
  if(sw>ceng.offsetWidth-son.offsetWidth){
   sw=ceng.offsetWidth-son.offsetWidth
  }
  else if(sw<=0){
   sw=0;
  }
  if(sh>ceng.offsetHeight-son.offsetHeight){
   sh=ceng.offsetHeight-son.offHeight
  }
  else if(sh<=0){
   sh=0;
  }
  son.style.left=sw+"px"
  son.style.top=sh+"px"
  box2.style.backgroundPosition=`${-2*sw}px ${-2*sh}px`
 }

完整代码




 
 
 
 



 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 在使用KVM虚拟化技术通过NAT模式启动虚拟机时,可能会遇到qemu-ifup-nat脚本执行失败的错误。本文将详细介绍如何诊断和解决这一问题。 ... [详细]
  • CSS模块化命名 ... [详细]
  • 解决远程桌面连接时的身份验证错误问题
    本文介绍了如何解决在尝试远程访问服务器时遇到的身份验证错误,特别是当系统提示‘要求的函数不受支持’时的具体解决步骤。通过调整Windows注册表设置,您可以轻松解决这一常见问题。 ... [详细]
  • Node.js 断点调试指南
    本文详细介绍了利用Google Chrome DevTools和Visual Studio Code两种工具进行Node.js应用的断点调试技巧。 ... [详细]
  • Redis: 高效的键值存储系统
    Redis是一款遵循BSD许可的开源高性能键值存储系统,它不仅支持多种数据类型的存储,还提供了数据持久化和复制等功能,显著区别于其他键值缓存解决方案。 ... [详细]
  • 本文详细探讨了在编程中如何高效处理日期和时间,包括常见的日期时间格式转换、时区问题及其实现方法。 ... [详细]
  • 本文详细介绍了如何在ReactJS项目中集成Onsen-UI的ActionSheetButton组件,并通过具体示例展示了其使用方法及效果。 ... [详细]
  • 第1章选择流程控制语句1.1顺序结构的基本使用1.1.1顺序结构概述是程序中最简单最基本的流程控制,没有特定的语法结构,按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行 ... [详细]
  • 本文详细记录了一位求职者在搜狐进行的两次面试经历,包括面试的具体时间、面试流程、技术问题及个人感受。通过本次面试,作者不仅获得了宝贵的经验,还成功拿到了搜狐的录用通知。 ... [详细]
  • 现在的新手程序猿,动不动就是框架,就连外面培训的也是框架,我就问一句,没了框架是不是就啥也不会了 ... [详细]
  • 本文介绍了一个基本的同步Socket程序,演示了如何实现客户端与服务器之间的简单消息传递。此外,文章还概述了Socket的基本工作流程,并计划在未来探讨同步与异步Socket的区别。 ... [详细]
  • 本文详细介绍了线性素数筛选法和欧拉线性筛算法,并提供了详细的代码实现及数学证明,帮助读者深入理解这两种高效的算法。 ... [详细]
  • 本文介绍了一种有效的方法来防止Windows 7系统中批处理(.bat)文件执行后立即关闭的问题。通过在特定文件夹中使用命令行窗口手动调用批处理文件,可以确保其输出内容得以保留,便于查看和调试。 ... [详细]
  • StoredProcedure “存储过程名” 的TextHeader 中存在语法错误
    修改存储过程的时候出现StoredProcedure“存储过程名”的TextHeader中存在语法错误出现这样的问题的解决方法(本人修改已成功)在创建存 ... [详细]
  • 使用IntelliJ IDEA高效开发与运行Shell脚本
    本文介绍了如何利用IntelliJ IDEA中的BashSupport插件来增强Shell脚本的开发体验,包括插件的安装、配置以及脚本的运行方法。 ... [详细]
author-avatar
dcwzyb_271
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有