基于javascript实现右下角浮动广告效果_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

基于javascript实现右下角浮动广告效果_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:21 PM

javascript 右下角广告

本文实例为大家分享了基于javascript实现右下角浮动广告效果，供大家参考，具体内容如下

效果图：

具体代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>右下角广告代码</title>
<script type="text/javascript">
window.onload = getMsg;
window.onresize = resizeDiv;
window.onerror = function(){}
function $(id) {return document.getElementById(id);}
//短信提示使用(asilas添加)
var divT,divL,divW,divH,docH,docW,docST,docSL,objTimer,i = 0;
function getMsg()
{
try{
divT = parseInt($("eMeng").style.top,10); //层top位置
divL = parseInt($("eMeng").style.left,10); //层left位置
divH = parseInt($("eMeng").offsetHeight,10);//层宽
divW = parseInt($("eMeng").offsetWidth,10);//层高
docW = document.documentElement.clientWidth;//窗口宽
docH = document.documentElement.clientHeight;//窗口高
docST=document.documentElement.scrollTop;
docSL=document.documentElement.scrollLeft;
$("eMeng").style.top = parseInt(docST,10) + docH + 10+"px";
$("eMeng").style.left = parseInt(docSL,10) + docW - divW+"px";
$("eMeng").style.visibility="visible";
objTimer = setInterval("moveDiv()",10);
}
catch(e){}
}
function resizeDiv()
{
try{
divH = parseInt($("eMeng").offsetHeight,10);
divW = parseInt($("eMeng").offsetWidth,10);
docW = document.documentElement.clientWidth;
docH = document.documentElement.clientHeight;
$("eMeng").style.top = docH - divH + parseInt(document.documentElement.scrollTop,10)+"px";
$("eMeng").style.left = docW - divW + parseInt(document.documentElement.scrollLeft,10)+"px";
}
catch(e){}
}
function moveDiv()
{
try{
if(parseInt($("eMeng").style.top,10) <= (docH - divH + parseInt(document.documentElement.scrollTop,10)))
{
window.clearInterval(objTimer)
objTimer = setInterval("resizeDiv()",1)
}
divT = parseInt($("eMeng").style.top,10);
$("eMeng").style.top = divT - 1+"px";
}
catch(e){}
}
function closeDiv()
{
$('eMeng').style.visibility='hidden';
if(objTimer) window.clearInterval(objTimer)
}
</script>
<div id="eMeng" style="z-index: 99999; visibility:hidden; left: 0px; width: 252px; position: absolute; top: 0px; height: 213px; background:url(http://image.5fad.com/5/img/ad_bg.gif)">
<div style=" height:28px">
<div style=" width:20px; height:20px; float:right; margin:5px 5px 0 0; cursor:pointer" onclick="closeDiv()"></div>
</div>
<div style="width:225px; height:164px; margin:0 auto;"><a href="http://5.5fad.com/star/pur_detial.aspx&#63;news=138" target="_blank"><img  src="/static/imghw/default1.png"  data-src="http://image.5fad.com/5/ad/ad01.jpg"  class="lazy"    style="max-width:90%"  style="max-width:90%" border="0" / alt="基于javascript实现右下角浮动广告效果_javascript技巧" ></a></div>
</div>
</body>
</html>

登录后复制

希望本文所述对大家学习javascript程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7627

CakePHP 教程

1389

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

140

显示更多

Related knowledge

win11 24H2右下角的评估副本水印怎么去掉? 去除win11右下角评估副本技巧 Jun 01, 2024 pm 09:52 PM

win1124H2如何消除右下角的评估副本文字？我们在使用系统的时候有时候桌面会在右下角的屏幕显示一个透明的水印，那么这个透明的水印要怎么去掉？用户们可以直接的利用第三方软件来进行操作就可以了。下面就让本站来为用户们来仔细的介绍一下消除win1124H2评估副本水印的方法吧。消除win1124H2评估副本水印的方法下载UniversalWatermarkDisabler工具，运行后会显示出当前系统的版本以及水印状态，「Status」中显示「Readyforinstallation」即已经可以去除

360浏览器推荐的广告如何关闭？如何关闭电脑360浏览器推荐的广告？ Mar 14, 2024 am 09:16 AM

　　360浏览器推荐的广告如何关闭？相信很多的用户们都在使用360浏览器，不过这款浏览器有时候会弹出广告，这就使得很多的用户们都十分的苦恼，下面就让本站来为用户们来仔细的介绍一下如何关闭电脑360浏览器推荐的广告吧。　　如何关闭电脑360浏览器推荐的广告？　　方法一：　　1、打开360安全浏览器。　　2、找到右上角“三横杠”标志，点击【设置】。　　3、在弹出的界面左侧任务栏中找到【实验室】，勾选【启用“360热点资讯”功能】即可。　　方法二：　　1、首先双击

WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技

朋友圈广告怎么彻底关掉 Mar 03, 2024 pm 12:31 PM

用户在刷朋友圈的时候会遇到很多的广告，那么广告怎么彻底关掉呢？用户们需要在我的里点击设置，然后找到个人信息与权限，然后点击个性化广告管理，将广告个性化关闭就行。这篇朋友圈广告彻底关掉方法介绍就能告诉大家具体的操作方法，赶紧看看吧！微信使用教程朋友圈广告怎么彻底关掉答：无法彻底关掉，只能关掉个性化推荐具体方法：1、首先点击我，然后找到里面的设置。2、找到个人信息与权限选项。3、点击里面的个性化广告管理功能。4、点击广告个性化右侧的开关，关闭就可以了。怎么关闭广告：1、找到朋友圈里的广告。2、点击右

新版Edge如何关闭广告？屏蔽Edge个性化广告的方法 Mar 14, 2024 am 11:37 AM

　　很多用户更新Edge浏览器之后，发现界面上多了很多的广告，比如新标签页的底部有多个网站的链接还标注广告字样，看起来非常烦人。那有什么办法可以关闭Edge浏览器个性化广告吗？小编在网上查找了很多办法，下面就分享给大家一个关闭广告的小技巧。　　新版Edge如何关闭广告？　　1、打开Edge浏览器。　　2、点击右上角的【•••】。　　3、点击【设置】。　　4、点击【隐私、搜索和服务】。　　5、关闭”个性化你的web体验“右侧的开关，即可关闭微软推送的个性

JavaScript和WebSocket：打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的实时天气预报系统引言：如今，天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展，我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中，我们将学习如何使用JavaScript和WebSocket技术，来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

抖音怎么关闭广告智能推荐 Mar 22, 2024 pm 04:06 PM

在我们平时使用抖音进行娱乐的时候，经常会因为一些莫名奇怪的广告，打扰到我们正在休闲时的体验，让很多用户们都不受其扰，想要关闭这些广告的推荐推送，却不知道究竟该如何操作，那么本站小编就为大家带来这篇教程攻略就将为大家带来这篇详细的内容介绍，希望能帮助到各位有需要的小伙伴们。首先我们先在都有的app设置中，找到了解与管理广告推送的选项然后看到下方的所有与广告相关的开关选项，点击后方的开关进行关闭随后跳出关闭广告确认提示，我们点击确认即可关闭广告

简易JavaScript教程：获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest

See all articles

基于javascript实现右下角浮动广告效果_javascript技巧

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题