Das Beispiel in diesem Artikel beschreibt die jQuery-Implementierung des Hinzufügens von Service-Effekt-Code, der das Schieben und Teleskopieren der Baidu-Homepage imitiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein zusätzlicher Serviceeffekt, der die gleitende jQuery-Erweiterung der Baidu-Homepage imitiert. Es handelt sich tatsächlich um ein Teleskopmenü, aber dieses Menü ist etwas Besonderes. Es erstreckt sich nur von einem Ende zum anderen Das Menü ist übersichtlich und schön gestaltet.
Der Screenshot des Laufeffekts sieht wie folgt aus:
Die Online-Demo-Adresse lautet wie folgt:
http://demo.jb51.net/js/2015/js-f-baidu-index-show-serv-style-codes/
Der spezifische Code lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>添加服务</title>
<style>
*{padding:0;margin:0;font:12px/26px "微软雅黑";}
a,a:hover{text-decoration:none;color:#ccc;}
dl{margin:0 auto;border:1px solid #fff;float:left;position:absolute;left:50%;color:#ccc;margin:100px 0 100px -45px ;overflow:hidden;}
dl.open{margin-left:-200px;}
dl.open dt{background:url(images/s_add_all_3f6f39e5.png) 0 0 no-repeat;}
dl dt{width:94px;height:30px;line-height:30px;text-align:center;cursor:pointer;position:relative;z-index:10;float:left; background:#fff;}
dl dd{display:none;height:28px;float:left;}
dl dd a{float:left;display:block;height:28px;line-height:28px;padding:0 15px 0 35px;position:relative;left:-300px;border-top:1px solid #E5E5E5;border-bottom:1px solid #E5E5E5;background:url(images/s_add_all_3f6f39e5.png) no-repeat;}
dl dd .nav{background-position:13px -35px;}
dl dd .hot{background-position:13px -61px;}
dl dd .app{background-position:13px -87px;}
dl dd .fresh{background-position:13px -113px;border-right:1px solid #E5E5E5;}
dl dd .nav:hover{background-position:-104px -35px;}
dl dd .hot:hover{background-position:-104px -61px;}
dl dd .app:hover{background-position:-104px -87px;}
dl dd .fresh:hover{background-position:-104px -113px;}
</style>
</head>
<body>
<dl>
<dt id="add">+添加服务</dt>
<dd id="con"><a class="nav" href="#">导航</a><a class="hot" href="#">实时热点</a><a class="app" href="#">应用</a><a class="fresh" href="#">新鲜事</a></dd>
</dl>
</body>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
window.onload = function(){
var Close = function(event){
$('dd a').animate({left:-400});
setTimeout('$("dl").css("margin-left",-45);$("dl").removeClass("open")',300)
};
var Open = function(event){
$("dd").show();
var dl_W=$("dl").width();
$("dl").addClass("open").css("margin-left",-dl_W/2);
$('dd a').animate({left: 0},300);
Stop(event);
};
var Stop = function(event){
e = event || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else {
e.cancelBubble = true;
}
};
$(document).bind('click', Close);
$('dt').bind('click',Open);
$('dd').bind('click',Stop);
};
</script>
</html>
Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.
