预览效果:http://www.365css.cn/exemple/duilian.html
全部源码如下:

代码

<html>
<head>
<title>JavaScript网页特效---对联广告</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body style="margin:0px;">
<div align="center">
  <center>
  <table border="1" width="776" height="3000" cellspacing="0" cellpadding="0">
    <tr>
      <td width="100%" valign="top">
 <div align="center" style="color:green;font-size:23pt;font-family:黑体;"><br><br>页<br>面<br>区<br>域</div>
      </td>
    </tr>
  </table>
  </center>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var showad = true;
var Toppx = 60;  //上端位置
var AdDivW = 100; //宽度
var AdDivH = 360; //高度
var PageWidth = 800; //页面多少宽度象素下正好不出现左右滚动条
var MinScreenW = 1024; //显示广告的最小屏幕宽度象素

var ClosebuttonHtml = '<div align="right" style="position: absolute;top:0px;right:0px;margin:2px;padding:2px;z-index:2000;"><a href="javascript:;" οnclick="hidead()" style="color:red;text-decoration:none;font-size:12px;">关闭</a></div>'
var AdContentHtml = '<div align="center" style="color:green;font-size:23pt;font-family:黑体;"><br><br>广<br>告<br>内<br>容</div>';
document.write ('<div id="Javascript.LeftDiv" style="position: absolute;border: 1px solid #336699;background-color:#EEEEE2;z-index:1000;width:'+AdDivW+'px;height:'+AdDivH+'px;top:-1000px;word-break:break-all;display:none;">'+ClosebuttonHtml+'<div>'+AdContentHtml+'</div></div>');
document.write ('<div id="Javascript.RightDiv" style="position: absolute;border: 1px solid #336699;background-color:#EEEEE2;z-index:1000;width:'+AdDivW+'px;height:'+AdDivH+'px;top:-1000px;word-break:break-all;display:none;">'+ClosebuttonHtml+'<div>'+AdContentHtml+'</div></div>');
function scall(){
 if(!showad){return;}
 if (window.screen.width<MinScreenW){
  alert("临时提示:\n\n显示器分辨率宽度小于"+MinScreenW+",不显示广告");
  showad = false;
  document.getElementById("Javascript.LeftDiv").style.display="none";
  document.getElementById("Javascript.RightDiv").style.display="none";
  return;
 }
 var Borderpx = ((window.screen.width-PageWidth)/2-AdDivW)/2;

document.getElementById("Javascript.LeftDiv").style.display="";
 document.getElementById("Javascript.LeftDiv").style.top=document.body.scrollTop+Toppx;
 document.getElementById("Javascript.LeftDiv").style.left=document.body.scrollLeft+Borderpx;
 document.getElementById("Javascript.RightDiv").style.display="";
 document.getElementById("Javascript.RightDiv").style.top=document.body.scrollTop+Toppx;
 document.getElementById("Javascript.RightDiv").style.left=document.body.scrollLeft+document.body.clientWidth-document.getElementById("Javascript.RightDiv").offsetWidth-Borderpx;
}

function hidead()
{
 showad = false;
 document.getElementById("Javascript.LeftDiv").style.display="none";
 document.getElementById("Javascript.RightDiv").style.display="none";
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
//-->
</SCRIPT>
</body>
</html>

转载于:https://www.cnblogs.com/xiaochaohuashengmi/archive/2011/01/20/1940404.html

JavaScript网页特效---对联广告,网站对联广告相关推荐

  1. 《JavaScript网页特效经典300例》

    <JavaScript网页特效经典300例> 基本信息 作者: 杨磊    张志美 丛书名: 百炼成钢系列丛书 出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...

  2. php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果,看了javascript网页特效实例大全 - phpStudy...

    使用javascript实现雪花飘落的效果 看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...

  3. HTML5期末大作业:漫画网站设计——海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 计算机毕设网页设计源码

    HTML5期末大作业:漫画网站设计--海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 计算机毕设网页设计源码 常见网页设计作业题材有 个 ...

  4. web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例 企业网站制作...

    web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例 企业网站制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...

  5. JavaScript网页特效-限时秒杀

    限时秒杀是网络商家在某一预定的时间里,大幅度降低活动商品的价格,买家只要在这个时间里成功拍得此商品,便可以用超低的价格买到原本很昂贵的物品的一种营销活动.限时秒杀短时效的限定会给予用户更强烈的紧迫感, ...

  6. JavaScript网页特效-“渔夫打鱼晒网”程序设计

    程序设计时,把可能需要反复执行的代码封装为函数,然后在需要执行该段代码功能的地方进行调用,这样不仅可以实现代码的复用,更重要的是可以保证代码的一致性,只需要修改该函数代码,则所有调用位置均得到体现.同 ...

  7. 关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例 企业网站制作...

    关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例 企业网站制作 临近期末, 你还在为HTML网页设计结课 ...

  8. JavaScript网页特效-“扫雷”游戏随机布雷功能

    "扫雷"游戏是一款经典益智小游戏.游戏目标是在最短的时间内找出所有非雷格子,同时避免踩雷,踩到一个雷即全盘皆输.本节介绍"扫雷"游戏随机布雷功能的设计与实现. ...

  9. JavaScript网页特效-浮现社会主义核心价值观文字动画效果

    1.案例呈现 用户在页面单击鼠标左键,页面浮现"富强"."民主"."文明"."和谐"."自由".&q ...

  10. web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例 企业网站制作

    web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例 企业网站制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...

最新文章

  1. 随办 企业打造完美执行团队的终极利器
  2. 【机器学习】一文速览机器学习的类别(Python代码)
  3. 电为啥要分交流、直流?
  4. 戴毅茹同济matlab,Stateflow系统建模(全)解读.pptx
  5. 上海电子信息职业技术学院计算机网络技术,上海电子信息职业技术学院计算机网络技术专业...
  6. 图片标注工具LabelImg使用教程
  7. 大华流媒体服务器连接显示器,如何从海康平台上拉流接入RTSP安防网络摄像头/海康大华硬盘录像机网页无插件直播流媒体服务器EasyNVR?...
  8. springboot接口慢_Springboot tomcat 启动慢 响应时间超长 问题解决
  9. Winform常用控件的使用(一)
  10. 文化传媒婚纱摄影类网站织梦模板免费下载
  11. MySQL篇之授权用户可以远程访问数据库
  12. C++ map通过key获取value
  13. 根据用户的不同登录不同的页面
  14. 荣耀V40用机技巧有哪些
  15. 软件的安全性应从哪几个方面去测试?
  16. 7 125 kHz RFID技术
  17. Oracle11g下载
  18. 在阿里云CentOS7上搭建ftp服务器
  19. 谈一谈Java中的“静态”
  20. 计算机控制的按钮,电脑键盘上的按钮分别都是什么键?

热门文章

  1. 如何从Mac删除Bing重定向
  2. 多功能笔记工具Notability创建甜甜圈图案的趣味教程
  3. Docker 开篇 1 | 树莓派中搭建Docker
  4. 中兴2018年上半年业绩惨不忍睹,押宝5G建设能否让其起死回生?
  5. 解决UnicodeEncodeError: 'ascii' codec can't encode characters in position 问题(转)
  6. SQL Server 2008数据库快照技术(八)
  7. xmlhttp上传文件(转贴)
  8. Sigar libsigar-amd64-linux.so
  9. Java 8 中的 CompletableFuture 太好用了!20 个示例全分享…
  10. Redis 如何存储上亿级别的用户状态?