JS浮动层

朋友叫我帮找一个浮动广告层的JS特效代码,在网上找了不少都有错就随手写了一个。点击查看效果

一、把以下代码插入<body></body>标签中:
    <div id="FloatDIV" style="position: absolute;top: 0px; border-right: activeborder 1px solid; border-top: activeborder 1px solid; border-left: activeborder 1px solid; border-bottom: activeborder 1px solid;">
        
&nbsp;浮动层示例:<br />
        
&nbsp; &nbsp; &nbsp; <target="_blank" href="tencent://message/?uin=101535223&Site=http://www.jailusd.com&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:101535223:3" alt="有事您说话"></a>
    
</div>

二、把以下代码插到</body>标签之后,设置MarginLeft、MarginTop、Width、Heigth四个变量的值
<script language="javascript" type="text/javascript">
var MarginLeft = 30;   //浮动层离浏览器右侧的距离
var MarginTop = 50;     //浮动层离浏览器顶部的距离
var Width = 120;        //浮动层宽度
var Heigth= 45;        //浮动层高度

//设置浮动层宽、高
function Set()
{
    document.getElementById(
"FloatDIV").style.width = Width;
    document.getElementById(
"FloatDIV").style.height = Heigth;
}


//实时设置浮动层的位置
function Move()
{
    document.getElementById(
"FloatDIV").style.top = document.documentElement.scrollTop + MarginTop;
    document.getElementById(
"FloatDIV").style.left = document.documentElement.clientWidth - Width - MarginLeft;
    setTimeout(
"Move();",100);
}


Set();
Move();
</script>
posted @   Jailu  阅读(15599)  评论(5编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示