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 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
javascript 出生日期和身份证判断大全
Nov 13 Javascript
JavaScript 动态创建VML的方法
Oct 14 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
uni-app从安装到卸载的入门教程
May 15 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 $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
js如何打印object对象
2015/10/16 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
express框架下使用session的方法
2019/07/31 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
Python中用max()方法求最大值的介绍
2015/05/15 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
python变量命名的7条建议
2019/07/04 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
公司市场部岗位职责
2013/12/02 职场文书
本科生的职业生涯规划范文
2014/01/09 职场文书
夏季奶茶店创业计划书
2014/01/16 职场文书
小学生打架检讨书
2014/01/26 职场文书
初三政治教学反思
2014/01/30 职场文书
经典禁毒标语
2014/06/16 职场文书
法人委托书范本格式
2014/09/15 职场文书
出生公证书
2015/01/23 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书