悬浮广告方法日常收集整理

2019-11-20 10:22:35

字体：大中小

来源：转载

供稿：网友

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();

以上内容是小编给大家整理的有关悬浮广告方法，希望对大家有所帮助！

上一篇：Javascript的表单与验证-非空验证

下一篇：Js与Jq获取浏览器和对象值的方法