浮动图标代码

最新推荐文章于 2021-06-04 17:14:42 发布
最新推荐文章于 2021-06-04 17:14:42 发布
阅读量206 收藏
点赞数
文章标签： javascript xhtml ViewUI

 

<!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>wahaha</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<script type="text/javascript">
<!--
//公共脚本文件 main.js
function addEvent(obj,evtType,func,cap){
    cap=cap||false;
if(obj.addEventListener){
     obj.addEventListener(evtType,func,cap);
return true;
 }else if(obj.attachEvent){
if(cap){
         obj.setCapture();
return true;
     }else{
return obj.attachEvent("on" + evtType,func);
  }
 }else{
return false;
    }
}
function getPageScroll(){
var xScroll,yScroll;
if (self.pageXOffset) {
  xScroll = self.pageXOffset;
 } else if (document.documentElement && document.documentElement.scrollLeft){
  xScroll = document.documentElement.scrollLeft;
 } else if (document.body) {
  xScroll = document.body.scrollLeft;
 }
if (self.pageYOffset) {
  yScroll = self.pageYOffset;
 } else if (document.documentElement && document.documentElement.scrollTop){
  yScroll = document.documentElement.scrollTop;
 } else if (document.body) {
  yScroll = document.body.scrollTop;
 }
 arrayPageScroll = new Array(xScroll,yScroll);
return arrayPageScroll;
}
function GetPageSize(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) { 
        xScroll = document.body.scrollWidth;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight > document.body.offsetHeight){
        xScroll = document.body.scrollWidth;
        yScroll = document.body.scrollHeight;
    } else {
        xScroll = document.body.offsetWidth;
        yScroll = document.body.offsetHeight;
    }
var windowWidth, windowHeight;
if (self.innerHeight) {
        windowWidth = self.innerWidth;
        windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
    } else if (document.body) {
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
    } 
if(yScroll < windowHeight){
        pageHeight = windowHeight;
    } else { 
        pageHeight = yScroll;
    }
if(xScroll < windowWidth){ 
        pageWidth = windowWidth;
    } else {
        pageWidth = xScroll;
    }
    arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
return arrayPageSize;
}
//广告脚本文件 AdMove.js
/*
例子
<div id="Div2">
    ***** content ******
</div>
var ad=new AdMove("Div2");
ad.Run();
*/
////////////////////////////////////////////////////////
var AdMoveConfig=new Object();
AdMoveConfig.IsInitialized=false;
AdMoveConfig.ScrollX=0;
AdMoveConfig.ScrollY=0;
AdMoveConfig.MoveWidth=0;
AdMoveConfig.MoveHeight=0;
AdMoveConfig.Resize=function(){
var winsize=GetPageSize();
    AdMoveConfig.MoveWidth=winsize[2];
    AdMoveConfig.MoveHeight=winsize[3];
    AdMoveConfig.Scroll();
}
AdMoveConfig.Scroll=function(){
var winscroll=getPageScroll();
    AdMoveConfig.ScrollX=winscroll[0];
    AdMoveConfig.ScrollY=winscroll[1];
}
addEvent(window,"resize",AdMoveConfig.Resize);
addEvent(window,"scroll",AdMoveConfig.Scroll);
function AdMove(id){
if(!AdMoveConfig.IsInitialized){
        AdMoveConfig.Resize();
        AdMoveConfig.IsInitialized=true;
    }
var obj=document.getElementById(id);
    obj.style.position="absolute";
var W=AdMoveConfig.MoveWidth-obj.offsetWidth;
var H=AdMoveConfig.MoveHeight-obj.offsetHeight;
var x = W*Math.random(),y = H*Math.random();
var rad=(Math.random()+1)*Math.PI/6;
    var kx=Math.sin(rad),ky=Math.cos(rad);
var dirx = (Math.random()<0.5?1:-1), diry = (Math.random()<0.5?1:-1);
var step = 1;
var interval;
this.SetLocation=function(vx,vy){x=vx;y=vy;}
this.SetDirection=function(vx,vy){dirx=vx;diry=vy;}
    obj.CustomMethod=function(){
        obj.style.left = (x + AdMoveConfig.ScrollX) + "px";
        obj.style.top = (y + AdMoveConfig.ScrollY) + "px";
        rad=(Math.random()+1)*Math.PI/6;
        W=AdMoveConfig.MoveWidth-obj.offsetWidth;
        H=AdMoveConfig.MoveHeight-obj.offsetHeight;
        x = x + step*kx*dirx;
if (x < 0){dirx = 1;x = 0;kx=Math.sin(rad);ky=Math.cos(rad);} 
if (x > W){dirx = -1;x = W;kx=Math.sin(rad);ky=Math.cos(rad);}
        y = y + step*ky*diry;
if (y < 0){diry = 1;y = 0;kx=Math.sin(rad);ky=Math.cos(rad);} 
if (y > H){diry = -1;y = H;kx=Math.sin(rad);ky=Math.cos(rad);}
    }
this.Run=function(){
var delay = 10;
        interval=setInterval(obj.CustomMethod,delay);
        obj.onmouseover=function(){clearInterval(interval);}
        obj.onmouseout=function(){interval=setInterval(obj.CustomMethod, delay);}
    }
}
//-->
 </script>
</head>
<body>
<div id="gg1" style="width:100px;height:100px;background-color:red;color:yellow">
     广告1
<div style='text-align:right'>[<a href="javascript:void(0)" onclick="this.parentNode.parentNode.style.display = 'none'">关闭</a>]</div>
</div>
<script type="text/javascript">
<!--
var ad1=new AdMove("gg1");
        ad1.Run();

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




 

                

        




    

    
  


            

                    
            


    



                



	

		

			

				
					
精美浮动代码及图片

				
			

			

				

					05-25
				

			

		

		

			
				

    
        
            
            	
                
            
        
        
            
            	
                
            
        
        
            
            	
                
            
        
        
            
            	
                
            
        
        
            
            	
                
            
        
    


			
		

	



                

            
              



	

		

			

				
					
又一个不错的js浮动广告代码

				
			

			

				

					10-30
				

			

		

		

			
				
- **定义与应用场景**：JS（JavaScript）浮动广告代码是一种利用JavaScript语言编写的脚本，用于在网页上实现浮动广告效果。这种广告通常会跟随用户的滚动而移动，保持在用户视线范围内，从而提高广告的曝光率和点击...

			
		

	



              


  
              

                


	

		

			

				
					
XHTML中有关浮动图标实现的代码

				
			

			

				

					ToTem's BLOG
				

				

					03-22
					
					1546
					
				

			

		

		

			
				
不必去除页面最上头的http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">代码一样可以实现浮动广告的效果。   //   var adLeftSrc = ""   var adLeftFlash = ""   var adLeftHref = ""   var adLeftWidth = 80   var adLeftHeight = 8

			
		

	





	

		

			

				
					
图标浮动的js代码

				
			

			

				

					ccx20060810501的专栏
				

				

					09-23
					
					268
					
				

			

		

		

			
				
//start 图标浮动
		var dirX=1,dirY=1;
		var xPos = 0,yPos = 0;
		function displayIcon(){	
			//多种引用方式
			float_icon.style.top=0;
			document.body.all.float_icon.style.left=0;
			document.body.all("...

			
		

	



		

			
		



	

		

			

				
					
网页返回顶部浮动图标代码

				
			

			

				

					weixin_34067102的博客
				

				

					11-03
					
					268
					
				

			

		

		

			
				

CSS

&lt;style&gt;
&lt;!--
.back-to {
    bottom: 35px;
    overflow: hidden;
    position: fixed;
    right: 10px;
    width: 110px;
    z-index: 999;
}
.back-to .back-top {
    backgr...

			
		

	





	

		

			

				
					
html浮动图标代码,返回顶部浮动图标代码

				
			

			

				

					weixin_33856202的博客
				

				

					06-04
					
					507
					
				

			

		

		

			
				
博主,您好,您的这个教程的方法很好,也很美观.但是我有些问题想请教您,谢谢了.我按照您的方法添加代码到源文件里的时候并没有生效.不知道是不是我方法不对.我的是WordPress驱动,我将以下代码添加到footer.php文件中=============================返VDE;顶部$(document).ready(function () {var bt = $('#toolBac...

			
		

	





	

		

			

				
					
点击图标按钮浮动展开特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
在网页设计和开发中，交互性和用户体验是至关重要的因素，"点击图标按钮浮动展开特效代码"就是这样一个功能，旨在提升用户在浏览网站时的互动体验。这个特效利用jQuery库来实现，jQuery是一个广泛使用的JavaScript库...

			
		

	





	

		

			

				
					
带返回顶部jquery浮动客服代码

				
			

			

				

					04-02
				

			

		

		

			
				
这款代码利用jQuery的强大功能，实现了浮动物件的动态效果，使得客服图标始终在用户视野范围内，无论他们滚动页面到哪个位置。  返回顶部功能是现代网页设计中常见的一种用户体验优化策略。当用户浏览长页面时，点击...

			
		

	





	

		

			

				
					
Android应用中制作选中后图标变大浮动效果的代码分享

				
			

			

				

					09-02
				

			

		

		

			
				
总结来说，要实现Android应用中的图标选中后变大浮动效果，开发者需要创建一个`ScaleAnimation`实例，设定好缩放比例、锚点位置和动画持续时间，然后在按钮的触摸事件中启动动画。这样的设计能够为用户提供直观且...

			
		

	





	

		

			

				
					
左侧浮动可折叠的QQ在线客服代码

				
			

			

				

					06-10
				

			

		

		

			
				
1. **左侧浮动**：代码实现了将客服图标或窗口固定在网页的左侧，这样无论用户滚动页面到哪个位置，客服始终可见，方便他们随时发起咨询。这种设计符合大多数用户的浏览习惯，因为左侧通常被认为是网页的主要导航...

			
		

	





	

		

			

				
					
微信图片浮动代码

				
			

			

				

					07-07
				

			

		

		

			
				
一段简单清晰明了的浮动窗口代码，可修改浮动窗口位置等

			
		

	





	

		

			

				
					
HTML5(悬浮球)

				
			

			

				

					03-15
				

			

		

		

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

			
		

	





	

		

			

				
					
淘宝装修的图片悬浮代码

				
			

			

				

					09-08
				

			

		

		

			
				
适用于阿里 淘宝 自定义项目 悬浮导航的右侧   实现右侧的固定悬浮  位置可调

			
		

	





	

		

			

				
					
css3右下角悬浮圆形图标客服菜单代码

				
			

			

				

					06-10
				

			

		

		

			
				
纯css3实现一款简单易用的右下角悬浮圆形图标客服菜单代码，点击右下角查看样式，可展开收缩二维码，qq客服，等。

			
		

	





	

		

			

				
					
自适应网页右下角悬浮图标【带闪动】客服代码特效

				
			

			

				

					03-25
				

			

		

		

			
				
1.适用于手机端网页；2.右下角电话图标，带闪动特效；3.点击图标弹出层，显示客服电话号码，点击拨号自动拨号显示的电话号码；4.带关闭按钮
代码适用于手机网页客服电话显示特效，需要懂点网页前端知识整合使用，代码为网页特效代码，下载者应当遵守相关法律法规，遵守优快云相关资源规则制度，切勿做非法用途！

			
		

	





	

		

			

				
					
javascript 实现FLASH浮动图标广告代码

				
			

			

				

					one_dollar
				

				

					04-15
					
					2012
					
				

			

		

		

			
				
　　使用　Javascript 代码，实现一个可移动的图标在网页上飘动，鼠标放在上面的时候，图标不动，移开后，图标又开始移动．javascript 代码如下：script language=javascript> var xPos = 0;var yPos = 0; var step = 1;var delay = 10;var height = 0; var Hoffset = 

			
		

	





	

		

			

				
					
返回顶部浮动图标代码

				
			

			

				

					云淡风轻、仅此一抹
				

				

					11-25
					
					8655
					
				

			

		

		

			
				
代码使用很简单，只需要将HTML代码，和jQuery代码放入到网页的尾部即可。另外你可能还需要和我一样盗用人人网的返回顶部图片一张。
 
  
 返回顶部 
  
 
  
 $(document).ready(function () { 
         var bt = $('#toolBackTop'); 
         var sw = $(document.body)[0].c

			
		

	





	

		

			

				
					
C#制作浮动图标窗体

				
			

			

				

					weixin_30820151的博客
				

				

					06-28
					
					808
					
				

			

		

		

			
				
先看效果：

　　这个小图标可以进行随意拖拽，点击还可以产生事件

随便演示一下，效果就是这样的。
下面直接演示如何制作：
新建一个窗体，设置窗体的FormBorderStyle为None(去掉窗体边框)；
调整窗体的大小，和你的图标差不多大小就行，至于动态图，还在测试中，图标必须是没有背景的，因为有背景的图片展示出来，即时窗体透明，也会显示图片的白色背景，会很丑，所以要选...

			
		

	





	

		

			

				
					
网页中页面浮动图标的简单实现

				
			

			

				

					leening的专栏
				

				

					02-09
					
					2141
					
				

			

		

		

			
				
 script language="JavaScript">    var delta=0.5    var collection;    function floaters() {        this.items    = [];        this.addItem    = function(id,x,y,content)                  {           

			
		

	





	

		

			

				
					
实现360手机卫士浮动图标功能的简单Demo介绍

				
			

			

				

					
				

			

		

		

			
				
根据上述分析，【压缩包子文件的文件名称列表】中的FloatViewDemo很可能包含了实现浮动图标的各种相关文件，如Activity文件、Service文件、布局文件，以及权限申请和事件处理的相关代码。通过综合运用Android开发中...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值