1左側或者右側的懸浮廣告。
css樣式：
*{padding: 0;margin: 0;}.fl{float:left;display: inline;}.fr{float: right;display: inline;}.clearfix{*zoom: 1;}.clearfix:after{ display: block; content: ""; height: 0;line-height: 0;visibility: hidden; clear: both;}/*tab 切換*/.tab_title{ line-height: 30px; border-bottom: 1px solid #ccc; width: 360px;margin: 0 auto;}.tab_title a{ display: inline-block; font-size: 16px;color: #333; text-decoration: none; margin-right: 20px;}.tab_title a.active{color: red;}.tab_content{width: 340px; padding:5px 10px;margin: 0 auto; border: 1px solid #ccc; height: 120px;}/*文字滾動*/.moveScroll{ width: 360px; height: 120px; border: 1px solid #ccc; margin: 50px auto;}.moveparent{ width: 330px;height: 90px;overflow: hidden; margin:15px auto;}.moveScroll .content{ color: #333; }/*文本輸入框*/.inputText{ width: 320px; padding:10px; line-height: 22px;margin: 10px auto;display: block;color: #999;}/*幻燈片*/.wrapper {width: 324px;height: 325px;_height: 321px;position: relative;z-index: 1;margin: 20PX auto;}.wrapper .main {width: 324px;height: 222px;overflow: hidden;}.wrapper li {float: left;display: inline;}.wrapper ul img {width: 324px;height: 222px;position: relative;z-index: 1;}.wrapper ul span {position: absolute;display: block;text-align: center;width: 324px;height: 20px;overflow: hidden;bottom: 10px;left: 0;}.wrapper ol {margin-right: -4px;height: 58px;*zoom: 1;}.wrapper ol:after {display: block;content: "";line-height: 0;height: 0;visibility: hidden;clear: both;}.wrapper ol img {width: 78px;height: 52px;margin: 6px 4px 0 0;}.wrapper ol li {opacity: 0.5;filter: alpha(opacity=50);cursor: pointer;}.wrapper ol .active {opacity: 1;filter: alpha(opacity=100);} html代碼：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>簡jQuery左右對稱浮動廣告代碼</title><link rel="stylesheet" href="css/style.css" /></head><body><div style="height:2000px;"></div><!-- 代碼部分begin --><div id="floatright" style="position: absolute; z-index: 10; "></div><script src="js/jquery.js" ></script><script src="js/floatAd.js" ></script><script>window.onload = function(){var ad2 = new FloatAd({nodeLink : "<a href='廣告連接地址'><img src='廣告圖片' border=0 /></a>" ,floatObj : "floatleft",x : 10,y : 400,locate : "left"});ad2.play();}</script><!-- 代碼部分end --></body></html> js文件除引入jquery外(要問我jquery是什么，請出門左轉)還需要：
var FloatAd = function(obj){var mainNode = $("." + obj.main)[0];if(obj.nodeLink && (typeof obj.nodeLink == "string")){var newFloatObj = document.createElement("div");newFloatObj.id = obj.floatObj;newFloatObj.style.position = "absolute";newFloatObj.style.zIndex = 10;newFloatObj.innerHTML = obj.nodeLink;document.body.appendChild(newFloatObj);}this.ad = document.getElementById(obj.floatObj);this.main = document.getElementById(obj.main)||mainNode;this.x = obj.x;this.y = obj.y;this.locate = obj.locate;this.space = obj.space;var that = this;this.play = function(){setInterval(function(){that.calculate();},10);};}FloatAd.prototype = {constructor : FloatAd,calculate : function(){var obj_x = this.x,obj_y = this.y,main_offsetLeft = document.documentElement.scrollLeft||document.body.scrollLeft,main_offsetTop = document.documentElement.scrollTop||document.body.scrollTop;if(this.main){if(this.locate == "left"){obj_x = this.main.offsetLeft - this.ad.offsetWidth - this.space;}else if(this.locate == "right"){obj_x = this.main.offsetLeft + this.main.offsetWidth + this.space;}if(this.ad.offsetLeft != main_offsetLeft + obj_x){var dx = (main_offsetLeft + obj_x - this.ad.offsetLeft)*0.08;dx = (dx > 0 ? 1 : -1)*Math.ceil(Math.abs(dx));this.ad.style.left = this.ad.offsetLeft + dx + "px";} }else{if(this.locate == "left"){this.ad.style.left = obj_x + "px";}else if(this.locate == "right"){this.ad.style.right = obj_x +"px";}}if(this.ad.offsetTop != main_offsetTop + obj_y){var dy = (main_offsetTop + obj_y - this.ad.offsetTop)*0.08;dy = (dy > 0 ? 1 : -1)*Math.ceil(Math.abs(dy));this.ad.style.top = this.ad.offsetTop + dy + "px";}}}這是自己在用到這種效果的時候整理出來的，copy網上的案例，進行整理，方便大家使用。
2 全屏漂浮案例：飄窗！
css文件：
#img1{z-index: 100;left: 2px;width: 59px;position: absolute;top: 43px;height: 61px;visibility: visible;} html文件
<html><head><title>漂浮廣告</title></head><link rel="stylesheet" href="floatImg.css"/><body><div id=img1><a href="廣告鏈接地址" target="_blank"><img src="廣告圖片"></a></div></body><script src="鏈接js"></script></html>
js代碼：
var xPos = 300;var yPos = 200;var step = 1;var delay = 30;var height = 0;var Hoffset = 0;var Woffset = 0;var yon = 0;var xon = 0;var pause = true;var interval;img1.style.top = yPos;function changePos(){width = document.body.clientWidth;height = document.body.clientHeight;Hoffset = img1.offsetHeight;Woffset = img1.offsetWidth;img1.style.left = xPos + document.body.scrollLeft;img1.style.top = yPos + document.body.scrollTop;if (yon){yPos = yPos + step;}else{yPos = yPos - step;}if (yPos < 0){yon = 1;yPos = 0;}if (yPos >= (height - Hoffset)){yon = 0;yPos = (height - Hoffset);}if (xon){xPos = xPos + step;}else{xPos = xPos - step;}if (xPos < 0){xon = 1;xPos = 0;}if (xPos >= (width - Woffset)){xon = 0;xPos = (width - Woffset); }}function start(){img1.visibility = "visible";interval = setInterval('changePos()', delay);}function pause_resume(){if(pause){clearInterval(interval);pause = false;}else{interval = setInterval('changePos()',delay);pause = true;}}start();以上內容是小編給大家整理的有關懸浮廣告方法，希望對大家有所幫助！
新聞熱點
疑難解答
