jsfoot 网页特效--悬浮层，支持上、下、左、右、右中、左中浮动

今天药忘吃喽~ 2022-04-16 07:10 186阅读 0赞

[http://www.jsfoot.com/jquery/rating/][http_www.jsfoot.com_jquery_rating]

这里面有很多的特效。。。非常实用。。。嘿嘿。。。

而且代码非常优美。。。O(∩\_∩)O哈哈~。。

下面就是个例子：

<script type="text/javascript">
    
    /**
     * $.float
     * @extends jquery.1.4
     * @fileOverview 创建一个悬浮层，支持上、下、左、右、右中、左中浮动
     * @author 
     * @email mohaiguyan12@126.com
     * @version 0.1
     * @date 2010-04-18
     * Copyright (c) 2010-2010 
     * @example
     *    $("#to-right").float({position:"rm"}); //右中位置浮动
     */
    jQuery.fn.float= function(settings){
    	if(typeof settings == "object"){
    		settings = jQuery.extend({
    			//延迟
    			delay : 1000,
    			//位置偏移
    			offset : {
    				left : 0,
    				right : 0,
    				top : 0,
    				bottom : 0
    			},
    			style : null, //样式
    			width:100,  //宽度
    			height:200, //高度
    			position:"rm" //位置
    		}, settings || {});	
    		var winW = $(window).width();
    		var winH = $(window).height();
    		
    		 //根据参数获取位置数值
    		function getPosition($applyTo,position){
    			var _pos = null;
    			switch(position){
    				case "rm" : 
    					$applyTo.data("offset","right");
    					$applyTo.data("offsetPostion",settings.offset.right);
    					_pos = {right:settings.offset.right,top:winH/2-$applyTo.innerHeight()/2};
    				break;
    				case "lm" :
    					$applyTo.data("offset","left");
    					$applyTo.data("offsetPostion",settings.offset.left);
    					_pos = {left:settings.offset.left,top:winH/2-$applyTo.innerHeight()/2};
    				break;
    				case "rb" :
    					_pos = {right:settings.offset.right,top:winH - $applyTo.innerHeight()};
    				break;
    				case "lb" :
    					_pos = {left:settings.offset.left,top:winH - $applyTo.innerHeight()};
    				break;
    				case "l" : 
    					_pos = {left:settings.offset.left,top:settings.offset.top};
    				break;
    				case "r" : 
    					_pos = {right:settings.offset.right,top:settings.offset.top};
    				break;				
    				case "t" :
    					$applyTo.data("offset","top");
    					$applyTo.data("offsetPostion",settings.offset.top);					
    					_pos = {left:settings.offset.left,top:settings.offset.top};
    				break;
    				case "b" :
    					$applyTo.data("offset","bottom");
    					$applyTo.data("offsetPostion",settings.offset.bottom);					
    					_pos = {left:settings.offset.left,top:winH - $applyTo.innerHeight()};				
    				break;
    			}
    			return _pos;
    		}
    		//设置容器位置
    		function setPosition($applyTo,position,isUseAnimate){
    			var scrollTop = $(window).scrollTop();
    			var scrollLeft = $(window).scrollLeft();
    			var _pos = getPosition($applyTo,position);
    			_pos.top += scrollTop;
    			isUseAnimate && $applyTo.stop().animate(_pos,settings.delay) || $applyTo.css(_pos);
    		} 
    		return this.each(function(){
    			var $this =  $(this);
    			$this.css("position","absolute");
    			settings.style && $this.css(settings.style);
    			setPosition($this,settings.position);
    			$(this).data("isAllowScroll",true);
    			$(window).scroll(function(){
    				$this.data("isAllowScroll") && setPosition($this,settings.position,true);
    			});
    		})	
    	}else{
    		var speed = arguments.length > 1 && arguments[1] || "fast"; 
    		this.each(function(){		   
    			if(settings == "clearOffset"){
    					var _c = {};
    					if($(this).data("offset")){
    						 _c[$(this).data("offset")] = 0; 
    						 $(this).data("isAllowScroll",false);
    						 $(this).stop().animate(_c,speed);
    					}
    			}else if(settings == "addOffset"){
    					var _c = {};
    					if($(this).data("offset") && $(this).data("offsetPostion")){
    						 _c[$(this).data("offset")] = $(this).data("offsetPostion"); 
    						 $(this).stop().animate(_c,speed);
    						 $(this).data("isAllowScroll",true);
    					}
    									   
    			}else if(settings == "setScrollDisable"){
    				$(this).data("isAllowScroll",false);
    			}else if(settings == "setScrollUsable"){
    				$(this).data("isAllowScroll",true);	
    			}
    		})
    	}
    }
    
    $(function(){
    
    	$(".customer").float({
    		delay : 500,//延迟
    		position:"rb" //位置
    	});
    	
    	$("#close").click(function(){
    		  $(".customer").hide();
    	 });
    	
    });
    </script>

HTML：

<div class="customer" style="width: 360px;height: 160px" >
    	<table width="100%" border="0" cellpadding="0" cellspacing="0" style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" bgcolor="#cfdef4">
    		<tr>
    			<td height="24" width="26" style="FONT-SIZE: 12px; BACKGROUND-IMAGE: url(images/msgTopBg.gif); COLOR: #0f2c8c" valign="middle">
    				<img src="images/msgLogo.gif" hspace="5" align="absMiddle" vspace="1" />
    			</td>
    			<td style="FONT-WEIGHT: normal; FONT-SIZE: 9pt; BACKGROUND-IMAGE: url(images/msgTopBg.gif); COLOR: #1f336b; PADDING-TOP: 4px" valign="middle" width="100%">
    				系统消息
    			</td>
    			<td style="BACKGROUND-IMAGE: url(images/msgTopBg.gif); PADDING-TOP: 2px" valign="middle" width="19" align="right">
    				<img id="close" src="images/msgClose.gif" hspace="3" style="CURSOR: pointer"  title="关闭" />
    			</td>
    		</tr>
    		<tr>
    			<td colspan="3" height="90" style="PADDING-RIGHT: 1px; BACKGROUND-IMAGE: url(images/msgBottomBg.jpg); PADDING-BOTTOM: 1px">
    				<div style="BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 9pt; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%">
    					<a href="#" style="FONT-WEIGHT: bold; COLOR: red">>>您有 3 条未读消息</a>
    					<br/>
    					<br/>
    					<a href="#" target="_blank" style="FONT-WEIGHT: bold; COLOR: blue">>>您有 4 个未处理任务</a>
    				</div>
    		</tr>
    	</table>
    
    </div>

效果：

![6a6f7213-e5eb-3d6f-ba39-f6f686a2017c.jpg][]

附件下载：

[http_www.jsfoot.com_jquery_rating]: http://www.jsfoot.com/jquery/rating/
[6a6f7213-e5eb-3d6f-ba39-f6f686a2017c.jpg]: /images/20220416/ef493e6322754362b6fb4323a9cad3d8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 [Python中矩阵上下左右翻转（np.flip）]

\[Python中矩阵上下左右翻转（np.flip）\] 现代编程语言和相关库的发展，使得数值计算和数据处理变得更加便捷和高效。在Python中，NumPy库是众多数据科学和

水深无声/ 2024年03月24日 09:47/ 0 赞/ 26 阅读

相关 html DI在DIV中上下左右居中

要在HTML中实现上下左右居中，可以使用CSS的Flexbox布局或Grid布局。下面是两种方法的示例代码：使用Flexbox布局：使用Grid布局：这两种方法都将

偏执的太偏执、/ 2024年02月21日 12:02/ 0 赞/ 16 阅读

相关上下左右手势

-(void)viewDidLoad{ UISwipeGestureRecognizer recognizer; recogniz

港控/mmm°/ 2023年10月18日 13:36/ 0 赞/ 91 阅读

相关 unity3d中上下左右键控制移动

using UnityEngine; using System.Collections; public class MoveByA

ゝ一纸荒年。/ 2022年09月23日 11:50/ 0 赞/ 466 阅读

相关 JS网页右下角悬浮提示层代码

[下载地址][Link 1]JS网页右下角悬浮提示层代码，支持4种默认，成功，警告，危险等提示框样式代码 ![1631277586.png][] dd: [Link 1

骑猪看日落/ 2022年09月11日 03:10/ 0 赞/ 149 阅读

相关 JS实现列表数据左右、上下移动功能

本文主要介绍JS实现将左边下拉框列表选中项数据添加到右边的功能，支持多选移动。文章中提供了两种方案，一种是将左侧选中项复制到右边，左侧数据不发生变化，同时阻止数据重复添加到右侧

￡神魔★判官ぃ/ 2022年05月27日 07:08/ 0 赞/ 420 阅读

相关 python中检测键盘（上下左右）代码

> 保存下来，方便以后使用获取事件，比如按键等 for event in pygame.event.get():

古城微笑少年丶/ 2022年04月23日 14:46/ 0 赞/ 878 阅读

相关 jsfoot 网页特效--悬浮层，支持上、下、左、右、右中、左中浮动

[http://www.jsfoot.com/jquery/rating/][http_www.jsfoot.com_jquery_rating] 这里面有

今天药忘吃喽~/ 2022年04月16日 07:10/ 0 赞/ 187 阅读

相关网页三栏布局五种实现方式（左中右）

适用：高度固定左右宽度固定中间自适应 <html> <head> <title>三栏布局</title>

深碍√TFBOYSˉ_/ 2021年08月28日 20:05/ 0 赞/ 624 阅读

相关 css3特效（上下左右晃动效果）

css3特效（上下左右晃动效果）

朱雀/ 2021年04月13日 17:27/ 1 赞/ 2053 阅读