鼠标滑上去后图片放大浮出效果的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 window.event对象详尽解析
Feb 17 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
JS实现日期加减的方法
Nov 29 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
JS实现的tab页切换效果完整示例
Dec 18 Javascript
Vue自定义全局弹窗组件操作
Aug 11 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
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
PHP实现简易计算器功能
2020/08/28 PHP
Javascript Object.extend
2010/05/18 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
Python文件操作基本流程代码实例
2017/12/11 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
Python 中Operator模块的使用
2021/01/30 Python
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
歌颂祖国的演讲稿
2014/05/04 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis