繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
典型特效
按钮特效
页面背景
鼠标特效
时间日期
状态特效
图象特效
cookie
下拉菜单
链接特效
导航菜单
页面导航：
首页
→
网络编程
→
JavaScript
→
网页特效
→
图象特效
→ 正文内容
图片放大镜效果代码
发布：dxy 字体：[
增加
减小
] 类型：转载
点击运行可以看到效果:
<!-- *** 斩梦人.天天 [原创]分享 *** QQ:22062019 Email:takuma888@126.com *** *** 欢迎大家引用和改进,但希望大家能珍惜作者的劳动,最好能注明出处. *** 由于浏览器兼容性的问题,在FF和OP下表现不是很理想,没能完善,还请见谅. //--> <script language="JavaScript"> <!-- var srcX = 1024; //原图长宽 var srcY = 768; var bigX = 500; //原比例预览大小,可以设置成任意大小 var bigY = 300; var smallX = 256; //缩略图大小,要与原大小成比例 var smallY = 192; var viewX = bigX / srcX * smallX; //预览范围 var viewY = bigY / srcY * smallY; var bl = srcX / smallX;//缩小比例 var border = 8; //边框 window.onload=function (){ bigbox.style.borderWidth=border; bigbox.style.width=bigX+border*2; bigbox.style.height=bigY+border*2; smallpic.width=smallX; smallpic.height=smallY; view.style.width=viewX; view.style.height=viewY; smallbox.style.borderWidth=border; if (window.event){ smallbox.style.width=smallpic.offsetWidth+border*2; smallbox.style.height=smallpic.offsetHeight+border*2; }else{ smallbox.style.width=smallpic.offsetWidth; smallbox.style.height=smallpic.offsetHeight; } move(event); } function move(e){ var e = window.event?window.event:e; var iebug = 0; if (window.event){ var vX = e.offsetX - viewX/2; var vY = e.offsetY - viewY/2; }else{ var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border; var vY = e.pageY - viewY/2 - smallbox.offsetTop - border; iebug = 2; } if (vX < 0) vX = 0; if (vY < 0) vY = 0; if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug; if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug; view.style.left = vX + smallbox.offsetLeft + border; view.style.top = vY + smallbox.offsetTop + border; bigbox.style.backgroundPosition= - vX * bl + " " + -vY * bl; } //--> </script> <style type="text/css"> <!-- *{padding:0;margin:0} img{display:block;} #smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden} #bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;background:url('/upload/20071130224657571.jpg') no-repeat;} #view{border:1px #ddd solid;width:0px;height:0px;position:absolute} .head{text-align:center;line-height:40px;font:bold 16px/40px;color:red} //--> </style> <div class="head">图片放大效果</div> <div id="smallbox"><img id="smallpic" src="/upload/20071130224657571.jpg" border="0" onmousemove="move(event)"></div> <div id="bigbox"></div> <div id="view"></div>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
Tags：
图片
放大镜
效果
百度中搜索更多的关于
图片放大镜效果代码
内容，或者
用Google搜索相关更多
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
css图片自适应大小
下一篇文章：
javascript双向放大缩小广告代码
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
图片向上滚动
鼠标移动到一张图片时变为另一张图片
javascript入门·图片对象(无刷新变换
鼠标图片振动代码
js实现图片等比缩略显示 支持IE/FF
又一个图片自动缩小的JS代码
用javascript实现旋转图片效果的代码
用javascript实现的图片马赛克后显示并切
3张图片循环组和(很有动感)
從博客網扣了一個效果出來
最 近 更 新
比较不错的一款图片广告效果
鼠标图片振动代码
js实现图片显示局部，鼠标经过显示全部的
js实现用滚动条来放大缩小图片的代码
多图展示点击切换效果模拟的flash效果，点
用javascript制作放大镜放大图片
又一个小巧的图片预加载类
用dom+xhtml+css制作的一个相册效果代码打
js与自动伸缩图片 自动缩小图片的多浏览器
新页面打开实际尺寸的图片
热 点 排 行
真正的连续滚动图片
推荐一个不错的图片浏览效果
左右图片循环滚动停顿一下后继续
ＪＳ＋ＦＬＡＳＨ幻灯片播放图片
多图展示点击切换效果模拟的flas
奇妙的Javascript图片放大镜
纯js无flash仿搜狐女人频道FLASH
图片向上滚动
一个已封装好的漂亮进度条
JS实现全景图效果360度旋转
文章评论
共有 位脚本之家网友发表了评论我来说两句