DOM案例----实现漂浮广告 超简单

使用JavaScript实现漂浮广告
最新推荐文章于 2022-07-15 22:00:56 发布
原创 最新推荐文章于 2022-07-15 22:00:56 发布 · 872 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#xhtml #javascript #function #div #html

这篇博客通过一个简单的HTML和JavaScript代码示例，演示了如何创建一个浮动的广告图片。利用DOM操作，设置图片的位置，并通过调整坐标和速度，使图片在页面中上下左右浮动。代码简洁易懂，适用于网页动态效果的实现。
 

废话不多说，直接贴代码，带注释，可以用作任何地方，方便，开源，有不懂的地方请留言。。

 

 

<!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/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮动的图片</title>
<style>
 div{ 
  position:absolute;
  }
</style>

最低0.47元/天 解锁文章
用JSP 制作随机漂浮广告的案例
09-28 838
  //定义全局变量var xPos = 0;   //X轴坐标var yPos = 0;  //Y轴坐标var step = 1;  //图片移动的速度var yon = 0;   //设置图片在Y轴的移动方向var xon = 0;   //设置图片在X轴的移动方向var img = document.getElementById(float); funct
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
10-23
本篇将详细介绍如何使用JavaScript实现带缓冲效果的随屏滚动漂浮广告。 首先，要实现这种效果，我们需要理解JavaScript的基本原理和DOM操作。JavaScript是一种脚本语言，常用于网页的交互逻辑，可以通过修改HTML...
JS 案例 飘浮广告
suiferq的博客
06-07 475
飘浮广告 要求： 页面两侧有广告，广告上下来回滚动，点击关闭，广告被关闭。 HTML代码片: <div id="adv_left" class="adv adv_left"> <span id="left_close">&times;</span> </div> <div id="adv_right" class="adv adv_right"> <span id="right_close">&t
dedecms右侧悬浮_DEDECMS5.7漂浮广告实例代码
weixin_39822993的博客
12-21 317
在网站上一般都有很多的广告位，只是很多人都不知道要怎么样添加，这里教给大家一种做漂浮广告的方法，也让自己的网站上有很多广告位存在。首先在广告管理增加一个新广告，然后复制以下广告代码：var x = 50,y = 60var xin = true, yin = truevar step = 1var delay = 10var obj=document.getElementById("ad")fun...
JS实现漂浮广告功能
zxh996的博客
07-11 7543
JS实现漂浮广告功能前言一、漂浮广告案例 前言 漂浮广告非常简单也是老案例了，在网页的设计中可直接拿去用，原理都是我之前文章所讲到的，如果有什么不明白的可以看看我之前的文章，仅供参考学习。 一、漂浮广告案例 我在这个案例里面加了一些其他的操作，例如：移入时广告静止，移出时广告漂浮，点击一次跳转到另一个页面，点击俩次广告消失。 代码如下（示例）： <style type="text/css"> #div1 { width: 300px;
顶部悬浮-DOM
Yous的博客
07-15 222
我记得css里面的粘性定位好像也能做到顶部悬浮，这里是使用DOM做的。两个也是有些区别的，粘性定位的元素处于文档流当中，且粘性定位的兼容性较差。
javascript实现的广告漂浮
11-06
在本案例中，"广告漂浮"是一个常见的JavaScript特效，主要用于网页上的广告展示。当用户滚动网页时，这个广告会像固定在屏幕某个位置一样，始终可见，从而提高广告的曝光率。 实现广告漂浮的JavaScript技术主要涉及...
JavaScript实现网页漂浮广告效果
尽管现代网页设计更注重用户体验与简洁性，但掌握JS漂浮广告的实现原理对于前端开发者理解DOM操作、事件机制、定时器控制以及CSS定位仍然具有重要意义。 从标题“js漂浮广告”可以看出，该知识点的核心是使用...
JS实现网页漂浮广告效果源码
综上所述，“漂浮广告JS代码”不仅是一项实用的前端开发技巧，更是综合运用JavaScript、DOM编程、CSS布局与浏览器适配知识的典型案例。掌握此类技术有助于开发者深入理解网页动态交互的底层机制，提升解决复杂前端...
DOM（一）-10-(练习-广告弹窗)
wy_0928的博客
08-20 661
【DOM练习】 模拟一个广告弹窗 【思路】 页面一加载完就执行，在当前页面定义脚本，有两种方式： （1）将广告弹窗定义在onload事件中，即页面一加载完成就启动onload事件； （2）将广告弹窗定义在open方法中，即页面一打开就加载open方法； 【代码1】ad.html中的代码（广告文件） 特价大优惠！ 什么东西便宜了
网页漂浮广告代码,能够轻松的实现图片在网页上面漂浮
08-19
网页漂浮广告代码,能够轻松的实现图片在网页上面漂浮
ecshop广告图片增加 alt=”广告关键字描述”
04-16
ecshop广告位置并没有显示描述文字的功能，但是可以自己修改添加代码实现可以从后台增加alt广告位描述的功能。 alt=”广告关键字描述”
简单的javascript特效可拖动图层、通过document对象相关属性动态改变背景色、浮动广告、广告窗口、弹窗选择
03-19
可拖动图层、通过document对象相关属性动态改变背景色、浮动广告、广告窗口、弹窗选择
ecshop 首页幻灯插件（js）
06-03
ecshop的首页幻灯js版 参考 www.chinahongjiu.net 使用方法 1、将文件夹下载到 data/flashdata 中 2、修改admin文件夹中的flashplay.php 大约 870行添加 case 'Myjs'；注意文件夹名称要一直，否则更新不了。这样就可以到后台调用了 样式自己调整 3、更新了js ，解决的部分bug,替换即可 var mylnk=""; var mytxt=""; var mypic=""; var s1="",s2="",s3=""; function show_flash() { mylnk=links.split("|"); mytxt=texts.split("|"); mypic=pics.split("|"); s1="",s2="",s3=""; cpn=mylnk.length; for(i=0;i<mylnk.length;i++) { s1+='<li id="Myop'+i+'" ></li>'; s2+='<li id="Myjs'+i+'" onmouseover="Myjsch(\'Myjs'+i+'\',\''+mypic[i]+'\')" onmouseout="Myjscl(\'Myjs'+i+'\')" ref="'+mypic[i]+'"><a href="'+unescape(mylnk[i])+'">'+mytxt[i]+'</a></li>'; } document.getElementById('flash_cycle_image').innerHTML = '<div class="i_topcenter">'+"\n"+'<div class="slides" >'+"\n"+'<a href="'+mylnk[0]+'" id="slide-a"><img id="slide-pic" src="'+mypic[0]+'"/></a>'+"\n"+'<ul class="slide-li" id="op">'+"\n"+s1+"\n"+'</ul><ul class="slide-li" id="slide-txt">'+"\n"+s2+'</ul>'+"\n"+'</div>'+"\n"+' </div>'; document.getElementById("Myjs0").style.background="#ff0000"; if(document.all)document.getElementById("slide-pic").filters[0].enabled=false; ss=""; timen=2000; cp=0; obj=document.getElementById("slide-pic"); cpn=document.getElementById("slide-txt").getElementsByTagName("li").length; ss= window.setInterval(function() { if(cp<cpn-1){cp++; } else{ cp=0 } if(document.all){ obj.filters.blendtrans.Apply(); obj.filters[0].enabled=false; obj.filters.blendtrans.Play(); } obj.src=document.getElementById("Myjs"+cp).getAttribute("ref"); for(j=0;j<cpn;j++){ if(j==cp){ document.getElementById("Myjs"+j).style.background="#ff0000"; document.getElementById("slide-a").href=unescape(mylnk[j]); } else { document.getElementById("Myjs"+j).style.background=""; } } },timen); //mystart(); } LoadCSS("data/flashdata/Myjs/mycss.css"); $importjs('data/flashdata/Myjs/data.js', show_flash); function Myjsch(sid,ref) { window.clearInterval(ss); if(document.all){ obj.filters.blendtrans.Apply(); obj.filters[0].enabled=false; obj.filters.blendtrans.Play(); } obj.src=ref; for(i=0;i<cpn;i++) { if("Myjs"+i==sid) { document.getElementById("Myjs"+i).style.background="#cc3333"; document.getElementById("slide-a").href=unescape(mylnk[i]); } else { document.getElementById("Myjs"+i).style.background=""; } } } function Myjscl(sid) { cp=sid.substring(4); ss= window.setInterval(function() { if(cp<cpn-1){cp++; } else{ cp=0 } if(document.all){ obj.filters.blendtrans.Apply(); obj.filters[0].enabled=false; obj.filters.blendtrans.Play(); } obj.src=document.getElementById("Myjs"+cp).getAttribute("ref"); for(j=0;j<cpn;j++){ if(j==cp){ document.getElementById("Myjs"+j).style.background="#ff0000"; document.getElementById("slide-a").href=unescape(mylnk[j]); } else { document.getElementById("Myjs"+j).style.background=""; } } },timen); }
html 广告 ins 原理,如何通过HTML DOM元素显示AdSense广告
weixin_28894691的博客
05-30 242
我使用下面提到的代码来创建HTML DOM div元素312，并且我想通过调用javascript创建dom元素来在其他页面上显示名为312的div内的adsense广告。它适用于其他广告，但不适用于AdSense广告。请帮助我。如何通过HTML DOM元素显示AdSense广告document.getElementById('312').innerHTML = "style='display:i...
DOM,js实现的鼠标悬浮和切换功能，可替换CSS3：HOVER
Doctor!..IT狂人！Doctor ye!
08-24 430
DOM,"Document Object Model";文档对象模型，是web开发中最重要的API； section:DOM trees DOM模型是文档树形结构；Document->Root element->Sub element->Sub(Attribute,Text) DOM:"call on,update"->"content,structure,style" section:s...
js实现网页漂浮广告
莫莫的家
01-29 4960
目前我们公司有个医盟天下的活动，需要将该活动展示在我们的网页上；然后就想到通过漂浮类似广告这种在页面首页； css样式：就是关于漂浮广告层的样式设定 div#roll{width:100px;height:100px; background-color:#000; color:#fff; position:absolute;} 这个div是漂浮层将要显示的具体内容 医盟天下大比拼 下
JQuery-Demo5：图片广告位
Burning Chrome
10-30 583
JQuery-Demo5：一. 需求二. 代码三. 效果 Github：image_ads_JQ 一. 需求 设计一个图片广告位，默认只有一个图片，图片下方有不同按钮，点击按钮能够更换广告图片，每个图片对应要跳转的链接不同。 二. 代码 image_ads_JQ.html <!DOCTYPE html> <html> <head> <title&g...
漂浮广告---能在桌面上漂
【___小生。博客】我们一直在努力……
09-20 635
<script language="JavaScript" type="text/JavaScript"> <br /><!-- <br />function MM_reloadPage(init) { //reloads the window if Nav4 resized <br />if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { <br />document.MM_pgW
实现网页底部悬浮广告横幅的jQuery代码
在本例中，需要编写JavaScript代码来处理用户点击关闭按钮时发生的事件，以及实现广告横幅大小图片切换和隐藏切换效果。这通常涉及到对DOM元素的添加、移除或修改。 ### 知识点四：事件处理 事件处理是JavaScript...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值