您的位置:首页 - jQuery
左侧可弹出隐藏div
以下源代码使用jquery实现了:左侧可弹出隐藏div

查看效果:http://keleyi.com/keleyi/phtml/xuanfudiv/1.htm


<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

// 更多新闻
function ml_close_demo() {
$('.float-news').animate({
left: '-450px'
}, 300, function(){
$('.float-open').delay(50).animate({
left: '-2px'
}, 300);
});
}
function ml_open_demo() {
$('.float-open').animate({
left: '-70px'
}, 100, function(){
$('.float-news').delay(50).animate({
left: '0px'
}, 300);
});
}

$('.float-close').click(function(){
ml_close_demo();
return false;
});
$('.open-btn').click(function(){
ml_open_demo();
return false;
});

setTimeout(function(){ml_close_demo()},1000);

});
</script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{_background-image:url(about:blank);/*用浏览器空白页面作为背景*/_background-attachment:fixed; /* prevent screen flash in IE6 确保滚动条滚动时,元素不闪动*/ }
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#E3E4E2;}
/* float-news */
.float-news,.float-open{background:#fbfbfb;border:2px solid #e1e1e1;border-left:0 none;border-top-right-radius:4px;border-bottom-right-radius:4px;box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);display:inline-block;font-size:16px;}
.float-news{height:380px;left:0px;padding:10px 15px;width:300px;z-index:100;top:117px;_margin-top:117px;}
.float-open{height:48px;left:-70px;padding:4px 4px 4px 6px;width:48px;z-index:99;top:206px;_margin-top:206px;}
.float-news,.float-open{position:fixed;*zoom:1;_position:absolute;_top:expression(eval(document.documentElement.scrollTop));}
.float-close{background:url(>http://keleyi.com/keleyi/phtml/xuanfudiv/images/nav-close.png) no-repeat left top;overflow:hidden;height:48px;opacity:.6;filter:alpha(opacity=60);position:absolute;right:9px;text-indent:100%;top:10px;white-space:nowrap;width:48px;}
.open-btn{background:url(>http://keleyi.com/keleyi/phtml/xuanfudiv/images/ml-open-demo.png) no-repeat left top;display:block;overflow:hidden;height:48px;opacity:.6;filter:alpha(opacity=60);text-indent:100%;white-space:nowrap;width:48px;}
.float-close:hover,.open-btn:hover{opacity:1;filter:alpha(opacity=100);}
.newslist h3{color:#333;border-bottom:4px solid #F2F2F2;font-size:26px;height:54px;line-height:54px;font-family:Microsoft Yahei,simsun,arial,sans-serif;}
.newslist ul{margin-top:10px;}
.newslist li{position:relative;height:30px;line-height:30px;font-size:14px;border-bottom:1px #ccc dotted}
.newslist li a{color:#404040;}
.newslist li span{position:absolute;right:0;color:#ccc;}
.newslist li:last-child{border-bottom:0;}
</style>

<div class="float-open" id="float-open" style="left:-2px;"><a class="open-btn" href="javascript:void(0);">&gt;</a></div>

<div class="float-news" id="float-news" style="left:-450px;">
<a class="float-close" href="javascript:void(0);">X</a>
<div class="newslist">
<h3>精彩内容</h3>
<ul>
<li><a href="http://keleyi.com/a/bjac/6f008786225269ac.htm" title="" target="_blank">jquery纯文本返回顶部</a></li><li><a href="http://keleyi.com/a/bjac/ac398357acb82782.htm" title="" target="_blank">jquery倒计时</a></li><li><a href="http://keleyi.com/a/bjac/88af29335890a287.htm" title="" target="_blank">div(tab)切换</a></li><li><a href="http://keleyi.com/a/bjac/768f469b95b61487.htm" title="" target="_blank">单行文字间歇向上滚动</a></li><li><a href="http://keleyi.com/a/bjac/ed5eb8c2959c619e.htm" title="滚动页面时DIV到达顶部时固定在顶部" target="_blank">滚动页面时DIV到达顶部时固定在顶...</a></li><li><a href="http://keleyi.com/a/bjac/a6d651710217f7a0.htm" title="使用jQuery UI修饰title属性的气泡悬浮框" target="_blank">使用jQuery UI修饰title属性的气泡...</a></li><li><a href="http://keleyi.com/a/bjac/bf0eb8c02085b10d.htm" title="" target="_blank">jquery清空textarea等输入框</a></li><li><a href="http://keleyi.com/a/bjac/939631bb07adb4dc.htm" title="" target="_blank">jquery关灯特效</a></li><li><a href="http://keleyi.com/a/bjac/f4a6f78d74a251c5.htm" title="jquery根据滚动像素显示隐藏顶部导航条" target="_blank">jquery根据滚动像素显示隐藏顶部导...</a></li><li><a href="http://keleyi.com/a/bjac/7e8897e5ec0849e9.htm" title="" target="_blank">可改变大小DIV层</a></li>
</ul>
</div>
</div>

<div style="height:2000px;"></div>

另一版本:http://keleyi.com/a/bjac/cdbc89174171ebb8.htm
本站导航
相关文章
柯乐义 Copyright© keleyi.com