放大器在JavaScript中的实现

最新推荐文章于 2024-08-14 15:45:18 发布

hh_riy_xj

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量227

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/hh_riy_xj/article/details/52490694

版权

	大家好，我是hh_riy_xj，本次将为大家讲解一下放大器在Javascript中的实现，希望对大家有所帮助。
放大器在购物网站中很常用，京东，淘宝，都会用到放大器的相关知识，而本次博客将为大家介绍使用javascript编写放大器的例子。
	注：本次使用的图片 基本图片：名称：iphone.jpg  宽：350像素 高：350像素
                放大图片：名称：iphone_big.jpg  宽：800像素 高：800像素
                
下面是javascript放大器实现的具体步骤：            

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title></title>
      第二步：把基本的html代码写好后，我们为其添加样式
      第二步内容--开始
      <style>
      	全部html元素padding和margin为0
         *{
            padding: 0;
            margin: 0;
         }
          #div_origin {
             因为基本图片的像素是350*350,因此我们把此div设置为宽:350,高:350
                width:350px;
                height: 350px;
                这里可以任意设置top和left的值.
                top:50px;
                left:60px;
                此div绝对定位
                position: absolute;
                为了使页面美观,添加box-shadow样式
                box-shadow: 4px 4px 10px 3px gray;
          }
          
          #div_big {
                使显示放大区域宽350 高350,当然,此区域也可以任意设置
                  width: 350px;
                  height: 350px;
                使显示放大区域左边和上边为380和50,其实此样式也可以任意设置
                  left:480px;
                  top:50px;
                 把放大区域改为圆形
                 border-radius: 50%;
                  为了使页面美观,添加box-shadow样式
                 box-shadow: 4px 4px 10px 3px gray;
                 position: absolute;
                 !!把超过此区域的图片隐藏!!
                 overflow: hidden;  
                 ********第四步加上下样式，鼠标移入在出现********
                display: none;    
          }


          设置被放大圆形区域样式
         #enlarge_area {
                此区域的宽和高是根据， 基本div的宽高乘以放大区域div的宽高 再除以大图片的宽高得出 既350*350/800, 按给出两张图片比例求取放大区域
                width: 153px;
                height: 153px;
                border-radius: 50%;
                opacity: 0.7;
                
                background: gray;
                position: absolute;
                
               ********第四步加上下样式，鼠标移入在出现********
                display: none;
                
         }
         把图片设置为绝对定位,可以是灰色放大圆形区域在图片上方
         img {
                position: absolute;
         }
          
          
      </style>
      第二步内容--结束
   </head>
   <body>
      第一步：在body中写入，放大器的基本实现布局
      第一步内容--开始
      <div id="div_origin">
         <img src="img/iphone.jpg"  /> 
         因为我们要在基本图片中展示一个圆形区域，用于放大此区域内的图片，故需要创建一个div，且给div的boder-radius赋为50%
         <div id="enlarge_area"></div>
      </div>
      <div id="div_big">
         <img src="img/iphone_big.jpg"  />
      </div>
      第一步内容--结束
   </body>
   <script>
    第三步：使用javascript得到DOM对象 
      var oDiv = document.getElementById("div_origin");
      var bigDiv = document.getElementById("div_big");
      var eaDiv = document.getElementById("enlarge_area");eaDiv是enlarge_areaDiv的缩写
      
      在第六步时才加入下行代码，表示要用到bigDiv里面的图片的，要让这个大图动起来
      var bigImg = bigDiv.getElementsByTagName("img")[0];
      
      
    第四步:当鼠标移入oDiv后,bigDiv和eaDiv才出现, 鼠标离开消失
      oDiv.onmouseenter = function(){
         bigDiv.style.display = "block";
         eaDiv.style.display = "block";
      }
      
      oDiv.onmouseleave = function(){
         bigDiv.style.display = "none";
         eaDiv.style.display = "none";
      }
      
   第五步:当鼠标在oDiv内移动时,圆形区域会跟随鼠标光标移动, 且不会移出oDiv
      注:第五步为关键步骤,请大家仔细思量.在此我会将第五步分为几个小步骤.
      oDiv.onmousemove = function(e){
         e = e || event 浏览器兼容
      5.1:当鼠标移入oDiv圆形eaDiv会跟着鼠标移动
5.2步会续写此公式         eaDiv.style.left = e.clientX + 'px';
5.2步会续写此公式         eaDiv.style.top = e.clientY + 'px';
       但发现鼠标没有在圆形eaDiv中心,而是eaDiv外面
       这是由于1.要想鼠标在圆形eaDiv中心需要鼠标光标减去圆形半径e.clientX - eaDiv.offsetWidth/2
                 2.因为圆形eaDiv的父级是oDiv,且oDiv又向右偏离了60px, 故需要再减去oDiv.offsetLeft 
         因此得到5.2步公式（如下）!!!!!一定要注意px单位
         第5.4步，由于会继续给eaDiv.style.left和eaDiv.style.top赋值
         故把eaDiv.style.left 改为esl
         且把eaDiv.style.top 改为est   (三个单词首字母缩写)
         且去掉px单位
5.2步公式         eaDiv.style.left = e.clientX - oDiv.offsetLeft - eaDiv.offsetWidth/2 + 'px';
5.2步公式         eaDiv.style.top = e.clientY - oDiv.offsetTop - eaDiv.offsetHeight/2 + 'px';
         esl = e.clientX - oDiv.offsetLeft - eaDiv.offsetWidth/2;
         est = e.clientY - oDiv.offsetTop - eaDiv.offsetHeight/2;


          圆形eaDiv已可随鼠标随意移动,但圆形eaDiv也能移出oDiv区域,这是我们不想看到的
       故规定出圆形eaDiv活动的区域,因为圆形eaDiv的父级是oDiv所以它的上边界和左边界为0
       下边界和右边界为5.3公式(如下),就是oDiv的的宽度和高度减去圆形eaDiv的半径。
         var topBorder = 0;
         var rightBorder = oDiv.offsetWidth - eaDiv.offsetWidth;
         var bottomBorder = oDiv.offsetHeight - eaDiv.offsetHeight;
         var leftBorder = 0;
       圆形eaDiv超过上边,则把topBorder赋给top,超过右边则把rightBorder赋给left,超过下边界则把bottomBorder赋给top,
       超过左边界,则把leftBorder赋给left,如下图所示:！！！！！！！


         
      得出以下公式:5.4
         if(esl < leftBorder) {
            eaDiv.style.left = leftBorder + 'px';
            第六步加1
            bigImg.style.left = 0; bigDiv的leftborder也是0
            
         } else {
            if (esl > rightBorder) {
               eaDiv.style.left = rightBorder + 'px';
               第六步加2   如果圆形eaDiv在oDiv右侧将要超越界限
               bigImg.style.left = bigDiv.offsetWidth - bigImg.offsetWidth + 'px';
            } else { 如果圆形eaDiv在oDiv限制区域中则，则执行下代码
               eaDiv.style.left = esl + 'px';
               第六步加3 
               bigImg.style.left = esl * -2.3 + 'px';
            }
         }
         
         if(est < topBorder) {
            eaDiv.style.top = topBorder + 'px';
            第六步加4
            bigImg.style.top = 0;
         } else {
            if(est > bottomBorder){
               eaDiv.style.top = bottomBorder;
               第六步加5
               bigImg.style.top = bigDiv.offsetHeight - bigImg.offsetHeight;
            } else {如果圆形eaDiv在oDiv限制区域中则，则执行下代码
               eaDiv.style.top = est + 'px';
               第六步加6
               bigImg.style.top = est * -2.3 + 'px';
            }
         }
         
       5.4步完成后如果圆形eaDiv可在oDiv限制区域内运动

       第六步:根据圆形eaDiv所在位置,移动bigDiv中的大图片.首先要明确.在bigDiv中
       bigDiv是不动的,动的是里面的图片.且图片和圆形eaDiv是相反移动.
       第二要知道:在oDiv中eaDiv走了oDiv的宽（350)减去eaDiv（153)的宽的距离（197) .而bigDiv中图片需要走
       bigImg的宽（800)减去bigDiv（350)的距离（450),故上述代码第六步加3和第六步加6中,由450/197 = 2.3得出
         
         
         
         
      }
      
      
   </script>
</html>