局部放大图片的js组件~~ v0.4firefox,chrome兼容~~

xiaoxiao2024-05-08  26

  最近帮一个朋友做网站,想要一个类似京东网展示手机图片的功能。   左边是图片(实现图片比显示的大很多),右边是介绍性文字,鼠标放在图片上右边出来一个大的局部的图, 并随着鼠标的移动,展示大图相应的不同区域。 想了下,左边是一个img,mouseenter的时候,create一个div,背景设为img的src。 mousemove的时候,计算鼠标的坐标,换算成大图的坐标。 设置div背景图片的相对位置。让选中局部展示出来。

mouseout的时候隐藏div~~昨天上午试了试,写了几句jquery代码,搞定效果。 ------------- 今天看了看,觉得jquery没其啥作用。去掉之。 封装下,对象化,参数化。~~

 

最后加了点说明, 一共130行代码~~大家看看~~

 

--------------------------

 

ps:

 

    v0.1:实现了IE下的鼠标滑动小图动态展示对应的放大局部图的功能。    v0.2:实现了Firefox的兼容支持,修改了IE下传递偏移0,0时有空隙的对不齐问题。   

 

 

 

转载请注明原文地址: https://www.6miu.com/read-5015242.html

最新回复(0)