繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
典型特效
按钮特效
页面背景
鼠标特效
时间日期
状态特效
图象特效
cookie
下拉菜单
链接特效
导航菜单
页面导航：
首页
→
网络编程
→
JavaScript
→
网页特效
→
图象特效
→ 正文内容
用javascript制作放大镜放大图片
发布：dxy 字体：[
增加
减小
] 类型：转载
点击运行可以看到效果:
<html> <head> <title>emu</title> </head> <body> 原图： <img src=http://www.web745.com/image/logo.gif width="280" height="150" id=srcImg onmousemove="zoom()"> 局部放大图： <div style="overflow:hidden"><img id=zoomImg></div> <SCRIPT LANGUAGE="JavaScript"> <!-- zoomImg.src = srcImg.src; srcImg.height = srcImg.height/2; var zoomRate = 5; //放大倍数 zoomImg.height = srcImg.height*zoomRate; zoomImg.parentNode.style.width = srcImg.width; zoomImg.parentNode.style.height = srcImg.height; function zoom(){ var elm = event.srcElement; h = elm.offsetHeight/zoomRate/2; w = elm.offsetWidth/zoomRate/2; var x = event.x-elm.offsetLeft; x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w; zoomImg.style.marginLeft=(w-x)*zoomRate; var y = event.y-elm.offsetTop; y=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h; zoomImg.style.marginTop=(h-y)*zoomRate; } //--> </SCRIPT> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
Tags：
用javascript制作放大镜放大图片
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
左右图片循环滚动停顿一下后继续
下一篇文章：
js 新浪的一个图片播放图片轮换效果代码
·在百度中搜索关于“
用javascript制作放大镜放大图片
”相关内容
·在谷歌中搜索关于“
用javascript制作放大镜放大图片
”相关内容
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
js小技巧--自动隐藏红叉叉
特漂亮的JS图片排列旋转效果代码
动感超强的JS图片轮换特效
又一个图片自动缩小的JS代码
一段非常简单的让图片自动切换js代码
用javascript实现图片马赛克后显示并切换
静态图片的十一种滤镜效果--不支持Ie7及非
JS实现全景图效果360度旋转
新页面打开实际尺寸的图片
js实现图片等比缩略显示 支持IE/FF
最 近 更 新
自适应图片大小的弹出窗口
鼠标图片振动代码
用javascript实现图片马赛克后显示并切换
用javascript实现的图片马赛克后显示并切
点图片上一页下一页翻页效果
List the Stored Procedures in a SQL Se
javascript document.images实例
js循环输出图片，不足的要补0
比较方便的onMouseWheel缩放图片效果
一段非常简单的让图片自动切换js代码
热 点 排 行
真正的连续滚动图片
推荐一个不错的图片浏览效果
纯js无flash仿搜狐女人频道FLASH
ＪＳ＋ＦＬＡＳＨ幻灯片播放图片
左右图片循环滚动停顿一下后继续
多图展示点击切换效果模拟的flas
奇妙的Javascript图片放大镜
图片向上滚动
图片从右至左滚动JS
JS实现全景图效果360度旋转
文章评论
共有 位脚本之家网友发表了评论我来说两句