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


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自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
jquery事件与绑定事件
Mar 16 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
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
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
layui导航栏实现代码
2017/05/19 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python实现dict版图遍历示例
2014/02/19 Python
Python 中 Meta Classes详解
2016/02/13 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
Python 转换文本编码实现解析
2019/08/27 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
美国美妆网站:B-Glowing
2016/10/12 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
竞争上岗实施方案
2014/03/21 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
社团招新宣传语
2015/07/13 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript