jquery浮动层制作右下角float浮动提示框向上滑动提示



101 401 134



特效描述:浮动层 右下角float浮动 提示框向上滑动,jquery浮动层提示框制作右下角float div提示框向上滑动提示,类似MSN/QQ、阿里旺旺的浮动层提示框特效。jquery下载。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}
/* tipfloat */
.tipfloat,.tipfloat .close{background:url(images/tipright.png) no-repeat;}
.tipfloat{display:none;z-index:999;position:fixed;_position:absolute;right:0px;bottom:0;width:236px;height:196px;overflow:hidden;}
.tipfloat .tiphead{height:28px;line-height:28px;overflow:hidden;padding:0 5px;}
.tipfloat .tiphead strong{float:left;color:#fff;font-size:14px;} 
.tipfloat .tiphead .close{display:block;float:right;margin:5px 0 0 0;width:18px;height:18px;line-height:999em;overflow:hidden;cursor:pointer;background-position:-236px 0;}
/* ranklist */
.ranklist{border:solid 1px #ddd;padding:10px 10px 0 10px;}
.ranklist li{height:16px;line-height:16px;overflow:hidden;position:relative;padding:0 70px 0 30px;margin:0 0 10px 0;vertical-align:bottom;}
.ranklist li em{background:url(http://www.jsfoot.com/css3/demo/2012-04-06/images/mun.gif) no-repeat;width:20px;height:16px;overflow:hidden;display:block;position:absolute;left:0;top:0;text-align:center;font-style:normal;color:#333;}
.ranklist li em{background-position:0 -16px;}
.ranklist li.top em{background-position:0 0;color:#fff;}
.ranklist li .num{position:absolute;right:0;top:0;color:#999;}
</style>
<script type="text/javascript">
$(function(){
	var titHeight=$(".tiphead").height();
	$(".tipfloat").animate({height:"show"},400);
	$(".close").click(function(){
		$(".tipfloat").animate({height:titHeight-50},1000,function(){
			$(".tipfloat").hide();
		});
	});
});
</script>
<div class="tipfloat">
	<h2 class="tiphead"><strong>右下角浮动提示框</strong><span title="关闭" class="close">关闭</span></h2>
	<div class="ranklist">
		<ol>
			<li class="top">
				<em>01</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">js树形导航菜单制作垂直js导航条特效</a></p><span class="num">32万下载</span>
			</li>
			<li class="top">
				<em>02</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">js导航菜单制作一个二级滑动导航菜单</a></p><span class="num">32万下载</span>
			</li>
			<li class="top">
				<em>03</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">js横向二级导航菜单slide往下滑动动画效果js代码下载</a></p><span class="num">32万下载</span>
			</li>
			<li>
				<em>04</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单</a></p><span class="num">32万下载</span>
			</li>
			<li>
				<em>05</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">3D flash动画图片滚动,图标导航菜单3D flash动画滚动效果</a></p><span class="num">32万下载</span>
			</li>
			<li>
				<em>06</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">flash导航条制作鼠标滑过显示二级菜单目录</a></p><span class="num">32万下载</span>
			</li>
		</ol>
	</div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 浮动提示框 浮动菜单 浮动导航 滑动选项卡 滑动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到