今天根据客户要求,需要在门户网站做一个会随机漂浮的小广告。码农的本能来了·······
一、代码:
(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