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 相关文章推荐
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 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中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
Vue指令指令大全
2019/02/09 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
Python实现的简单万年历例子分享
2014/04/25 Python
介绍Python中几个常用的类方法
2015/04/08 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
python进行TCP端口扫描的实现
2018/12/21 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
eBay加拿大站:eBay.ca
2019/06/20 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
四年级数学教学反思
2014/02/02 职场文书
园林技术专业求职信
2014/07/28 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers