当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一个跟随鼠标的图片放大效果,与FF兼容

Javascript
地震发生中逃生十大法则
引用文章链接代码复制自动加链接功能
javascript用层模拟可移动的小窗口
模仿动画的放大缩小容器
li隔行换色效果代码升级版
li隔行换色改进版
弹出提示的效果代码
直接生成打开窗口代码,不必下载
yahoo首页伸缩效果代码
js模拟QQ窗口的抖动效果
Dom加载让图片加载完再执行的脚本代码
js下拉框里超过变成省略号
Javascript模块模式分析
用函数式编程技术编写优美的 JavaScript_ibm
比较不错的函数式JavaScript编程指南教程
javascript程序优化问题
认识延迟时间为0的setTimeout
JavaScript的9个陷阱及评点分析
显示服务器时间的在线时钟代码简单
js几个广告轮换广告代码

Javascript 中的 一个跟随鼠标的图片放大效果,与FF兼容


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 311 ::
收藏到网摘: n/a

<div align=center style="overfow: hidden; width: 100px; height: 100px"><img src="/upload/tech/20091012/20091012084928_4ea06fbc83cdd0a06020c35d50e1e89a.jpg" width="100" height="100" border="0" onmouseover="show(this)" onmouseout="hide(this)">
</div>
<div align=center style="overfow: hidden; width: 100px; height: 100px">
<img src="/upload/tech/20091012/20091012084928_37693cfc748049e45d87b8c7d8b9aacd.jpg" width="100" height="100" border="0" onmouseover="show(this)" onmouseout="hide(this)">
</div>
<div align=center style="overfow: hidden; width: 100px; height: 100px">
<img src="/upload/tech/20091012/20091012084934_437d7d1d97917cd627a34a6a0fb41136.jpg" width="100" height="100" border="0" onmouseover="show(this)" onmouseout="hide(this)">
</div>
<div id="enlarge_images" style="position: absolute; z-index:2"></div>
<SCRIPT>
function show(_this) {
document.getElementById("enlarge_images").innerHTML = "<img src='" + _this.src + "' >";
}
function hide(_this) {
document.getElementById("enlarge_images").innerHTML = "";
}
function move_layer(event){
event = event || window.event;
enlarge_images.style.left=event.clientX+document.body.scrollLeft+10;
enlarge_images.style.top=event.clientY+document.body.scrollTop+10;
}
document.onmousemove =move_layer;
</SCRIPT>

点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]