鼠标滑上去后图片放大浮出效果的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 相关文章推荐
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
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
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
js判断是否是手机页面
2017/03/17 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
Python深入学习之闭包
2014/08/31 Python
Python入门篇之对象类型
2014/10/17 Python
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
Flask数据库迁移简单介绍
2017/10/24 Python
python3实现点餐系统
2019/01/24 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
Django中modelform组件实例用法总结
2020/02/10 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
大专生自我鉴定范文
2013/10/01 职场文书
文秘求职信范文
2014/04/10 职场文书
解除劳动合同协议书
2014/04/14 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
法人授权委托书样本
2014/09/19 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript