写了个javascript的图片放大镜效果

5月 30th, 2010

主要js的代码在下面：

预览地址在这里：

http://www.designsor.com/demo/Magnifier/Magnifier.html

写成了个类，很简陋，只是个思路问题。具体到做放大镜，JS的组件现成的应该有很多，考察到的知识点其实也比较全面了。2种实现思路，一种HTML CSS JS完全分开，就只是实现放大效果，一种是把HTML CSS集合到JS之中做成JS组件。当然都各有利弊。我做的是后者，用JS生成了部分HTML结构和CSS代码。

实现思路：首先需要一张大图了，做放大的效果图了。然后就是按照比例生成缩小后的图，让用户觉得缩小了的图是实际尺寸，而实际尺寸是放大尺寸。OK。然后2个层，一个缩层，一个放大层。根据比例生成后，监听mousemove鼠标相对的offsetX和offsetY,然后改变放大层中的图片的left值和top值，感觉是放大了还根据鼠标移动了。具体看上面的预览地址就明白了。实现起来不难，浏览器兼容问题有些就是IE和非IE的鼠标坐标问题，但是还是可以解决的…

嗯，扩展思考，如果要做成放大镜根据鼠标移动的怎么办？

哈，很简单了，让那个放大层根据鼠标移动就好了，当然这里就还需要监听鼠标所在层的状态了，其实也就是mouseover和mouseout了。思路都是一样的……^_^

肯定还有很多别的好办法实现……大家多交流啊。

PS：最后我犯了个逻辑错误，在添加DOM的时候如果先设置了SRC什么的，后绑定事件，非常有可能因为图片已经加载了，而导致最后事件没有绑定或者触发，比如onload事件……特别记录一下！！经验啊……

Tags: javascript图片放大镜, javascript鼠标x‘y坐标

This entry was posted on 星期日, 5月 30th, 2010 at 5:36 上午 and is filed under 前端开发. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.