您正在使用 IPV4 [18.118.0.240] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】2核2G4M云服务器新老同享99元/年,续费同价      
[公益] 地球是我家,绿化靠大家      
2024年 劳动节 002
2024年 端午节 042
2025年 元 旦 247
2025年 春 节 275
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
鼠标滑上去后图片放大浮出效果的js代码
内容摘要: scriptfunctionGetAbsPosition(obj){varcurleft=0,curtop=0;do{curleft+=obj.offsetLeft;curtop+=obj.offsetTop;}while(obj=obj.offsetParent);return[curleft,curtop];}functionShowFloatingIm......
<script>

functionGetAbsPosition(obj)

{

varcurleft=0,curtop=0;

do{

curleft+=obj.offsetLeft;

curtop+=obj.offsetTop;

}while(obj=obj.offsetParent);

return[curleft,curtop];

}

functionShowFloatingImage(image,width,height)

{

varid="trailimageid";

varnewdiv=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='<imgsrc='+image.src+'width='+(image.width+width)+'height='+(image.height+height)+'/>';

varabsPos=GetAbsPosition(image);

newdiv.style.position="absolute";

newdiv.style.posLeft=absPos[0]-width/2;

newdiv.style.posTop=absPos[1]-height/2;

newdiv.style.display="block";

}

functionHideElement(id)

{

varelem=document.getElementById(id);

elem.style.display="none";

}

</script>

例子:

代码如下:

<body>

<imgsrc="1.jpg"width="300"height="300"onmouseover="ShowFloatingImage(this,150,150);"/>

</body>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:纯CSS实现导航栏下划线跟随的示例代码

 

下一篇:CSS3调整背景图片大小的操作代码

发布日期:2024/1/16
手机扫二维码直达本页
发布时间:11:04:12
点  击:23
录  入:齐天大圣
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,奇安信网站卫士提供加速防护
运行时间载入中.....