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


Posted in Javascript onMarch 18, 2016

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 相关文章推荐
jQuery AJAX回调函数this指向问题
Feb 08 Javascript
Javascript中For In语句用法实例
May 14 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
微信小程序实现聊天室
Aug 21 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 #Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 #Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 #Javascript
javascript 继承学习心得总结
Mar 17 #Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 #Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 #Javascript
jquery基础知识第一讲之认识jquery
Mar 17 #Javascript
You might like
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
超级强大的表单验证
2006/06/26 Javascript
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
python3 mmh3安装及使用方法
2019/10/09 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
python的launcher用法知识点总结
2020/08/07 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
陈欧的广告词
2014/03/18 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL