这个效果并不难,要点是位置和比例设置,
捕获鼠标位置、判断鼠标位置区域、还有onmouseover事件、onmousemove事件、onmouseout事件
设置显示大图的比例,小图上显示的切图比例都要弄准确点,最好是2倍啦,4倍啦。
主要注意宽度,我这里的图片m.jpg是1440x900的....
复制代码 代码如下:
*{margin:0;padding:0;}
#smallimg{width:360px;float:left;position:relative;border:1px solid red;}
#smallimg img{ width:360px;}
#bigimg{float:left;width:400px;height:400px;margin-left:40px;border:1px solid #ccc;display:none;}
#showimg{width:100px;height:100px;background:#fff;cursor:move; position:absolute;border:1px solid #666;opacity:0.5;filter:alpha(opacity=50);display:none;}



