您好,欢迎访问一九零五行业门户网

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

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代码:
简jquery左右对称浮动广告代码
,floatobj : floatleft,x : 10,y : 400,locate : left});ad2.play();}
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文件
漂浮广告

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 = (height - hoffset)){yon = 0;ypos = (height - hoffset);}if (xon){xpos = xpos + step;}else{xpos = xpos - step;}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();
以上内容是小编给大家整理的有关悬浮广告方法,希望对大家有所帮助!
其它类似信息

推荐信息