本片文章的内容为仿京东商品图片浏览时放大的效果
如图所示:
效果分析:
当鼠标移上左边时候该图片就会被放大,并且在右边显示;移动的时候还可以查看该物品的其他部位;鼠标移除就会被隐藏起来,不占物理空间。
解决思路:
1.写样式
不管啥情况先写出来看看再去搞功能
右边一个div,放入图片设置图片宽高,左边一个设置为右边div图片的 两倍大;
2.写事件
分析可知有三种事件(通过触发小盒子的事件,来修改大盒子样式)
- onmouseover:移入显示
- onmouseout:移出隐藏
- onmousemove:获取实时鼠标坐标,修改大盒子的背景图片位置
3.具体内容
-
在css文件中写了一个hiDe的类。并且给大盒子加上。
.hiDe { display: none; }
-
给小盒子添加事件给大盒子加上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.不知道问度娘,一次只解决一共问题,别前面没懂又找下一个。