另一款有意思的JS图片放大镜

制作思路：“放大镜”后有一幅背景图，它是“放大了”的图的原本。我们通过移动“放大镜”时适当调整背景图的位置，使它显示的刚好是需要要放大的部分。

效果预览：

在线效果演示： (点这里在新窗口中查看)

制作步骤：

先准备两幅内容相同尺寸不同的图片，这里我们找了一个400×300像素的缩略图small_hill.gif，一个800×600像素的大图big_hill.gif。然后再准备一个“放大镜”的图片，注意它中间部分必须是透明的，这里我们准备了一个绿色的方框 viewer.gif。

编写如下的代码：

以下是两幅图的代码，都它们作为层。第一幅是缩略图，第二幅是“放大镜”，首先将它的背景移到不可见的地方； 其中“ onclick="moveme=!moveme" ”表示每次点击它都改变“moveme”的布尔值。

 
 
 
 
  
  
  
  
   
  
  
  
  
  
  
  
  
style="left:0;top:0;background-repeat:no-repeat; background-position:2000px 2000px;position:absolute;">   
 
 
 

以下是JavaScript脚本:

【编辑推荐】

1. 中文前端UI框架Kit:超酷的瀑布流特效动画
2. JavaScript图片变换效果(IE only)
3. 中文前端UI框架Kit:摇头动画
4. JavaScript马赛克遮罩图片幻灯片切换类
5. 看JavaScript如何实现页面自适

分享文章：另一款有意思的JS图片放大镜
当前链接：http://www.csdahua.cn/qtweb/news12/384512.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网