JS实现弹性漂浮效果的广告代码_javascript技巧
本文实例讲述了JS实现弹性漂浮效果的广告代码。分享给大家供大家参考。具体如下：
这里介绍一款JS弹性漂浮广告代码，碰到网页浏览器的边缘就会顺着弹力的方向自动漂浮下去，不停的在网页上漂来漂去，漂浮广告代码是很早时候就有的代码了，使用广泛，而且做为广告来说，好像效果还不错，因为它在不停的动，让人在视觉上感觉到有一种吸引力。其中的JS代码你可以扣出来保存在一个单独的JS文件中，使用时调用即可。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-move-pic-style-adv-codes/
具体代码如下：
<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="/static/imghw/default1.png" data-src="images/pic.gif" class="lazy" style="max-width:90%" style="max-width:90%" border="0" alt="JS实现弹性漂浮效果的广告代码_javascript技巧" ></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程序设计有所帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
360浏览器推荐的广告如何关闭？如何关闭电脑360浏览器推荐的广告？
Mar 14, 2024 am 09:16 AM
360浏览器推荐的广告如何关闭？相信很多的用户们都在使用360浏览器，不过这款浏览器有时候会弹出广告，这就使得很多的用户们都十分的苦恼，下面就让本站来为用户们来仔细的介绍一下如何关闭电脑360浏览器推荐的广告吧。 如何关闭电脑360浏览器推荐的广告？ 方法一： 1、打开360安全浏览器。 2、找到右上角“三横杠”标志，点击【设置】。 3、在弹出的界面左侧任务栏中找到【实验室】，勾选【启用“360热点资讯”功能】即可。 方法二： 1、首先双击
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤
Dec 17, 2023 pm 06:55 PM
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的
朋友圈广告怎么彻底关掉
Mar 03, 2024 pm 12:31 PM
用户在刷朋友圈的时候会遇到很多的广告，那么广告怎么彻底关掉呢？用户们需要在我的里点击设置，然后找到个人信息与权限，然后点击个性化广告管理，将广告个性化关闭就行。这篇朋友圈广告彻底关掉方法介绍就能告诉大家具体的操作方法，赶紧看看吧！微信使用教程朋友圈广告怎么彻底关掉答：无法彻底关掉，只能关掉个性化推荐具体方法：1、首先点击我，然后找到里面的设置。2、找到个人信息与权限选项。3、点击里面的个性化广告管理功能。4、点击广告个性化右侧的开关，关闭就可以了。怎么关闭广告：1、找到朋友圈里的广告。2、点击右
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
新版Edge如何关闭广告？屏蔽Edge个性化广告的方法
Mar 14, 2024 am 11:37 AM
很多用户更新Edge浏览器之后，发现界面上多了很多的广告，比如新标签页的底部有多个网站的链接还标注广告字样，看起来非常烦人。那有什么办法可以关闭Edge浏览器个性化广告吗？小编在网上查找了很多办法，下面就分享给大家一个关闭广告的小技巧。 新版Edge如何关闭广告？ 1、打开Edge浏览器。 2、点击右上角的【•••】。 3、点击【设置】。 4、点击【隐私、搜索和服务】。 5、关闭”个性化你的web体验“右侧的开关，即可关闭微软推送的个性
如何使用PHP和JS创建股票蜡烛图
Dec 17, 2023 am 08:08 AM
如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3
PHP与JS开发技巧：掌握绘制股票蜡烛图的方法
Dec 18, 2023 pm 03:39 PM
随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人
抖音怎么关闭广告智能推荐
Mar 22, 2024 pm 04:06 PM
在我们平时使用抖音进行娱乐的时候，经常会因为一些莫名奇怪的广告，打扰到我们正在休闲时的体验，让很多用户们都不受其扰，想要关闭这些广告的推荐推送，却不知道究竟该如何操作，那么本站小编就为大家带来这篇教程攻略就将为大家带来这篇详细的内容介绍，希望能帮助到各位有需要的小伙伴们。首先我们先在都有的app设置中，找到了解与管理广告推送的选项然后看到下方的所有与广告相关的开关选项，点击后方的开关进行关闭随后跳出关闭广告确认提示，我们点击确认即可关闭广告
