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

2024-05-06 15:00:08

字体：大中小

来源：转载

供稿：网友

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";}}}

上一篇：javascript实现dom元素可拖动

下一篇：简述JavaScript提交表单的方式（Using JavaScript Submit Form）