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 相关文章推荐
非常漂亮的JS代码经典广告
Oct 21 Javascript
javascript数组组合成字符串的脚本
Jan 06 Javascript
input+select(multiple) 实现下拉框输入值
May 21 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
微信小程序的引导页实现代码
Jun 24 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注入实例
2006/10/09 PHP
Php+SqlServer实现分页显示
2006/10/09 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
学习YUI.Ext基础第一天
2007/03/10 Javascript
Js获取事件对象代码
2010/08/05 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
Python入门_学会创建并调用函数的方法
2017/05/16 Python
itchat接口使用示例
2017/10/23 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
贷款委托书范本
2014/04/08 职场文书
银行授权委托书样本
2014/10/13 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
学校运动会简讯
2015/07/20 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python