网站之漂浮广告制作--前端

今天根据客户要求,需要在门户网站做一个会随机漂浮的小广告。码农的本能来了·······

一、代码:

(1)js

  1 <!--//公共脚本文件 main.js
  2 function addEvent(obj, evtType, func, cap) {
  3     cap = cap || false;
  4     if (obj.addEventListener) {
  5         obj.addEventListener(evtType, func, cap);
  6         return true;
  7     } else if (obj.attachEvent) {
  8         if (cap) {
  9             obj.setCapture();
 10             return true;
 11         } else {
 12             return obj.attachEvent("on" + evtType, func);
 13         }
 14     } else {
 15         return false;
 16     }
 17 }
 18 function removeEvent(obj, evtType, func, cap) {
 19     cap = cap || false;
 20     if (obj.removeEventListener) {
 21         obj.removeEventListener(evtType, func, cap);
 22         return true;
 23     } else if (obj.detachEvent) {
 24         if (cap) {
 25             obj.releaseCapture();
 26             return true;
 27         } else {
 28             return obj.detachEvent("on" + evtType, func);
 29         }
 30     } else {
 31         return false;
 32     }
 33 }
 34 function getPageScroll() {
 35     var xScroll, yScroll;
 36     if (self.pageXOffset) {
 37         xScroll = self.pageXOffset;
 38     } else if (document.documentElement && document.documentElement.scrollLeft) {
 39         xScroll = document.documentElement.scrollLeft;
 40     } else if (document.body) {
 41         xScroll = document.body.scrollLeft;
 42     }
 43     if (self.pageYOffset) {
 44         yScroll = self.pageYOffset;
 45     } else if (document.documentElement && document.documentElement.scrollTop) {
 46         yScroll = document.documentElement.scrollTop;
 47     } else if (document.body) {
 48         yScroll = document.body.scrollTop;
 49     }
 50     arrayPageScroll = new Array(xScroll, yScroll);
 51     return arrayPageScroll;
 52 }
 53 function GetPageSize() {
 54     var xScroll, yScroll;
 55     if (window.innerHeight && window.scrollMaxY) {
 56         xScroll = document.body.scrollWidth;
 57         yScroll = window.innerHeight + window.scrollMaxY;
 58     } else if (document.body.scrollHeight > document.body.offsetHeight) {
 59         xScroll = document.body.scrollWidth;
 60         yScroll = document.body.scrollHeight;
 61     } else {
 62         xScroll = document.body.offsetWidth;
 63         yScroll = document.body.offsetHeight;
 64     }
 65     var windowWidth, windowHeight;
 66     if (self.innerHeight) {
 67         windowWidth = self.innerWidth;
 68         windowHeight = self.innerHeight;
 69     } else if (document.documentElement && document.documentElement.clientHeight) {
 70         windowWidth = document.documentElement.clientWidth;
 71         windowHeight = document.documentElement.clientHeight;
 72     } else if (document.body) {
 73         windowWidth = document.body.clientWidth;
 74         windowHeight = document.body.clientHeight;
 75     }
 76     if (yScroll < windowHeight) {
 77         pageHeight = windowHeight;
 78     } else {
 79         pageHeight = yScroll;
 80     }
 81     if (xScroll < windowWidth) {
 82         pageWidth = windowWidth;
 83     } else {
 84         pageWidth = xScroll;
 85     }
 86     arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight)
 87     return arrayPageSize;
 88 }
 89 //广告脚本文件 AdMove.js
 90 /*
 91 例子
 92 <div id="Div2">
 93 ***** content ******
 94 </div>
 95 var ad=new AdMove("Div2");
 96 ad.Run();
 97 */
 98 ////////////////////////////////////////////////////////
 99 var AdMoveConfig = new Object();
100 AdMoveConfig.IsInitialized = false;
101 AdMoveConfig.AdCount = 0;
102 AdMoveConfig.ScrollX = 0;
103 AdMoveConfig.ScrollY = 0;
104 AdMoveConfig.MoveWidth = 0;
105 AdMoveConfig.MoveHeight = 0;
106 AdMoveConfig.Resize = function () {
107     var winsize = GetPageSize();
108     AdMoveConfig.MoveWidth = winsize[2];
109     AdMoveConfig.MoveHeight = winsize[3];
110     AdMoveConfig.Scroll();
111 }
112 AdMoveConfig.Scroll = function () {
113     var winscroll = getPageScroll();
114     AdMoveConfig.ScrollX = winscroll[0];
115     AdMoveConfig.ScrollY = winscroll[1];
116 }
117 addEvent(window, "resize", AdMoveConfig.Resize);
118 addEvent(window, "scroll", AdMoveConfig.Scroll);
119 function AdMove(id, addCloseButton) {
120     if (!AdMoveConfig.IsInitialized) {
121         AdMoveConfig.Resize();
122         AdMoveConfig.IsInitialized = true;
123     }
124     AdMoveConfig.AdCount++;
125     var obj = document.getElementById(id);
126     obj.style.position = "absolute";
127     var W = AdMoveConfig.MoveWidth - obj.offsetWidth;
128     var H = AdMoveConfig.MoveHeight - obj.offsetHeight;
129     var x = W * Math.random(), y = H * Math.random();
130     var rad = (Math.random() + 1) * Math.PI / 6;
131     var kx = Math.sin(rad), ky = Math.cos(rad);
132     var dirx = (Math.random() < 0.5 ? 1 : -1), diry = (Math.random() < 0.5 ? 1 : -1);
133     var step = 1;
134     var interval;
135     if (addCloseButton) {
136         var closebtn = document.createElement("div");
137         obj.appendChild(closebtn);
138
139         closebtn.onclick = function () {
140             obj.style.display = "none";
141             clearInterval(interval);
142             closebtn.onclick = null;
143             obj.onmouseover = null;
144             obj.onmouseout = null;
145             obj.MoveHandler = null;
146             AdMoveConfig.AdCount--;
147             if (AdMoveConfig.AdCount <= 0) {
148                 removeEvent(window, "resize", AdMoveConfig.Resize);
149                 removeEvent(window, "scroll", AdMoveConfig.Scroll);
150                 AdMoveConfig.Resize = null;
151                 AdMoveConfig.Scroll = null;
152                 AdMoveConfig = null;
153             }
154         }
155     }
156     obj.MoveHandler = function () {
157         obj.style.left = (x + AdMoveConfig.ScrollX) + "px";
158         obj.style.top = (y + AdMoveConfig.ScrollY) + "px";
159         rad = (Math.random() + 1) * Math.PI / 6;
160         W = AdMoveConfig.MoveWidth - obj.offsetWidth;
161         H = AdMoveConfig.MoveHeight - obj.offsetHeight;
162         x = x + step * kx * dirx;
163         if (x < 0) { dirx = 1; x = 0; kx = Math.sin(rad); ky = Math.cos(rad); }
164         if (x > W) { dirx = -1; x = W; kx = Math.sin(rad); ky = Math.cos(rad); }
165         y = y + step * ky * diry;
166         if (y < 0) { diry = 1; y = 0; kx = Math.sin(rad); ky = Math.cos(rad); }
167         if (y > H) { diry = -1; y = H; kx = Math.sin(rad); ky = Math.cos(rad); }
168     }
169     this.SetLocation = function (vx, vy) { x = vx; y = vy; }
170     this.SetDirection = function (vx, vy) { dirx = vx; diry = vy; }
171     this.Run = function () {
172         var delay = 10;
173         interval = setInterval(obj.MoveHandler, delay);
174         obj.onmouseover = function () { clearInterval(interval); }
175         obj.onmouseout = function () { interval = setInterval(obj.MoveHandler, delay); }
176     }
177 }
178 //-->

(2)页面

 1 <!--广告漂浮-->
 2     <script src="../../Scripts/sysMgrJs/floatadv.js" type="text/javascript"></script>
 3     <script type="text/javascript">
 4         $(function () {
 5             var guangGao = function () {
 6                 this.initCloseClick = function () {
 7                     $("#closepiaofu").click(function () {
 8                         $("#wzsse").hide();
 9                     });
10                 };
11                 this.initMove = function () {
12                     var ad1 = new AdMove("wzsse", true);
13                     ad1.Run();
14                 };
15                 this.init = function () {
16                     this.initCloseClick();
17                     this.initMove();
18                 };
19                 this.init();
20             };
21             guangGao();
22         })
23     </script>
24    <div id="wzsse">
25         <div class="guanggao-head"> 热点咨询
26             <div id="closepiaofu">
27                 关闭</div>
28         </div>
29         <div id="guanggao-content-list">
30
31         </div>
32         <div class="more-guanggao-div"><label id="more-guanggao"><a href="../Hotquestion/Index">更多>></a></label></div>
33     </div>

(3)CSS

 1 /*******广告 漂浮**********/
 2 #wzsse
 3 {
 4    position: absolute;
 5    z-index:99999999;
 6    border:1px solid #1f6bdf;
 7 }
 8 .guanggao-head
 9 {
10     position:relative;
11     bottom:0px;
12     height:25px;
13     line-height:25px;
14     vertical-align:middle;
15     background:#1f6bdf;
16     font-size:15px;
17     font-family:@宋体;
18     font-weight:normal;
19     padding-left:5px;
20     color:#a8c9ea;
21 }
22 #closepiaofu
23 {
24     position:absolute;
25     width:40px;
26     top:0px;
27     right:1px;
28     text-align:center;
29     font-size:12px;
30     font-family:@宋体;
31     font-weight:normal;
32     color:#fff;
33     cursor:pointer;
34 }
35 #guanggao-content-list
36 {
37     position:relative;
38     width:220px;
39     height:220px;
40     background:#fff;
41 }
42 .more-guanggao-div
43 {
44     background:#fff;
45 }
46 #more-guanggao
47 {
48     margin-left:170px;
49     font-size:12px;
50 }
51 #more-guanggao a
52 {
53     color:#8ba1aa;
54 }

二、效果

网站之漂浮广告制作--前端

时间: 2024-10-13 05:07:25

网站之漂浮广告制作--前端的相关文章

固定网站 底部 漂浮广告

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

大型网站制作前端使用PHP后台逻辑用 Java

对于网站团队,大概可以按照职责分为前端.后端.架构三种角色. 前端:负责所有和用户有交互的产品,包括 WEB以及手机客户端 后端:负责各种业务 API 的开发,以及服务器端其他系统的开发 架构:负责设计实现关键系统的架构,服务器维护以及开发过程管理,团队建设 前端之所以采用PHP,在于它灵活,上手快,易修改,发布快捷,缺点是容易犯错(常见如拼写错误.SQL注入.上传执行等).执行效率不高.缺乏全局缓存. 后端之所以采用Java,在于它稳定可靠.运行效率高(尤其是JIT的出现之后差距更大了).不容

WordPress 网站添加弹窗广告代码

我们平时访问网站.博客时经常会打开网页后看到弹出一个图片广告.如果作为普通访客可能会略有抵触,但是作为站长,我们却十分需要这样的广告来为网站赚钱贴补一下服务器维护费用. 1.修改 JavaScript 代码: var popup = document.getElementById('qgg_popup'); var popup_box = document.querySelector('.qgg_popup_box'); var popup_close = document.querySelec

JS带关闭按钮的网页漂浮广告代码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>带关闭按钮的网页漂浮广告代码</title> </head> <body> <div id="img" style="position: absolute; left: 

JavaScript浮动广告代码,容纯DIV/CSS对联漂浮广告代码,兼容性非常好的js右下角与漂浮广告代码

基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂浮效果就会失效,下面分享一个符合标准的漂浮代码,使需要的朋友免去大量改造代码的繁琐. 代码一: 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name

为网站加入Drupal星球制作RSS订阅源

目前中文 Drupal 星球的版块还未成立,但大家的积极性挺高,不少站长都已经调整好自己的网站,生成了可供Drupal Planet 使用的RSS订阅源. 如果你也想让网站做好准备,可以不必再花上不少的时间去了解要求和流程,只需要跟着本文了解相关规则.完成几步相关的操作就好了.(Drupal Planet 的官方要求和说明可参见:Planet Drupal guidelines) 制作RSS订阅源:为需要加入Drupal Planet 的内容生成独立的RSS 订阅源(路径可自定义,确保订阅源中的

网页特效”漂浮广告代码”来回跳动的

<div id="ad" style="position:absolute"><a href="http://www.scshlx.com/wayne173" target="_blank"><img src="http://www.hxlysw.com/images/adminlogo.gif" border="0"></a></d

Jquery漂浮广告、客服代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

常用网页漂浮广告代码

<body bgcolor="#F7F7F7"><!--图片漂浮广告代码开始--><div id="www_qpsh_com" style="position:absolute"><!--链接地址--><a href="http://www.balidaoyou.cn" _fcksavedurl="/" target="_blank"