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

Javascript
javascript function、指针及内置对象
Javascript 同时提交多个Web表单的方法
用jQuery简化JavaScript开发分析
Javascript静态分页(多个资料,静态自动分页)
JavaScript 调试器简介
JavaScript 判断浏览器类型及版本
javascript eval函数深入认识
一个写得较好的JavaScript日期挑选控件
JavaScript基本概念初级讲解论坛贴的学习记录
javascript web对话框与弹出窗口
input、button的不同type值在ajax提交表单时导致的陷阱
javascript 密码强弱度检测万能插件
javascript 特殊字符串
Javascript动态伸缩+淡出淡入
javascript URL锚点取值方法
jQuery Div中加载其他页面的实现代码
javascript 文档的编码问题解决
escape、encodeURI 和 encodeURIComponent 的区别
[推荐]javascript 面向对象技术基础教程
js 页面执行时间计算代码

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 272 ::
收藏到网摘: 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 全选 提示:你可先修改部分代码,再按运行]