鼠标滑上去后图片放大浮出效果的js代码


Posted in Javascript onMay 28, 2011
<script> 
function GetAbsPosition(obj) 
{ 
var curleft = 0, curtop = 0; 
do { 
curleft += obj.offsetLeft; 
curtop += obj.offsetTop; 
} while (obj = obj.offsetParent); 
return [curleft,curtop]; 
} 
function ShowFloatingImage(image, width, height) 
{ 
var id = "trailimageid"; 
var newdiv = document.getElementById(id); 
if(newdiv == null) 
{ 
newdiv = document.createElement('div'); 
newdiv.setAttribute('id',id); 
newdiv.setAttribute('onmouseout', "HideElement('"+id+"');"); 
document.body.appendChild(newdiv); 
} 
newdiv.innerHTML = '<img src='+image.src+ ' width='+(image.width + width) + ' height=' + (image.height + height) + ' />'; 
var absPos = GetAbsPosition(image); 
newdiv.style.position = "absolute"; 
newdiv.style.posLeft = absPos[0] - width/2; 
newdiv.style.posTop = absPos[1] - height/2; 
newdiv.style.display="block"; 
} 
function HideElement(id) 
{ 
var elem = document.getElementById(id); 
elem.style.display="none"; 
} 
</script>

例子:
<body> 
<img src="1.jpg" width="300" height="300" onmouseover="ShowFloatingImage(this, 150, 150);" /> 
</body>

经测试事件处理的不是很好。导致鼠标移开不能回到原位。
Javascript 相关文章推荐
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 #Javascript
actionscript与javascript的区别
May 25 #Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 #Javascript
JavaScript EasyPager 分页函数
May 25 #Javascript
浅说js变量
May 25 #Javascript
潜说js对象和数组
May 25 #Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 #Javascript
You might like
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
使用Angular CLI生成路由的方法
2018/03/24 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
python实现读Excel写入.txt的方法
2018/04/29 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
python 内置函数汇总详解
2019/09/16 Python
基于Python解密仿射密码
2019/10/21 Python
Python调用Windows命令打印文件
2020/02/07 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
Python如何转换字符串大小写
2020/06/04 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
大课间体育活动方案
2014/03/12 职场文书
农业生产宣传标语
2014/10/08 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
办公用品质量保证书
2015/05/11 职场文书
心理健康教育主题班会
2015/08/13 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python
JavaScript中isPrototypeOf函数
2021/11/07 Javascript