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


Posted in Javascript onOctober 28, 2020

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

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

2、前端页面布局

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

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

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`
 }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>放大镜</title>
</head>
<style>
 *{
  margin: 0;
  padding: 0;
 }
 .box1{
  width: 500px;
  height:333px;
  /* border:1px solid red; */
  background: url('shatan.jpg') no-repeat;
  position: relative;
  float: left;
  box-sizing: border-box
 }
 .son{
  width: 100px;
  height: 100px;
  background-color: #fff;
  position: fixed;
  left:0;
  top:0;
  opacity: 0.7;
  display: none;
 }
 .ceng{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
 }
 .box2{
  width: 200px;
  height:200px;
  border:1px solid red;
  background: url('shatan1.jpg') no-repeat;
  float: left;
  display: none;
 }
</style>
<body>
 <div class="box1">
  <div class="son"></div>
  <div class="ceng"></div>
 </div>
 <div class="box2"></div>
</body>
</html>
<script>
 let box1=document.querySelector(".box1");
 let box2=document.querySelector(".box2");
 let son=document.querySelector(".son");
 let ceng=document.querySelector(".ceng");
 ceng.onmouseenter=function(){
  son.style.display="block"
  box2.style.display="block"
 }
 ceng.onmouseleave=function(){
  son.style.display="none"
  box2.style.display="none"
 }
 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`
 }
</script>

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

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
js实现详情页放大镜效果
Oct 28 #Javascript
用js实现放大镜效果
Oct 28 #Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 #Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 #Javascript
原生JS生成指定位数的验证码
Oct 28 #Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 #Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 #Javascript
You might like
php 过滤器实现代码
2010/08/09 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
完美的php分页类
2017/10/24 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
javascript插入样式实现代码
2012/02/22 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
电子银行营销方案
2014/02/22 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
村委会换届选举方案
2014/05/03 职场文书
啦啦队口号大全
2014/06/16 职场文书
慰问信格式规范
2015/03/23 职场文书
文明礼仪倡议书
2015/04/28 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书