js之悬浮广告理论 ---js篇

最新推荐文章于 2024-07-02 07:14:18 发布
最新推荐文章于 2024-07-02 07:14:18 发布
阅读量925 收藏 9
点赞数
分类专栏： Java

目录

 

一、向页面添加广告层

二、getElementByName( )方法获得表单元素

三、style的display属性实现层的隐藏

四、offsetWidth与offsetHeight

五、窗口滚动事件Move()

六、弹来弹去的广告

七、全选特效

八、简易轮播图

九、鼠标移过改变颜色

十、超连接特效

十一、精确定位

十二、document.all的用法

十二、getElementsByTagName

十三、访问H1的getElemtById

十四、获取当前坐标值的另一种方法

一、向页面添加广告层

  1. getElementById( )方法获得层对象
  2. pixelTop属性获取层距页面顶部的距离
  3. document.body.scrollTop获取滚动条距顶部的距离
  4. 设置层的z-index属性，数值大的靠前显示
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>广告</TITLE>
<SCRIPT language="javascript">
 
var initTop=0;
function init( )
{
   initTop=document.getElementById("advLayer1").style.pixelTop;
}
function move( )
{ 
    document.getElementById("advLayer1").style.pixelTop=initTop+document.body.scrollTop   ;
	document.getElementById("advLayer2").style.pixelTop=initTop+document.body.scrollTop   ;
	 
}
window.onscroll=move ;  //窗口的滚动事件，当页面滚动时调用move( )函数

</SCRIPT>
</HEAD>

<BODY onLoad="init()">

 <DIV id="advLayer1" style="position:absolute;	left:-7px;	top:79px;	width:139px;	height:253px;	z-index:1;">
<A href="#"><IMG src="images/left.jpg" width="144" height="253" border="0"></A>
</DIV>
  <DIV id="advLayer2" style="position:absolute;	left:885px;	top:79px;	width:129px;	height:257px;	z-index:1;">
<A href="#"><IMG src="images/right.jpg" width="130" height="256" border="0"></A>
</DIV>
</BODY>
</HTML>

二、getElementByName( )方法获得表单元素

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>getElementByName</TITLE>
<SCRIPT language="javascript">
function checkAll(checked)
{
   var allCheckBoxs=document.getElementsByName("isBuy") ;
   for (var i=0;i<allCheckBoxs.length ;i++)
   {
       if(allCheckBoxs[i].type=="checkbox"){  //可能有重名的其他类型元素，如图片、控件等，所以要判断类型
	   		allCheckBoxs[i].checked=checked;

		}
   }  
}
</SCRIPT>

</HEAD>

<BODY>
<FORM action="" name="buyForm" method="post">
<TABLE width="984"  border="0">
  <TR>
    <TD colspan="2"></TD>
  </TR>
  <TR>
    <TD width="176" align="center"><FONT size="-1">全选/取消</FONT><BR>
      <INPUT name="selectall" type="checkbox" id="selectall" onClick="checkAll(this.checked)"></TD>
    <TD width="824" align="center"></TD>
  </TR>
  <TR>
    <TD height="113" align="center"><INPUT name="isBuy" type="checkbox" id="isBuy" value="sanguo"></TD>
    <TD></TD>
  </TR>
  <TR>
    <TD colspan="2" align="center"><HR noshade="noshade" style="border:1px  #CCCCCC dashed " /></TD>
    </TR>
  <TR>
    <TD align="center"><INPUT name="isBuy" type="checkbox" id="isBuy" value="paozhu"></TD>
    <TD></TD>
  </TR>
  <TR>
    <TD colspan="2" align="center"><HR noshade="noshade" style="border:1px  #CCCCCC dashed " /></TD>
    </TR>
  <TR>
    <TD align="center"><INPUT name="isBuy" type="checkbox" id="isBuy" value="paozhu"></TD>
    <TD></TD>
  </TR>
  <TR>
    <TD colspan="2" align="center"><HR noshade="noshade" style="border:1px  #CCCCCC dashed " /></TD>
    </TR>
  <TR>
    <TD align="center"><INPUT name="isBuy" type="checkbox" id="isBuy" value="jingwu"></TD>
    <TD></TD>
  </TR>
  <TR>
    <TD colspan="2" align="center"><HR noshade="noshade" style="border:1px  #CCCCCC dashed " /></TD>
    </TR>
	  <TR>
    <TD colspan="2" align="center"></TD>
    </TR>
</TABLE>
</FORM>
</BODY>
</HTML>

三、style的display属性实现层的隐藏

可关闭的悬浮广告


  <HTML>
  <HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=gb2312">
  <TITLE>浮动广告窗口</TITLE>
<SCRIPT language="javascript">
 
var advInitTop=0;
var closeInitTop=0;
function inix( )
{
   advInitTop=document.getElementById("advLayer").style.pixelTop;
   closeInitTop=document.getElementById("closeLayer").style.pixelTop;
}
function move( )
{
    document.getElementById("advLayer").style.pixelTop=advInitTop+document.body.scrollTop   ;
	document.getElementById("closeLayer").style.pixelTop=closeInitTop+document.body.scrollTop   ;
	 
}
function closeMe( )
{
    
    document.getElementById("closeLayer").style.display="none";
	document.getElementById("advLayer").style.display="none";
	 
}

	 
window.onscroll=move ;  //窗口的滚动事件，当页面滚动时调用move( )函数

</SCRIPT>

   
  
   
  <STYLE type="text/css">
<!--
body {
	margin-top: 0px;
}
-->
</STYLE></HEAD>
    
  <BODY  onLoad="inix( )" >
   <DIV id="closeLayer"  onClick="closeMe( )" style="position:absolute;	right:40px;	top:80px;	width:54px;	height:19px;z-index:2;">
   <FONT color="#0000FF" face="黑体">关闭</FONT>
   </DIV>
   
  <DIV id="advLayer"  style="position:absolute; right:30px; top:100px; width:86px; height:81px; z-index:1">
  <A href="http://www.taobao.com">
  <IMG src="images/float_advclose1.gif" width="85" height="80" border="0"></A>
  </DIV>
   
  </BODY>
  </HTML>
</div>

四、offsetWidth与offsetHeight

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>无标题文档</TITLE>
<script>

  var x = 50,y = 60;  //浮动广告初始位置

  var xin = true, yin = true;  //xin为真向右运动，否则向左，yin为真向下 运动，否则向上运动

  var step = 1;   //移动的距离

  var delay = 10;  //移动的时间间隔
  

  function floatAD() {

     var L=T=0;			//L左边界，T上边界

     var R= document.body.offsetWidth-document.getElementById("fly").offsetWidth;  //层移动的右边界

     var B = document.body.offsetHeight-document.getElementById("fly").offsetHeight; //层移动的下边界

     document.getElementById("fly").style.left = x;  //层移动后的左边界

     document.getElementById("fly").style.top = y;   //曾移动后上边界

     x = x + step*(xin?1:-1);		//判断水平方向

     if (x < L) { xin = true; x = L;}   //到达边界后的处理 

     if (x > R){ xin = false; x = R;} 

     y = y + step*(yin?1:-1); 

     if (y < T) { yin = true; y = T;} 

     if (y > B) { yin = false; y = B;} 
	 setTimeout("floatAD()", delay)		//隔多长时间调用一次

  }

   

</script>
</HEAD>

<BODY onLoad="floatAD()">
<DIV id="fly" style="position:absolute">
<A href= target="_blank">
<IMG src="images/fish.gif" border="0">
</A></DIV>
</BODY>
</HTML>

五、窗口滚动事件Move()

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>可关闭的浮动广告</TITLE>
<SCRIPT language="javascript">
 
var  picTop = 0;
var advTop = 0;
function init( )
{
   picTop=document.getElementById("advLayer").style.pixelTop;
   advTop=document.getElementById("closeAdv").style.pixelTop;
}
function move( )
{
    
    document.getElementById("advLayer").style.pixelTop=picTop+document.body.scrollTop;
	document.getElementById("closeAdv").style.pixelTop=advTop+document.body.scrollTop;
	 
}
function closeAdv(){
	document.getElementById("advLayer").style.display="none";
	document.getElementById("closeAdv").style.display="none";
}
	 
window.onscroll=move ;  //窗口的滚动事件，当页面滚动时调用move( )函数

</SCRIPT>
</HEAD>

<BODY onLoad="init()">
<IMG src="images/top.jpg"><IMG src="images/content1.jpg">
<IMG src="images/content2.jpg"><IMG src="images/foot.jpg">
 <DIV id="advLayer" style="position:absolute;	left:16px;	top:80px;	width:302px;	height:171px;	z-index:1;">
 <A href="#"><IMG src="images/lady_0007.jpg" width="301" height="171" border="0"></A>
 </DIV>
    <DIV id="closeAdv"  onClick="closeAdv()" style="position:absolute;	left:214px;	top:230px;	width:27px;	height:19px;z-index:2; cursor:hand">
	<IMG src="images/close.gif" width="100" height="14">
	</DIV>
</BODY>
</HTML>

六、弹来弹去的广告

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>广告</TITLE>
<SCRIPT>

  var x = 50,y = 60;  //浮动广告初始位置

  var xin = true, yin = true;  //xin为真向右运动，否则向左，yin为真向下 运动，否则向上运动

  var step = 1;   //移动的距离

  var delay = 10;  //移动的时间间隔
  

  function floatAD() {

     var L=T=0;			//L左边界，T上边界

     var R= document.body.offsetWidth-document.getElementById("fly").offsetWidth;  //层移动的右边界
	 

     var B = document.body.offsetHeight-document.getElementById("fly").offsetHeight; //层移动的下边界
	
     document.getElementById("fly").style.left = x;  //层移动后的左边界
	
     document.getElementById("fly").style.top = y;   //曾移动后上边界
	
     x = x + step*(xin?1:-1);		//判断水平方向

     if (x < L) { xin = true; x = L;}   //到达边界后的处理 

     if (x > R){ xin = false; x = R;} 

     y = y + step*(yin?1:-1); 

     if (y < T) { yin = true; y = T;} 

     if (y > B) { yin = false; y = B;} 
	 setTimeout("floatAD()", delay)		//隔多长时间调用一次

  }
</SCRIPT>
</HEAD>

<BODY onLoad="floatAD()">
<IMG src="images/top.jpg"><IMG src="images/content1.jpg"><IMG src="images/content2.jpg"><IMG src="images/foot.jpg">
 <DIV id="fly" style="position:absolute;	left:16px;	top:80px;	width:265px;	height:135px;	z-index:1;"><A href="#"><IMG src="images/lady_0007.jpg" width="264" height="134" border="0"></A></DIV>
</BODY>
</HTML>

七、全选特效

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>全选特效</TITLE>

<SCRIPT type="text/javascript">
function selectAll()
{
	var allCheckBoxs=document.getElementsByName("coffee") ;//获得checkbox对象的集合
	var desc = document.getElementById("btn").value;		//获得按钮对象
   
   if(desc=="全喜欢") {  
	document.getElementById("btn").value="都不喜欢";
		for (var i=0;i<allCheckBoxs.length ;i++)			//循环checkbox对象集合，设置每一个checkbox的状态
	   {
		   allCheckBoxs[i].checked=true ;  
	   }  
	}else{
		document.getElementById("btn").value="全喜欢";
		for (var i=0;i<allCheckBoxs.length ;i++)
	   {
		   allCheckBoxs[i].checked=false ;  
	   }  
	}
}

</SCRIPT>
</HEAD>

<BODY>
<P>你喜欢喝哪种类型咖啡</P>
<FORM>

<BR>
<INPUT type="checkbox" name="coffee" value="cream">蓝山咖啡<BR />
<INPUT type="checkbox" name="coffee" value="sugar">摩卡<BR />
<INPUT type="checkbox" name="coffee" value="sugar">拿铁<BR />
<INPUT type="checkbox" name="coffee" value="sugar">卡布其诺<BR />
<INPUT type="checkbox" name="coffee" value="sugar">爱尔兰咖啡<BR />
<INPUT  id="btn" type="button" onClick="selectAll()" value="全喜欢">
</FORM>
</BODY>

</HTML>

八、简易轮播图

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>多幅图片切换的特效</TITLE>
<SCRIPT type="text/javascript">
var count =1;
function init(){
	for(var i=1;i<5;i++){
		if(count==i){
		document.getElementById("pic"+i).style.display="block";
		}else{
		document.getElementById("pic"+i).style.display="none";
		}

	}
	count++;
	if(count==5){
		count=1;
	}	
	setTimeout("init()",3000);
}
</SCRIPT>
</HEAD>

<BODY onLoad="init()">
<DIV id="pic1"><IMG src="images/pic1.jpg" width="400" height="300"></DIV>
<DIV id="pic2" style="display:none"><IMG src="images/pic2.jpg" width="400" height="300"></DIV>
<DIV id="pic3" style="display:none"><IMG src="images/pic3.jpg" width="400" height="300"></DIV>
<DIV id="pic4" style="display:none"><IMG src="images/pic4.jpg" width="400" height="300"></DIV>
</BODY>
</HTML>

九、鼠标移过改变颜色

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>通过document对象相关属性动态改变背景色</TITLE>
<SCRIPT language="JavaScript">
function change(color)
{
  document.bgColor=color ;
}
</SCRIPT>
</HEAD>

<BODY>
<H2> 移过来我变色给你看看！</H2>
<FONT size=4><SPAN onMouseOver="change('red')">变红色</SPAN>|<SPAN onMouseOver="change('blue')">变蓝色</SPAN>|<SPAN onMouseOver="change('yellow')">变黄色</SPAN></FONT>
</BODY>
</HTML>

十、超连接特效

<div id=tt style="width:122px;height:20px;background-color:#FF9966;border:1px solid black;display:none;position:absolute;"> 打造精品特效站 </div>
<a href=http://www.vv.net target="_blank" 
onmouseover="tt.style.display='';
tt.style.pixelTop=event.y;
tt.style.pixelLeft=event.x" 
onmouseout="tt.style.display='none'">
网页特效</a>

十一、精确定位

<!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>
<TITLE>随滚动条移动的层 - 51windows.Net</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">
<META NAME="Author" CONTENT="haiwa">
<META NAME="homepage" CONTENT="www.51windows.net">
</HEAD>
<style>
<!--
.div{
	position: absolute;
	border: 2px solid red;
	background-color: #EFEFEF;
	line-height:90px;
	font-size:12px;
	z-index:1000;
	left: 150px;
}
-->
</style>
<BODY>
<div id="Javascript.Div1" class="div" style="width: 240px; height:90px" align="center">正中...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc1(){
 document.getElementById("Javascript.Div1").style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2)+"px";
 document.getElementById("Javascript.Div1").style.left=(document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2)+"px";
}
</SCRIPT>


<div id="Javascript.Div2" class="div" style="width: 240px; height:90px" align="center">左上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc2(){
 document.getElementById("Javascript.Div2").style.top=(document.documentElement.scrollTop)+"px";
 document.getElementById("Javascript.Div2").style.left=(document.documentElement.scrollLeft)+"px";
}
</SCRIPT>

<div id="Javascript.Div3" class="div" style="width: 240px; height:90px" align="center">左下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc3(){
 document.getElementById("Javascript.Div3").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHeight)+"px";
 document.getElementById("Javascript.Div3").style.left=(document.documentElement.scrollLeft)+"px";
}
</SCRIPT>

<div id="Javascript.Div4" class="div" style="width: 240px; height:90px" align="center">右上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc4(){
 document.getElementById("Javascript.Div4").style.top=(document.documentElement.scrollTop)+"px";
 document.getElementById("Javascript.Div4").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWidth)+"px";
}
</SCRIPT>

<div id="Javascript.Div5" class="div" style="width: 240px; height:90px" align="center">右下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc5(){
 document.getElementById("Javascript.Div5").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHeight)+"px";
 document.getElementById("Javascript.Div5").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div5").offsetWidth)+"px";
}
</SCRIPT>


<SCRIPT LANGUAGE="JavaScript">
<!--
function scall(){
 sc1();sc2();sc3();sc4();sc5();
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
//-->
</SCRIPT>
<div style="position: absolute; top: 0px; left: 0px; width: 10000px; height: 4000px;"></div>
</BODY>
</HTML>

十二、document.all的用法

<!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>
<title>Document.All Example #2</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<!-- Works in Internet Explorer and compatible -->
<h1 id="heading1" align="center" style="font-size: larger;">DHTML Fun!!!</h1>
<form name="testform" id="testform" action="#" method="get">
<br /><br />
<input type="button" value="Align Left" 
onclick="document.all['heading1'].align='left';" />
<input type="button" value="Align Center"
onclick="document.all['heading1'].align='center';" />
<input type="button" value="Align Right"
onclick="document.all['heading1'].align='right';" />
<br /><br />
<input type="button" value="Bigger"
onclick="document.all['heading1'].style.fontSize='xx-large';" />
<input type="button" value="Smaller"
onclick="document.all['heading1'].style.fontSize='xx-small';" />
<br /><br />
<input type="button" value="Red"
onclick="document.all['heading1'].style.color='red';" />
<input type="button" value="Blue"
onclick="document.all['heading1'].style.color='blue';" />
<input type="button" value="Black"
onclick="document.all['heading1'].style.color='black';" />
<br /><br />
<input type="text" name="userText" id="userText" size="30" />
<input type="button" value="Change Text"
onclick="document.all['heading1'].innerText=document.testform.userText.value;" />
</form>
</body>
</html>

十二、getElementsByTagName

<!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=gb2312">
<title>Byname,tag</title>
<style type="text/css">
<!--
#docid1,#docid2{
margin:10px;
height:400px;
width:400px;
background-color:#999;}
-->
</style>
</head>
<body>
<div name="docname" id="docid1" onClick="bgcolor()"></div>
<div name="docname" id="docid2" onClick="bgcolor()"></div>
</body>
</html>
<script language="javascript" type="text/javascript">
<!--
function bgcolor(){
var docnObj=document.getElementsByTagName("div");
docnObj[0].style.backgroundColor = "red";
docnObj[1].style.backgroundColor = "blue";
}
-->
</script>

十三、访问H1的getElemtById

<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>

</body>
</html>

十四、获取当前坐标值的另一种方法

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>无标题文档</TITLE>
<STYLE type="text/css">
<!--
body {
	background-image: url(images/game.jpg);
	background-repeat: repeat-y;
}
#man {
	position:absolute;
	left:526px;
	top:303px;
	width:93px;
	height:121px;
	z-index:1;
}
 
-->
</STYLE>
<SCRIPT language="javascript" type="text/javascript">
 function move( )
 {
  //top属性返回的是类似23px的值，而非简单的数字，parseInt(...)的值，才相当于pixelTop
  alert(parseInt(document.getElementById("man").currentStyle.top)); 
 if (event.keyCode==38)
    document.getElementById("man").currentStyle.pixelTop=document.getElementById("man").style.pixelTop-5;
  if (event.keyCode==40)
    document.getElementById("man").style.pixelTop=document.getElementById("man").style.pixelTop+5;
  if (event.keyCode==37)
    document.getElementById("man").style.pixelLeft=document.getElementById("man").style.pixelLeft-5;
  if (event.keyCode==39)
    document.getElementById("man").style.pixelLeft=document.getElementById("man").style.pixelLeft+5;
 }
document.onkeydown= move ;
 </SCRIPT>
</HEAD>

<BODY>
<DIV id="man"><IMG src="images/man.gif" width="82" height="152"></DIV>
</BODY>
</HTML>

 

旭日初扬
关注
专栏目录
js实现左右两侧浮动广告
12-29
本文实例为大家分享了js实现左右浮动广告展示的具体代码，供大家参考，具体内容如下 <html> <title>左右两侧浮动广告</title> <head> </head> <body> <table xss=removed align=center> <tr><td> </td></tr> </table> [removed] <!-- var showad = true; var Toppx = 60; //上端位置 var AdDi
Js广告_全屏漂浮广告
weixin_33804990的博客
10-11 256
1 &lt;!DOCTYPE HTML&gt; 2 &lt;html lang="en"&gt; 3 &lt;head&gt; 4 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; 5 &lt;title&gt;Js广告_全屏漂浮广告&lt
JavaScript 动态网页实例 —— 广告效果
最新发布
cccloveforever的博客
07-02 1016
广告是现代网页设计中不可或缺的内容。广告可以有很多种形式，但最终目的都是要吸引观众的注意力。尽管广告少不了画面、音效和广告语等效果，但其实现主要还是应用JavaScript 代码，只要很好掌握了JavaScript程序设计，剩下的就是创意和美工了。本章介绍几种广告效果，包括对联广告、飘动广告、滚动广告和特殊视觉效果的广告，相信读者会从中受到启发。
Js悬浮广告代码
skudhdk的博客
10-13 704
【代码】Js悬浮广告代码。
JS中的pixelTop属性
你若盛开，清风自来
12-02 1707
style对象： pixelLeft pixelTop pixelWidth pixelHeight 返回以像素为单位的位置坐标的数值,非像素单位转换为像素单位显示。 left top width height 返回带单位的位置坐标字符串 top的值是String pixelTop的值是Integer left (x),top (y)是带单位的值 pixelLeft,pixelTop是不带单位的值 参考： https://www.php.cn/div-tutorial-368058.ht
js实现广告弹出框
kzhzhang的专栏
11-01 2187
测试 body { background: #333333; } #winpop { width: 400px; height: 0px; position: absolute; right: 0; bottom: 0; border: 1px solid #999999; margin: 0; padding: 1px; ...
JavaScript应用实例-悬浮按钮-成品.js
12-09
JavaScript应用实例-悬浮按钮-成品.js
使用Arduino的超声波悬浮机-电路方案
04-20
我只是用超声波将小物体悬浮起来。 硬件部件: Arduino UNO和Genuino UNO×1个 超声波传感器-HC-SR04（通用）×1个 双H桥电机驱动器L298×1个 9V电池（通用）×1个 软件应用程序和在线服务: Arduino IDE 手动工具和...
鼠标悬浮动态折线图-Excel表格.pdf
11-16
鼠标悬浮动态折线图-Excel表格.pdf
uni-fab彩色悬浮按钮
12-01
将此代码复制到unimoudle下的uni-fab.vue内直接可以用
jquery弹出悬浮插件webui-popover.zip
07-04
《jQuery弹出悬浮插件WebUI-Popover详解》 在网页开发中，为了提供更好的用户体验，工具提示（Tooltip）和弹出悬浮窗是不可或缺的元素。jQuery弹出悬浮插件WebUI-Popover就是这样一款轻量级的解决方案，它为开发者...
基于JavaScript代码实现随机漂浮图片广告
11-24
在网上有很多这样的代码，不过未必符合W3C标准，因为在头部加上<!DOCTYPE html>类似标签之后，漂浮效果就会失效，下面分享一个符合标准的漂浮代码，使需要的朋友免去大量改造代码的繁琐。 代码一： 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>漂浮广告代码</title> <style type="text/css"> #thediv { z-index:100; positio
全屏漂浮代码html,js非常好用的全屏漂浮广告代码
weixin_42503076的博客
06-09 695
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;var img_ad1 = document.getElementById("i...
Js浮动广告效果实现
xiaozhen0610的博客
07-13 3276
第一种 漂浮广告 不符合W3CJavaScript漂浮广告代码，很不错，代码精简，不过一次只有漂一个，复制就能用了。希望站长朋友喜欢。 <html> <head> <title>漂浮广告</title> <body> <div id="codefans_net" style="position:absolute"> <!--链接地址--><a href="#" target="_blank">
js: 广告相关
qq_36413371的博客
06-29 345
广告类型： a. 激励视频广告【会发生这四大事件：广告提示，选择观看，广告奖励，使用奖励】， b. 原生广告【视频类：视频背景的广告牌也可以是视频暂停、加载、结束后弹出的广告插屏。应用开机&主题表情。桌面原生广告（桌面原生广告）。 Feeds信息流 （如Facebook、新浪微博、微信广告等在信息流中插入广告）。手机导航、搜索类】， c. banner广告【位于网页顶部，中部，底部任意一处，但是横向贯穿整个或者大半个页面的广告条】， d. 插屏广告【在用户做出相应的操作（如开启、暂停、过关、跳转、.
php底部漂浮广告位代码,网站顶部底部（上下）悬浮（漂浮）广告位代码
weixin_30746067的博客
03-25 1663
自己找了很久 分享出来，希望可以帮到大家底部悬浮广告代码@mediascreenand(max-device-width:800px){/**WAP**/.bottom_fixed{position:fixed;bottom:0px;width:100%;z-index:99999;}.bottom_fixeddiv{width:30px;height:30px;text...
前端js——悬浮、漂浮广告模板、鼠标移入移出事件、定时器控制div运动
qq_41141657的博客
03-15 3485
1.布局 广告图，关闭按钮 &lt;div id="box"&gt; &lt;img src="../HTML/img/关闭.png" id="close" /&gt; &lt;/div&gt; 2.样式 广告大小，固定关闭按钮在广告的右上角 *{ margin: 0; padding: 0; } #box{ width: 300px; hei..
JS实现漂浮广告功能
zxh996的博客
07-11 7020
JS实现漂浮广告功能前言一、漂浮广告案例 前言 漂浮广告非常简单也是老案例了，在网页的设计中可直接拿去用，原理都是我之前文章所讲到的，如果有什么不明白的可以看看我之前的文章，仅供参考学习。 一、漂浮广告案例 我在这个案例里面加了一些其他的操作，例如：移入时广告静止，移出时广告漂浮，点击一次跳转到另一个页面，点击俩次广告消失。 代码如下（示例）： <style type="text/css"> #div1 { width: 300px;
js漂浮广告
cai niaoyihao_的博客
05-12 796
js漂浮广告
紫外-可见光下水体悬浮颗粒物散射特性研究
"基于米氏散射理论的水中悬浮颗粒物散射特性计算" 本文深入探讨了水中悬浮颗粒物对光散射的影响，特别是在紫外-可见光谱范围内。研究的核心是利用米氏散射理论，该理论是描述光与球形粒子相互作用的经典理论，能够...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值