超好用的网页浮动广告代码(可在线体验)
假定图片区域的id为your_id,代码分为两部分:
第一部分是HTML代码,用于显示广告图片链接;
第二部分是JS代码,用于控制广告图片运动。
广告图片的HTML代码
<div id='your_id' style='z-index: 100; left: 2px; width: 108px; position: absolute; top: 43px; height: 108px; visibility: visible;'>
<a href='http://codingstandards.iteye.com/' target='_blank'>
<img src='http://124.232.156.170/nxsyzx/zhaosheng/baoming.gif' width='108' height='108' border='0'/>
</a>
</div>
用于控制图片运动的JS代码
(function(id){
var xPos = 2;
var yPos = 43;
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;
var img1 = document.getElementById(id);
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();
})('your_id');
PS:本文中的代码参考了网络上常用的浮动广告代码,但做了一些修改,更加实用。它限制了变量的作用域,能够直接嵌入到某些门户CMS系统中。
在线体验地址
点我体验一下浮动广告效果哦
分享到:
相关推荐
js浮动广告代码,常见的在屏幕内漂浮的图片广告效果,可以吸引用户注意力,缺点是用户体验稍差 网页两侧浮动广告代码 网页固定位置浮动图片广告代码
浮动小广告从右上角开始呈45度向左下角浮动,碰到页面边框呈镜面反射状反弹。 一级菜单“服务”下扫雷小游戏体验:生成100个格子,随机放置10个雷,点击鼠标右键放置旗子标志。 注册页面:验证各表单输入格式是否...
几个文件,立刻拥有海量...更改说明images/logo.png右侧浮动广告foot.html其他通栏广告:images/foot.js网站发布网(发布号)V2.0 海量热点新闻小偷程序9月1日新增1.首页JSON无限加载 2.新闻页也可以无限加载3.优化代码
除独家采用的“沙箱”技术外,还集成了恶意代码智能拦截、下载文件即时扫描、恶意网站自动报警,广告窗口智能过滤等强劲功能,强化了对弹窗和浮动广告的拦截机制,使拦截准确率和体验均有较大提升,是目前市面上最...
6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越火线游戏网 8.JS经典3款风格QQ客服在线浮动右侧与左侧代码 9.JS精简网页音乐播放器 浮动在页面...
除独家采用的“沙箱”技术外,还集成了恶意代码智能拦截、下载文件即时扫描、恶意网站自动报警,广告窗口智能过滤等强劲功能,强化了对弹窗和浮动广告的拦截机制,使拦截准确率和体验均有较大提升,是目前市面上最...
除独家采用的“沙箱”技术外,还集成了恶意代码智能拦截、下载文件即时扫描、恶意网站自动报警,广告窗口智能过滤等强劲功能,强化了对弹窗和浮动广告的拦截机制,使拦截准确率和体验均有较大提升,是目前市面上最...
广告管理:添加广告(可添加图片,文字,FLASH,浮动,代码,视频广告),修改广告,删除广告,自动定时上下架到期广告,广告位管理,新增广告位,修改广告位,删除广告位。 首页广告管理:首页广告图片、首页广告...
广告管理:添加广告(可添加图片,文字,FLASH,浮动,代码,视频广告),修改广告,删除广告,自动定时上下架到期广告,广告位管理,新增广告位,修改广告位,删除广告位。 首页广告管理:首页广告图片、首页广告...
广告管理:添加广告(可添加图片,文字,FLASH,浮动,代码,视频广告),修改广告,删除广告,自动定时上下架到期广告,广告位管理,新增广告位,修改广告位,删除广告位。 首页广告管理:首页广告图片、首页广告...
22688反病毒高速安全云浏览器单文件绿色免安装版 采用沙箱安全技术保护所有网站和应用,支持IE和...强劲功能,强化了对弹窗和浮动广告的拦截机制,使拦截准确率 和体验均有较大提升,是目前市面上最安全的浏览器。
广告效果:普通显示、满屏浮动显示、上下浮动显示(左/右)、全屏幕渐隐消失、可移动对话框、对联式广告等。 14,多接口整合 目前网软旅游网站整合了支付宝及网银在线支付接口、订单状态手机短信/E-Mail通知、电子...
1、产品管理增加“推荐”,“仅会员访问”,“可在线订购”三个列表项,方便了产品管理. 2、改善了多语言站点管理功能,更方便建立多个语言站点,同时优化了对繁体站点进行了优化. 3、添加用户自定义banner的功能 ...
广告管理:添加广告(可添加图片,文字,FLASH,浮动,代码,视频广告),修改广告,删除广告,自动定时上下架到期广告,广告位管理,新增广告位,修改广告位,删除广告位。 首页广告管理:首页广告图片、首页广告...
广告管理:添加广告(可添加图片,文字,FLASH,浮动,代码,视频广告),修改广告,删除广告,自动定时上下架到期广告,广告位管理,新增广告位,修改广告位,删除广告位。 首页广告管理:首页广告图片、首页广告...
网站基本信息配置、顶部菜单、首页FLASH展示管理、滚动公告管理、列表公告管理、热点推荐、广告设置、在线客服、友情链接、留言反馈、帮助信息、缺货登记、管理投票等…… [网域服装网店网站模板下载服装网站源码...