《中软笔记》仿京东图片浏览

本片文章的内容为仿京东商品图片浏览时放大的效果

如图所示：

效果分析：
当鼠标移上左边时候该图片就会被放大，并且在右边显示；移动的时候还可以查看该物品的其他部位；鼠标移除就会被隐藏起来，不占物理空间。

解决思路：
1.写样式
不管啥情况先写出来看看再去搞功能
右边一个div，放入图片设置图片宽高，左边一个设置为右边div图片的 两倍大；

2.写事件
分析可知有三种事件（通过触发小盒子的事件，来修改大盒子样式）

1. onmouseover：移入显示
2. onmouseout：移出隐藏
3. onmousemove：获取实时鼠标坐标，修改大盒子的背景图片位置

3.具体内容

1. 在css文件中写了一个hiDe的类。并且给大盒子加上。

   .hiDe {
   	display: none;
   }
   

2. 给小盒子添加事件给大盒子加上hiDe

   //小盒子
   <div id="cunfangimg" onmouseover="Onr()" onmouseout="Ont()" onmousemove="One(event)">
   		<--放入的图片（图片原图大小为800*800）-->
   		<img src="img/JDimg.jpg" width="200px" height="200px"/>
   </div>
   
   //大盒子
   <div class="hiDe" id="imgBackground"></div>
   

   3 当触发onmouseover时去掉大盒子的hiDe类

    //获取大盒子的对象
   var o = document.getElementById("imgBackground");
   

    //onmouseover事件
   function Onr(){
   	o.classList.remove("hiDe");// 去掉hiDe类
   }
   

       //onmouseout事件
       function Ont(){
      	o.classList.add("hiDe");// 加上hiDe类
      }
      //onmousemove事件
       function One(event){
      		var x = event.clientX;   //获取横坐标
      		var y = event.clientY;   //获取纵坐标
      		 //获取背景图片对应坐标
      		x = (x-100)/200*(800-400);      
      		y = (y-100)/200*(800-400);
      		//修改大盒子的背景坐标，以显示该部位的图片
      	o.style.backgroundPositionX = '-'+x+'px';
      	o.style.backgroundPositionY = '-'+y+'px';
      }
   

   最后的效果图：
   

   学习总结：
   .当做一个页面特效无从下手时，可以一层一层的来"剥它"。
   1.首先将页面样式写好
   2.然后分析它需要写写什么事件，以及触发事件后需要修改的样式。
   3.逐条将想好的事件和要修改的样式记录在纸上。
   4.理清事件的先后，再逐个的绑定上去。不要急着一下写完。不熟练的时候就需要绑一个就去看一下，看能否触发或者有没有语法错误，虽然很浪费时间，但是感觉有必要。以免最后漏洞百出，不知道从哪改起。
   5.不知道问度娘，一次只解决一共问题，别前面没懂又找下一个。