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


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 相关文章推荐
动态加载iframe
Jun 16 Javascript
js 获取Listbox选择的值的代码
Apr 15 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
js闭包的用途详解
Nov 09 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
一篇文章学会Vue中间件管道
Jun 20 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
重置版战役片段
2020/04/09 魔兽争霸
PHP安全技术之 实现php基本安全
2010/09/04 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
php上传文件常见问题总结
2015/02/03 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
详细介绍Python语言中的按位运算符
2013/11/26 Python
python处理PHP数组文本文件实例
2014/09/18 Python
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
python3 线性回归验证方法
2019/07/09 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
高中自我评价分享
2013/12/05 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
锅炉工岗位职责
2015/02/13 职场文书
2015年社区工作总结
2015/04/08 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android