JS控制HTML元素的显示和隐藏+网站浮标

最新推荐文章于 2022-04-22 22:57:51 发布
最新推荐文章于 2022-04-22 22:57:51 发布
阅读量2.3k 收藏
点赞数
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/Prepared/article/details/78204893
版权
1）JS控制div位置，举例：浮标 
img2.style.left = xPos + document.body.scrollLeft;
img2.style.top = yPos + document.body.scrollTop;
2）js控制DIV的显示和隐藏 
document.getElementById("img2").visibility = "visible";

document.getElementById("img2").visibility = "hidden";
还可以：
document.getElementById("img2").style.display= "none"

document.getElementById("img2").style.display= "block"

浮标代码：
<html>
<head>
<title></title>

</head>
<body>
  		<!-- 浮动图标 -->
		<div id="img2" style="position:absolute; left:0px; top:0px;">
			
			<a href="http://sea.weather.gov.cn/weatherRisk/" target="_blank"><img
				src="logo.jpg" height="50px" width="50px"
				border="0"></a>
				<a href="javascript:void(0);" οnclick="hideDiv()" ><img src="error.png" style="padding-top:0px;"/></a>
				<br>
				风险评估
		</div>
		<!-- 浮动图标 -->
		<script type="text/javascript">
function hideDiv(){
	document.getElementById('img2').style.visibility="hidden";
};
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;
var img2 = document.getElementById("img2");
img2.style.top = yPos;

function changePos() {
	width = document.body.clientWidth;
	height = document.body.clientHeight;
	Hoffset = img2.offsetHeight;
	Woffset = img2.offsetWidth;
	img2.style.left = xPos + document.body.scrollLeft;
	img2.style.top = yPos + document.body.scrollTop;
//或者
 //document.getElementById('img2').style.top = yPos +"px";
	//document.getElementById('img2').style.left = xPos + "px";
	//img2.style.top=110;
	if (yon) {
		yPos = yPos + step;
		//alert(yPos);
	}
	else {
		yPos = yPos - step;
		//alert(yPos);
	}
	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 www() {
	img2.visibility = "visible";
	interval = setInterval('changePos()', delay);
}
www();

</script>
</body>
</html>


参考：http://www.cnblogs.com/unpolishedgem/p/3247098.html







                

        

        

    




    

      

        

            

              
                
                  伍六七AI编程
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  2
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
js实现漂浮特效

				
			

			

				

					m210516的博客
				

				

					03-27
					
					1090
					
				

			

		

		

			
				
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title&...

			
		

	



                

              
                



	

		

			

				
					
HTML 浮动标签

				
			

			

				

					m0_65480869的博客
				

				

					07-21
					
					1455
					
				

			

		

		

			
				
浮动标签

			
		

	



                


  
              

                


	

		

			

				
					
使用html创建浮标,自制浮漂其实很简单，不信你来看一看

				
			

			

				

					weixin_39611725的博客
				

				

					06-20
					
					561
					
				

			

		

		

			
				
看到各位钓友和大师位发的制作浮漂的贴子很不错，其中大师级别制作的浮漂更是漂亮，让我也有了自己制作浮漂的想法。说实话佷早以前自己就做过浮浮漂，只是那时没有买到好的放大漂漆，所以做出来的漂看着还可以，就是漂漆不好，看不清。前几日在钓鱼之家商城买到一套黄金眼漂漆，让我从新有了自制浮漂的想法。这是在钓鱼之家商城买的放大漆，我把我用过的浮漂都上了一遍漆，很不错。说实话，我自制浮漂很简单，也没有漂床等工具，就...

			
		

	





	

		

			

				
					
JavaScript:用JS函数隐藏浏览器地址栏

					
热门推荐

				
			

			

				

					
				

				

					04-10
					
					2万+
					
				

			

		

		

			
				
1、直接函数调用法： 

在Body标签之前插入如下代码 

 

function openwin(url) { 
window.open (url, “newwindow”, “height=300, width=400, top=200,left=200 toolbar =no, menubar=no, scrollbars=no, resizable=no, location

			
		

	



		

			
		



	

		

			

				
					
javascript浮标.html

				
			

			

				

					11-07
				

			

		

		

			
				
js浮标.htmljs浮标.htmljs浮标.html

			
		

	





	

		

			

				
					
JavaScript控制HTML元素显示和隐藏

				
			

			

				

					gavinloo的专栏
				

				

					05-10
					
					3670
					
				

			

		

		

			
				
<br />做问卷调查系统的时候需要依据用户的选项实时的显示或隐藏一些问题，这就需要用到Javascript来控制HTML元素的显示和隐藏。代码实现起来比较简单，简单的介绍一下如何实现的。<br /><br />1 、编写 js 函数<br /><script type="text/javascript"><br />    function display(id){<br />        var traget=document.getElementById(id);<br />         if(

			
		

	





	

		

			

				
					
html元素隐藏js 控制,JS控制HTML元素的显示和隐藏的两种方法

				
			

			

				

					weixin_35698059的博客
				

				

					06-03
					
					1992
					
				

			

		

		

			
				
JS控制HTML元素的显示和隐藏的两种方法利用来JS控制页面控件显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。方法一：document.getElementById("EleId").style.visibility="hidden";document.getElementById("EleId").style.vis...

			
		

	





	

		

			

				
					
js+css3绘制海上波浪浮标菜单.zip

					
最新发布

				
			

			

				

					11-01
				

			

		

		

			
				
【标题】"js+css3绘制海上波浪浮标菜单.zip"所涉及的知识点主要集中在JavaScript（js）和CSS3这两个前端技术上，用于创建一个动态的、具有海洋风格的波浪浮标菜单。这样的菜单设计可以提升用户体验，使用户在浏览...

			
		

	





	

		

			

				
					
基于STM32的定点剖面浮标监控系统设计.pdf

				
			

			

				

					06-24
				

			

		

		

			
				
定点剖面浮标监控系统包括浮标本体的下位机控制系统和岸基人机交互系统。定点剖面浮标电控系统是以STM32单片机为控制核心,控制浮力调节步进电机以实现浮标下潜和上浮,定时采集压力传感器和溶解氧传感器以获取不同...

			
		

	





	

		

			

				
					
以PLC为控制核心的立式浮标自动喷漆系统的应用.pdf

				
			

			

				

					08-07
				

			

		

		

			
				
#资源达人分享计划#

			
		

	





	

		

			

				
					
HTML5(悬浮球)

				
			

			

				

					03-15
				

			

		

		

			
				
试下手机的悬浮球,随时拖动,支持点击事件,在浏览器上运行后按F12进入到手机模式才可以看到效果

			
		

	





	

		

			

				
					
flot-polar:flotcharts.org 显示极坐标数据的浮标插件

				
			

			

				

					06-18
				

			

		

		

			
				
4. **API集成**：Flot-Polar与Flot的API紧密集成，这意味着你可以使用相同的API方法来创建、更新和控制极坐标图表，如`.plot()`、`.resize()`和`.setData()`。  5. **性能优化**：Flot-Polar在处理大量数据时表现...

			
		

	





	

		

			

				
					
js浮漂

				
			

			

				

					weixin_30569153的博客
				

				

					09-03
					
					153
					
				

			

		

		

			
				
Element.clientWidth属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。

获取画布宽度的方式如下
canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidt
获取窗口的高度与宽度(不...

			
		

	





	

		

			

				
					
用纯js实现悬浮按钮组件

				
			

			

				

					java_goodstudy的博客
				

				

					12-17
					
					9924
					
				

			

		

		

			
				
先上效果  下面附上代码   使用方式很简单只需要 在页面引入这段js 即可
$(()=> {
    let param = {
        tag: true,
        num: 1,
        ele: document.createElement('div'),
        icon: '',
        homeIcon: '',

			
		

	





	

		

			

				
					
JS--实现漂浮广告

				
			

			

				

					qq377751971的博客
				

				

					03-23
					
					8892
					
				

			

		

		

			
				
//html代码    

    "ad" style="position:absolute">

        "http://www.cxyblog.com/">

            "img/cxyblog.jpg" />

        

    

 

   

       var x = 50,y = 60

       var 

			
		

	





	

		

			

				
					
【web前端】CSS笔记小结 浮动+清除浮动+PS切图（Day 5）

				
			

			

				

					weixin_61096287的博客
				

				

					04-22
					
					877
					
				

			

		

		

			
				
来源：黑马程序员pink老师前端入门教程

I. 浮动



II.常见网页布局


III. 清除浮动



IV. PS切图



V.学成在线案例




			
		

	





	

		

			

				
					
利用JS实现悬浮导航的隐藏和显示

				
			

			

				

					JSZY-YYDS的博客
				

				

					05-27
					
					3177
					
				

			

		

		

			
				
利用JS实现悬浮导航的隐藏和显示

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： DW和JavaScript

作者：韩日九儿


撰写时间：2021/5/27


一.实现悬浮导航隐藏和显示的思路。

1.你如果想实现某元素的隐藏和显示，那么就要设置某元素的定位才可以实现。

2.下面是实现悬浮导航隐藏和显示的css样式，其中id为#navbg的元素我给了它固定位。



			
		

	





	

		

			

				
					
使用html创建浮标,介绍最基本的浮标调整方法，让大家钓鱼时鱼鱼得水

				
			

			

				

					weixin_30869777的博客
				

				

					06-20
					
					264
					
				

			

		

		

			
				
钓鱼为了提高上鱼率，浮标的灵敏度也是很重要的，所以浮标的调整也是钓鱼的关键。传统手竿方法钓鱼，不论是用立标还是七星标，钓前按水深调整浮标位置，与垂钓时原则上为同一目数。而有一种钓法在钓前调整的目数与垂钓时不同，我们通常称它为调四、钓两目，就是钓前调整浮标为双沟不挂饵时，铅坠和连接环等总重量可使浮标受力下沉，标示杆露出水面四目，此时坠和钩应悬在水中。当鱼钩装上饵料时，双沟饵沉到底，铅坠悬浮水中，浮标...

			
		

	





	

		

			

				
					
html浮标固定右下角,HTML – 为什么浮标在逃到下一行时会留下“幻影”空间？...

				
			

			

				

					weixin_29001655的博客
				

				

					06-18
					
					112
					
				

			

		

		

			
				
这个空间是浮动的原因：孩子们的左边你需要编写@media查询,以便.parent调整@media screen and (max-width: 400px){.col{float:none;}}将以下小提琴调整为最大宽度400pxbody {font-family: "Helvetica";}.parent {background-color: yellow;overflow: auto;padd...

			
		

	





	

		

			

				
					
ARM+FPGA在水声浮标数据采集存储系统的应用研究

				
			

			

				

					
				

			

		

		

			
				
"ARM和FPGA在水声浮标数据采集存储中的应用"  本文详细探讨了ARM处理器和FPGA（Field-Programmable Gate Array）在水声浮标数据采集存储系统中的应用。水声浮标作为一种重要的海洋声学测量设备，其数据采集存储技术...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
伍六七AI编程

			
你猜你给我1分我要不要

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值