jquery仿360浏览器猜你喜欢悬浮代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery仿360浏览器猜你喜欢悬浮代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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=utf-8" />
<title>jquery仿360浏览器猜你喜欢悬浮代码</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.8.js"></script>
<style type="text/css">
body{ height:1000px;}

/* liketome */
.liketome{ position:fixed; top:200px; left:0px;}
.header{width:25px; height:91px; background:url(images/0140904202809125.jpg) no-repeat; border:1px  dashed #ff2a00;}
.liketome ul{ padding:0px;position:fixed; top:200px; left:0px; width:100%; list-style:none; background:#fff; height:95px; }
.liketome ul.menu{ display:none;}
.liketome ul li{ float:left; margin-left:10px; width:129px; height:93px;position:relative;}
.liketome ul li a{text-decoration:none; color:#fff; font-size:13px; font-family:'微软雅黑'; text-align:center; line-height:24px;display:block;border:1px solid #fff;}
.liketome ul li a:hover{ color:#F09; text-decoration:underline;border:1px solid #F00;}
.liketome ul li span{ position:absolute; left:0px; top:0px; padding:2px 10px 2px 10px; height:24px;  background:#000; opacity:0.7; font-size:12px;}
.liketome ul li .xxx{font-family:Verdana, Geneva, sans-serif; font-size:20px; line-height:91px; color:#000;}
.liketome ul li .xxx:hover{ color:#4571a0; text-decoration:none;}
</style>

<script type="text/javascript">
$(document).ready(function(){
					   
	/* 滑动/展开 */
	$(".header").click(function(){
		$(".header").animate({ width: 'hide', display: 'none' });	
	
		/*$(this).parent().find("ul.menu").slideToggle(800);*/  //上下滚动函数slidetoggle（speed,）
		$("ul.menu").animate({ width: 'show' ,height:'show' ,display:'block',}); //height 变化可有可无
		
	});

	//close menu(必须包含在函数之内)
	$(".xxx").click(function(){
		$(".header").animate({ width: 'show',  display: 'block' });	
		$("ul.menu").animate({ width: 'hide' ,height:'hide',display:'none',}); 	//height 变化可有可无
		
	});

});
</script>

<body>

<div class="liketome">
	<div class="header">
		<span class="arrow up"></span>
	</div>
	<ul class="menu">
		<li  style="padding-left:0px;margin-left:0px; width:150px; height:91px; background:url(images/uiuiuiuiiu.jpg) no-repeat left;"></li>
		<li><a href="#nogo"><img src="images/baozou.jpg" width="127" height="91"  title="美女壁纸1"><span>美女壁纸1</span></a></li>
		<li><a href="#nogo"><img src="images/baozou2.jpg" width="127" height="91" title="美女壁纸2"><span>美女壁纸2</span></a></li>
		<li><a href="#nogo"><img src="images/baozou3.jpg" width="127" height="91" title="美女壁纸3-格格"><span >美女壁纸3-格格</span></a></li>
		<li><a href="#nogo"><img src="images/baozou4.jpg" width="127" height="91" title="美女壁纸4"><span>美女壁纸4</span></a></li>
		<li><a href="#nogo"><img src="images/baozou5.jpg" width="127" height="91" title="美女壁纸5"><span>美女壁纸5</span></a></li>
		<li><a href="#nogo"><img src="images/baozou6.jpg" width="127" height="91" title="美女壁纸6"><span>美女壁纸6</span></a></li>
		<li><a href="#nogo"><img src="images/baozou7.jpg" width="127" height="91" title="张娜拉-美眉"><span>张娜拉-美眉</span></a></li>
		<li  id="xx" style=" width:50px; height:91px; float:right;"><a href="#nogo"  class="xxx" title="关闭">X</a></li>
	</ul>      
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)