最近帮一个朋友做网站,想要一个类似京东网展示手机图片的功能。 左边是图片(实现图片比显示的大很多),右边是介绍性文字,鼠标放在图片上右边出来一个大的局部的图, 并随着鼠标的移动,展示大图相应的不同区域。 想了下,左边是一个img,mouseenter的时候,create一个div,背景设为img的src。 mousemove的时候,计算鼠标的坐标,换算成大图的坐标。 设置div背景图片的相对位置。让选中局部展示出来。
mouseout的时候隐藏div~~昨天上午试了试,写了几句jquery代码,搞定效果。 ------------- 今天看了看,觉得jquery没其啥作用。去掉之。 封装下,对象化,参数化。~~
最后加了点说明, 一共130行代码~~大家看看~~
--------------------------
ps:
v0.1:实现了IE下的鼠标滑动小图动态展示对应的放大局部图的功能。 v0.2:实现了Firefox的兼容支持,修改了IE下传递偏移0,0时有空隙的对不齐问题。