JS实现弹性漂浮效果的广告代码


Posted in Javascript onSeptember 02, 2015

本文实例讲述了JS实现弹性漂浮效果的广告代码。分享给大家供大家参考。具体如下:

这里介绍一款JS弹性漂浮广告代码,碰到网页浏览器的边缘就会顺着弹力的方向自动漂浮下去,不停的在网页上漂来漂去,漂浮广告代码是很早时候就有的代码了,使用广泛,而且做为广告来说,好像效果还不错,因为它在不停的动,让人在视觉上感觉到有一种吸引力。其中的JS代码你可以扣出来保存在一个单独的JS文件中,使用时调用即可。

运行效果截图如下:

JS实现弹性漂浮效果的广告代码

在线演示地址如下:

具体代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js弹性漂浮广告代码</title>
</head>
<body>
<DIV id=img1 style="Z-INDEX: 100; LEFT: 2px; WIDTH: 59px; POSITION: absolute; TOP: 43px; HEIGHT: 61px;
 visibility: visible;"><a href="#" target="_blank"><img src="images/pic.gif" width="80" height="80" border="0"></a></DIV>
<SCRIPT language="JavaScript">
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();
</SCRIPT>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript XML实现两级级联下拉列表
Nov 10 Javascript
关于可运行代码无法正常执行的使用说明
May 13 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
jQuery实现元素的插入
Feb 27 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
JavaScript使用setTimeout实现倒计时效果
Feb 19 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 #Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 #Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 #Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 #Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 #Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 #Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 #Javascript
You might like
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
js数据类型检测总结
2018/08/05 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
电力公司个人求职信范文
2014/02/04 职场文书
医院工作检讨书范文
2014/02/10 职场文书
《太阳》教学反思
2014/02/21 职场文书
幼儿园家长寄语
2014/04/02 职场文书
初中英语课后反思
2014/04/25 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
运动会班级前导词
2015/07/20 职场文书
MySQL 十大常用字符串函数详解
2021/06/30 MySQL