jQuery简单动画，点击展开侧边栏

2024-09-05 12:18:34

字体：大中小

来源：转载

供稿：网友

jQuery简单动画，点击展开侧边栏，兼容IE和火狐等主流浏览器，当鼠标点击侧边栏的时候，侧边栏就展开了，从左侧伸展滑出来，暂时没有做合拢的功能，原理大致类同，有兴趣的就自己国上这个效果吧。

<!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=gb2312" /><title>jQuery简单动画，点击展开侧边栏</title><script src="http://code.jquery.com/jquery-1.9.0.min.js"></script><script>$(document).ready(function(){    //window.outerWidth:屏幕外面宽度;	var wid=($(window).outerWidth()-955)/2;  	$(".fir a").click(function(){		$(".fir").hide();					$(".sec").show().animate({left:wid},800);					   	});	$(".sec").click(function(){		$(this).hide().css({left:-200});		$(".fir").show();	})});</script><style>*html{background-image:url(null:void);background-attachment:fixed;}/*去除ie6 抖动代码*/.fir{width:30px; text-align:center; background:#333; height:90px; position:fixed; top:100px; _position: absolute;_top: expression(parseInt(document.documentElement.scrollTop) +100+ "px");}.fir a{color:#fff; text-decoration:none;}.sec{width:200px; height:100px; background:#C30; position:fixed; left:-200px; top:100px; _position:absolute;_top: expression(parseInt(document.documentElement.scrollTop) + 100+"px");}</style></head><body><div style="width:955px; margin:0 auto; height:1024px; position:relative;">   <div class="fir">    +<br />展<br />开<br />侧<br />栏   </div></div><div class="sec"></div></body></html>

上一篇：状态栏文字弹出代码，从右向左弹出

下一篇：一个在页面顶部显示的进度条效果

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注