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


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 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
vue-cli在 history模式下的配置详解
Nov 26 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
php不使用插件导出excel的简单方法
2014/03/04 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
JavaScript 面向对象之命名空间
2010/05/04 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
树结构之JavaScript
2017/01/24 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
Python编程之序列操作实例详解
2017/07/22 Python
python中hashlib模块用法示例
2017/10/30 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
讲座主持词
2014/03/20 职场文书
党员创先争优活动总结
2014/05/04 职场文书
企业读书活动总结
2014/06/30 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
Win11软件图标固定到任务栏
2022/04/19 数码科技