相关文章
北京网站制作解决Dreamweaver不支持中文文件名方法
网站制作在Dreamweaver中自动设置网页的水平线颜色
网站制作初学者很好的参考：HTML标签详尽讲解
北京网站建设玩转表格 让你的网页炫起来
企通互联网站程序员如何应对web标准
网站制作值得收藏的东东 50条网页制作小技巧集锦
企通互联利用Photoshop特效做龙纹石
网页设计网页设计技巧－－文本排版
北京网站建设设计理论：广告条制作实战教程
www.qitongnet.comHTML：关闭(离开)浏览器窗口前的 系统提示
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> 北京网站制作北京网站建设奇妙的javascript图片放大镜
北京网站制作北京网站建设奇妙的javascript图片放大镜
 |
在Flash中我们用蒙板加上一些简单的脚本便可实现一个动态的图片放大镜。现在我们只用JavaScript结合 北京网站建设CSS语言也可以轻易做出这个效果。
制作思路：“放大镜”后有一幅背景图，它是“放大了”的图的原本。我们通过移动“放大镜”时适当调整背景图的位置，使它显示的刚好是需要要放大的部分。 北京网站制作北京网站制作 北京网站设计
北京网站制作
效果演示：
制作步骤：
１）先准备两幅内容相同尺寸不同的图片，这里我们找了一个400× 北京网页设计300像素的缩略图small_hill.gif，一个800×600像素的大图big_hill.gif。然后再准备一个“放大镜”的图片，注意它中间部分必须是透明的，这里我们准备了一个绿色的方框 viewer.gif。
２）编写如下的代码：
以下是两幅图的代码，都它们作为层。第一幅是缩略图，第二幅是“放大镜”，首先将它的背景移到不可见的地方； 其中“ onclick="moveme=!moveme" ”表示每次点击它都改变“moveme”的布尔值。www.qitongnet.com
<img src="small_hill.gif" id="bgLayer" www.qitongnet.com
style="position:absolute; left:150px; top:50px;"> 网站建设
<img src="viewer.gif" id="myviewer"网站建设
onclick="moveme=!moveme" onmousemove="viewit(this)"北京网站设计
style="left:0;top:0;background-repeat:no-repeat;北京网页设计
background-position:2000px 2000px;position:absolute;">网站设计 网站建设
网站设计
