首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js编写一个简单的产品放大效果代码

Posted in Javascript onJune 27, 2016

购物网站的产品页经常会放有一个产品展示图区。该图区有一个功能就是产品图的放大功能，移动左侧的焦点区域，可以放大细节部分观看，详情如下图。实现该功能的方法也非常简单。

 js编写一个简单的产品放大效果代码

实验：制作产品焦点放大图。

所需技能：

1、基本的获取页面元素的方法；
2、几个简单的事件；
3、会使用dom设置元素的属性；
案例原理：

1、焦点框的跟随鼠标事件；
2、焦点框的移动区域规定；
3、大盒子内容的显示；
适合对象：js初学者

-------------------------------------------------------------------开始！-------------------------------------------------------------
一、首先我们准备CSS样式，CSS样式中需要注意的几个点是：
（1）焦点图相对定位，默认display：none； 
（2）右侧显示大图的盒子（以下简称大图框）默认display：none；大图框中的内容在溢出盒子后要隐藏overflow：hidden； 

js编写一个简单的产品放大效果代码

二、开始书写script代码：
（1）首先获取页面元素：

//首先或许要操作的元素
 function getId(tag){
　//定义一个用id获取元素的方法，减少很多工作量！
  return document.getElementById(tag)
 }
 var box=getId("box");
 var small=getId("small");
 var mask=getId("mask");
 var big=getId("big");
 var pic=big.children[0];

　//这里是通过节点的方法获取元素

（2）明确鼠标移动到小图上会出现两个事件：1）焦点框要出来；2）大图框要显示出来。同理鼠标移除后这两个事假要取消 

//鼠标移动到图片上出现两个效果
 small.onmouseover=function(){
  mask.style.display="block";
  big.style.display="block";
 }
 small.onmouseout=function(){
  mask.style.display="none";
  big.style.display="none"
 }
 

（3）设置焦点框的跟随：
1）当设置焦点框的跟随时，我们的跟随时间是事实发生的，所以此处的事件类型不在是onmouseover；而是onmousemove;
2）这段代码中涉及到的问题主要是一个mask（焦点框）的定位计算问题，容易忽略的问题是mask是相对谁的位置移动的？我的css样式中mask是放在small这个盒子中的，所以相对移动的位置一定是其已经定位的父元素small的位置。所以我用clientX，clientY获取的相对于浏览器当前窗口的位置坐标不能直接使用，必须减去其父盒子的margin值的影响。

//设置小图的焦点框，跟随鼠标；
 small.onmousemove=function(e){
  var marginL=box.offsetLeft;　//使用offsetLeft方法获得box的margin-left
  var marginT=box.offsetTop;　//使用offsetTop方法获得box的margin-top
  var currentX= e.clientX;







  var currentY= e.clientY;
//使用e.clientX和e.clinetY相对于浏览器的左上角的位置

　
  var x=currentX-marginL-mask.offsetWidth/2;




  var y=currentY-marginT-mask.offsetHeight/2;　//要想使焦点框的中心对齐鼠标，还需要减去焦点框的宽高的一半
/----------------------此处一会儿还要插入其他代码/---------------------------/
  mask.style.left=x+"px";
  mask.style.top=y+"px"; 
//改变焦点框的位置　

（4）闲置焦点框的位置的移动 
1）上一步执行完成后焦点框的移动是不受任何闲置的，在我们浏览购物网站的过程中，明显可以感受到焦点框不容许移动的小图的外面，造成不好的用户体验； 
2）要限制焦点框的移动，主要是x，y变化超过容许值时，给他一个固定的值； 

//设置小图的焦点框，跟随鼠标；
 small.onmousemove=function(e){
  var marginL=box.offsetLeft;
  var marginT=box.offsetTop;
  var currentX= e.clientX;
  var currentY= e.clientY;
  var x=currentX-marginL-mask.offsetWidth/2;
  var y=currentY-marginT-mask.offsetHeight/2;

  //给焦点框设置移动区域
  if(x<0){x=0;}
  if(x>small.offsetWidth-mask.offsetWidth)


{x=small.offsetWidth-mask.offsetWidth};

　//　用于定位的x的最小值是0，最大值是small的长度-mask的长度 y轴线同理
  if(y<0){y=0;}
  if(y>small.offsetHeight-mask.offsetHeight)




{y=small.offsetHeight-mask.offsetHeight};
  mask.style.left=x+"px";




//注意在规定移动区域后再写mask的移动区域，注意代码的执行顺序
  mask.style.top=y+"px";

（5）设置大图的显示 
1）在big盒子中实现图片的移动，应该想到-margin值； 
2）移动多少距离可以利用一个固定比例乘以mask的left和top值，想一下焦点区的左上角和大图框的左上角显示的位置是相同的！！！这一点就不是很难理解了 

//设置大盒子中显示的内容
  var relativeX=mask.offsetLeft;
  var relativeY=mask.offsetTop;
  var proporationX=pic.offsetWidth/small.offsetWidth;

//设置比例
  var proporationY=pic.offsetHeight/small.offsetWidth;
  pic.style.marginLeft=-relativeX*proporationX+"px";


//注意！margin的值必须是负值，“px不要丢掉
  pic.style.marginTop=-relativeY*proporationY+"px";

到这一步我们的这个demo也就做完了！是不是很简单
下面我将整个代码粘贴出来，希望能和大家讨论交流。

这里是css代码 

<style>
  * {
   margin: 0;
   padding: 0;
  }

  #box {
   margin: 50px;

  }

  #small {
   width: 229px;
   height: 250px;
   border: 1px solid black;
   text-align: center;
   position: relative;
   float: left;
  }

  #mask {
   width: 100px;
   height: 100px;
   background-color: rgba(214, 111, 193, 0.3);
   position: absolute;
   top: 0;
   left: 0;
   /*display: none;*/
  }
  #big {
   width: 350px;
   height: 350px;
   border: 1px solid black;
   float: left;
   overflow: hidden;
   /*display: none;*/
  }
 </style>

这里是HTML 

<body>
<div id="box">
 <div id="small">
  <img src="small_img.jpg" width="229" height="249" alt=""/>

  <div id="mask"></div>
 </div>
 <div id="big">
  <img src="big_img.JPG" width="549" height="600" alt=""/>
 </div>
</div>

这里是js代码 

<script>
 //首先或许要操作的元素
 function getId(tag){
  return document.getElementById(tag)
 }
 var box=getId("box");
 var small=getId("small");
 var mask=getId("mask");
 var big=getId("big");
 var pic=big.children[0];
 console.log(pic);
 //鼠标移动到图片上出现两个效果
 small.onmouseover=function(){
  mask.style.display="block";
  big.style.display="block";
 }
 small.onmouseout=function(){
  mask.style.display="none";
  big.style.display="none"
 }
  //设置小图的焦点框，跟随鼠标；
 small.onmousemove=function(e){
  var marginL=box.offsetLeft;
  var marginT=box.offsetTop;
  var currentX= e.clientX;
  var currentY= e.clientY;
  var x=currentX-marginL-mask.offsetWidth/2;
  var y=currentY-marginT-mask.offsetHeight/2;

  //给焦点框设置移动区域
  if(x<0){x=0;}
  if(x>small.offsetWidth-mask.offsetWidth){x=small.offsetWidth-mask.offsetWidth};
  if(y<0){y=0;}
  if(y>small.offsetHeight-mask.offsetHeight){y=small.offsetHeight-mask.offsetHeight};
  mask.style.left=x+"px";
  mask.style.top=y+"px";
  //设置大盒子中显示的内容
  var relativeX=mask.offsetLeft;
  var relativeY=mask.offsetTop;
  var proporationX=pic.offsetWidth/small.offsetWidth;
  var proporationY=pic.offsetHeight/small.offsetWidth;
  pic.style.marginLeft=-relativeX*proporationX+"px";
  pic.style.marginTop=-relativeY*proporationY+"px";
 }
</script>

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

js编写一个简单的产品放大效果代码

- Author -

熊猫呵呵哒

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
通过javascript设置css属性的代码
Dec 28 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
Node.js+Express配置入门教程
May 19 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
详解如何较好的使用js
Dec 16 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
vue 获取url里参数的两种方法小结
Nov 12 Javascript
用JS实现轮播图效果（二）
Jun 26 #Javascript
用JS实现图片轮播效果代码（一）
Jun 26 #Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 #Javascript
jQuery滚动新闻实现代码
Jun 26 #Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 #Javascript
JS中的进制转换以及作用
Jun 26 #Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 #Javascript
切片(1) pycharm(6) 指针(1) Slice(1) DFA(1) map(4) 结构体(1) random(1) linux(15) pygame(3)
You might like
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
function.inc.php超越php
2006/12/09 PHP
用PHP生成html分页列表的代码
2007/03/18 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
JavaScript 组件之旅（二）编码实现和算法
2009/10/28 Javascript
基于jquery的横向滚动条（滑动条）
2011/02/24 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
代码详解django中数据库设置
2019/01/28 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
根叔历年演讲稿
2014/05/20 职场文书
骨干教师申报材料
2014/12/17 职场文书
华清池导游词
2015/02/02 职场文书
大学生学年个人总结
2015/02/15 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
OpenCV-Python实现油画效果的实例
2021/06/08 Python