在页面内自由飘动的小广告--js

最新推荐文章于 2024-10-10 22:10:24 发布
最新推荐文章于 2024-10-10 22:10:24 发布
阅读量409 收藏 2
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/liyaonan/archive/2009/03/16/1413589.html
本文介绍了一个简单的HTML页面中实现小广告浮动效果的方法。通过JavaScript控制图片元素的位置，使其能在页面中自由移动，增强了用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE></TITLE>
<style type="text/css">
<!--
.STYLE1 {
 color: #FF0000;
 font-size: large;
}
-->
</style>
</HEAD>
<BODY leftMargin=0 topMargin=0>
<table width="700px" border="0" align="center">
  <tr  height="700px">
    <td><span class="STYLE1">在页面内自由飘动的小广告</span></td>
  </tr>
</table>
<DIV id=img
style="Z-INDEX: 10; WIDTH: 100px; POSITION: absolute; HEIGHT: 100px"><A
href="#" target=_blank><IMG height=100
alt="" src="1.jpg" width=100 border=0>
</A></DIV>

<SCRIPT language=JavaScript type="">
<!--浮动的层
  var xPos = 20;
  var yPos = document.body.clientHeight;
  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;
  img.style.top = yPos;
  function changePos() {
    width = document.body.clientWidth;
    height = document.body.clientHeight;
    Hoffset = img.offsetHeight;
    Woffset = img.offsetWidth;
    img.style.left = xPos + document.body.scrollLeft;
    img.style.top = yPos + document.body.scrollTop;
//clientWidth是对象看到的宽度（不含边线）
//offsetWidth是对象看到的宽度（含边线，如滚动条的占用的宽，值会随着内容的输入而不断改变）
//scrollWidth是对象实际内容的宽度。
    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() {
    img.visibility = 'visible';
    interval = setInterval('changePos()', delay);
  }
  function pause_resume() {
    if(pause) {
      clearInterval(interval);
      pause = false;
    }else{
      interval = setInterval('changePos()',delay);
      pause = true;
    }
  }
  start();
//  End -->
</SCRIPT>
</BODY></HTML>

转载于:https://www.cnblogs.com/liyaonan/archive/2009/03/16/1413589.html

html 飘动的广告,很实用，很经典的jQuery漂浮广告
weixin_42511517的博客
07-03 1508
jQuery漂浮广告代码，很经典的浮动广告，到目前都还很实用，如果你是一位站长的话，这种代码是必备的，希望对你有用处。用jQuery兼容性好，可关闭，鼠标移动在上面时可关闭 ，可控制漂浮速度，稍微改改样式和图片就可使用。效果演示地址：http://tangjiusheng.com/jQuery/page20180922.html很经典的jQuery漂浮广告代码jQuery漂浮广告代码* {marg...
web 广告浮动碰到边界回弹
lawlieting的博客
03-15 1085
漂浮广告 var x=0,y=0; var xin=true,yin=true; var step=1; var xstep=20; var ystep=5; var delay=10; var obj=document.getElementById("codefans_net");
网页上随意飘动的广告js
09-01
网页上随意飘动的广告js源代码，点击可以关闭效果
飘动的广告
02-28
js特效，选择IE浏览器打开可以看到效果
js实现网页漂浮广告
莫莫的家
01-29 4946
目前我们公司有个医盟天下的活动，需要将该活动展示在我们的网页上；然后就想到通过漂浮类似广告这种在页面首页； css样式：就是关于漂浮广告层的样式设定 div#roll{width:100px;height:100px; background-color:#000; color:#fff; position:absolute;} 这个div是漂浮层将要显示的具体内容 医盟天下大比拼 下
JS实现悬浮移动窗口(悬浮广告)的特效
10-27
页面加载完成之后向页面插入窗口，之后向窗口插入关闭按钮，使用setInterval()函数触发moves（）函数开始动画
js随机飘动的广告图片代码
11-11
这个主题，"js随机飘动的广告图片代码"，是JavaScript技术在网页交互中的应用，主要涉及到JavaScript基础、CSS样式以及DOM操作等知识点。 首先，JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页和应用程序...
情人节程序员用HTML网页表白【飘动的心-3D相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
08-10
`）实现页面元素的动态效果，如飘动的心形图案。 - 使用`@keyframes`规则定义动画的关键帧，从而控制元素的运动轨迹和速度。 ### 知识点三：JavaScript交互设计 #### 3.1 JavaScript概述 - JavaScript是一种广泛...
javascript经典特效---图片上下飘动.rar
01-07
为了使图片能飘动，我们需要设置图片的初始位置，并在JavaScript中动态更新其位置。这通常涉及到`position`属性的设置，将其设为`absolute`或`relative`，以便在不影响其他元素布局的情况下移动图片。 此外，还需要...
六一儿童节-飘动的气球.pdf
06-23
- **声音和动画**: 使用JavaScript库如p5.js或Three.js可以实现更复杂的声音和动画效果。 - **动态加载资源**: 如动态加载不同的气球图片，可以根据用户的选择或随机生成气球样式。 #### 6. 示例代码分析 - **HTML*...
窗口中一直飘动的广告效果
xiao_jun_0820的专栏
09-27 4068
 下面代码是一个漂浮广告效果，请把IMG的SRC改成你自己电脑上的一张图片的地址。DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/x
js 实现飘动土层代码
04-02
<DIV id="img" style="position: absolute; z-index: 2; left: 87px; top: 16px; width: 115px; height: 91px"><a href="http://www.educast.com.cn/message/sars/index.htm" target="_blank"><img src="image/feidian.gif" width="140" height="140" border="0"></a> </DIV> <SCRIPT language=JavaScript> <!-- Begin var xPos = 200; var yPos = document.body.clientHeight; var step = 1; var delay = 20; var height = 0; var Hoffset = 0; var Woffset = 0; var yon = 0; var xon = 0; var pause = true; var interval; img.style.top = yPos; function changePos() { width = document.body.clientWidth; height = document.body.clientHeight; Hoffset = img.offsetHeight; Woffset = img.offsetWidth; img.style.left = xPos + document.body.scrollLeft; img.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() { img.visibility = "visible"; interval = setInterval('changePos()', delay); } function pause_resume() { if(pause) { clearInterval(interval); pause = false; } else { interval = setInterval('changePos()',delay); pause = true; } } start(); // End --> </SCRIPT> <SCRIPT event=onload for=window language=JavaScript> //pagestart(); </SCRIPT>
HTML实现飘动广告效果
最新发布
2201_76060199的博客
10-10 1727
页面加载后，一个红色的小方块会在浏览器窗口内自动移动，碰到边界时会反弹。当用户将鼠标悬停在方块上时，动画会暂停；移开鼠标后，动画会继续。
js随机飘动的广告图片代码demo效果示例（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
11-09 2965
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;js随机飘动的广告图片代码&lt;/title&gt;
Html+Css+Js网页页面上广告一直显示，而且一直动来动去（完整代码+详解）
qq_38170526的博客
08-02 2140
一，问题描述 我们浏览网页时，经常会看到网页上有一些悬浮的广告，而且会飘来飘去。特别是一些盈利的网站，即使你讲网页往下拉，希望以此不看到广告，但是他却很讨人烦的在网页上。所以通过描述我们的悬浮广告要满足一下几个要求; 1 .我们的广告要一直在我们的浏览器可视区域 2 .即使拉动了屏幕的滚动条，广告也会在可视区域内 二，效果预览 三，用到的主要事件 window.onload：页面加载...
HTML网页漂浮广告原理js实现
Moriarty的专栏
03-08 1万+
#demo { width: 100px; height: 100px; position:absolute; border-radius:50px; } window.onload = function(){ var de
基于JQuery网页漂浮广告窗口Js详解
热门推荐
yukeung
04-06 2万+
网页类似广告漂浮窗口的制作思路以及详细代码
在网页广告栏中经常看到左右来回移动的广告图片。请使用html+js实现一个左右移动的图片效果。图片自选。
qq_45917176的博客
11-05 1267
在网页广告栏中经常看到左右来回移动的广告图片。请使用html+js实现一个左右移动的图片效果。图片自选。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; paddin
JavaScript实现网页随机广告飘动效果
"js页面随机广告" 在网页设计中，JavaScript是一种常见的编程语言，用于增加页面交互性和动态效果。本示例中的代码旨在实现一个页面上的随机广告展示功能，通过JavaScript来控制广告元素的动态显示。以下是对代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值