源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 44|回复: 26

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

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2011-5-28 00:14:46 | 显示全部楼层 |阅读模式
用javascript做了一个鼠标滑上去后图片放大浮出的效果,大家指正一下。 复制代码 代码如下:
<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>

经测试事件处理的不是很好。导致鼠标移开不能回到原位。
回复

使用道具 举报

2

主题

2万

回帖

67

积分

注册会员

Rank: 2

积分
67
发表于 2022-9-11 08:18:49 | 显示全部楼层
哦哦哦哦哦哦哦哦哦
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

362

积分

中级会员

Rank: 3Rank: 3

积分
362
发表于 2022-9-15 16:10:25 | 显示全部楼层
终于找到了,我擦
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

87

积分

注册会员

Rank: 2

积分
87
发表于 2022-9-16 00:39:26 | 显示全部楼层
先把创新班才能下班才能下班
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

124

积分

注册会员

Rank: 2

积分
124
发表于 2023-1-13 07:17:30 | 显示全部楼层
感谢楼主分享
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-2-4 06:01:13 | 显示全部楼层
来看看!!!
回复 支持 反对

使用道具 举报

29

主题

2万

回帖

194

积分

注册会员

Rank: 2

积分
194
发表于 2023-3-12 01:18:31 | 显示全部楼层
感谢楼主分享
回复 支持 反对

使用道具 举报

7

主题

2万

回帖

398

积分

中级会员

Rank: 3Rank: 3

积分
398
发表于 2023-4-17 23:50:46 | 显示全部楼层
老衲笑纳了
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

182

积分

注册会员

Rank: 2

积分
182
发表于 2023-8-9 19:41:55 | 显示全部楼层
了乐趣了去了去了去了去了
回复 支持 反对

使用道具 举报

2

主题

1万

回帖

146

积分

注册会员

Rank: 2

积分
146
发表于 2023-8-23 13:57:55 | 显示全部楼层
哟哟哟哟哟以偶
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-23 07:07 , Processed in 0.106044 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表