QQ 1640076782

2013年09月28日

Jquery+CSS 制作向下滑动的动画效果导航

Filed under: 英语网站设计 — 标签:, — lifengwu @ 1:47 下午

中文网站的建设过程中经常会涉及到Flash 的制作,因为网站有flash,看起来会更炫,但这同时也会造成网站的加载速度慢,造成体验效果不好,与之相对大多数的英语网站来说,最重要的就是要简洁明了,加载速度快,很少会有flash出现,但是看起来一样很舒服。不过通过Jquery没有flash,网站一样可以做出来不错的酷炫效果。实例:

<!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″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
<title>无标题文档</title>
<link href=”css/css.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”js/jquery-1.4.2.min.js”></script>
<script type=”text/javascript” src=”js/jQuery Easing.js”></script>
<script type=”text/javascript”>
$(function() {
$(‘#sdt_menu > li’).bind(‘mouseenter’,function(){
var $elem = $(this);
$elem.find(‘img’).stop(true).animate({
‘width’:’123px’,
‘height’:’123px’,
‘left’:’0px’
},400,’easeOutBack’).andSelf().find(‘.sdt_wrap’).stop(true).animate({‘top’:’80px’},500,’easeOutBack’).andSelf().find(‘.sdt_active’).stop(true).animate({‘height’:’125px’},300,function(){
var $sub_menu = $elem.find(‘.sdt_box’);
if($sub_menu.length){
var left = ’123px’;
if($elem.parent().children().length == $elem.index()+1)
left = ‘-123px’;
$sub_menu.show().animate({‘left’:left},200);
}
});
}).bind(‘mouseleave’,function(){
var $elem = $(this);
var $sub_menu = $elem.find(‘.sdt_box’);
if($sub_menu.length)
$sub_menu.hide().css(‘left’,’0px’);
$elem.find(‘.sdt_active’).stop(true).animate({‘height’:’0px’},300).andSelf().find(‘img’).stop(true).animate({
‘width’:’0px’,
‘height’:’0px’,
‘left’:’85px’},400).andSelf().find(‘.sdt_wrap’).stop(true).animate({‘top’:’10px’},500);
});
});
</script><script type=”text/javascript”>
//SuckerTree Vertical Menu (Aug 4th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName(“ul”)
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName(“a”)[0].className=”subfolderstyle”
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName(“ul”)[0].style.display=”block”
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName(“ul”)[0].style.display=”none”
}
}
}
}
if (window.addEventListener)
window.addEventListener(“load”, buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent(“onload”, buildsubmenus)
</script>
</head>
<body>
<div id=”header”>
<div id=”nav”>
<ul id=”sdt_menu”>
<li>
<a href=”index.html”>
<img src=”images/1.jpg” alt=”" height=”123″ width=”125″/>
<span></span>
<span>
<span>Home</span>
<span>&nbsp;test</span>
</span>
</a>
</li>
<li>
<a href=”product.html”>
<img src=”images/2.jpg” width=”123″ height=”123″ alt=”"/>
<span></span>
<span>
<span>Products</span><!–
<span>&nbsp;</span>–>
</span>
</a>
<div>
<a href=”#”>Websites</a>
<a href=”#”>Illustrations</a>
<a href=”#”>Photography</a>
</div>
</li>
<li>
<a href=”pagetext.html”>
<img src=”images/3.jpg” width=”123″ height=”123″ alt=”"/>
<span></span>
<span>
<span>Wholesale</span><!–
<span>&nbsp;</span>–>
</span>
</a>
</li>
<li>
<a href=”pagetext.html”>
<img src=”images/4.jpg” width=”123″ height=”123″ alt=”"/>
<span></span>
<span>
<span>DropShipping</span><!–
<span>&nbsp;</span>–>
</span>
</a>
</li>
<li>
<a href=”news.html”>
<img src=”images/5.jpg” width=”123″ height=”123″ alt=”"/>
<span></span>
<span>
<span>News</span><!–
<span>&nbsp;</span>–>
</span>
</a>
</li>
<li>
<a href=”faq.html”>
<img src=”images/6.jpg” width=”123″ height=”123″ alt=”"/>
<span></span>
<span>
<span>FAQs</span><!–
<span>&nbsp;</span>–>
</span>
</a>
</li>
<li>
<a href=”#”>
<img src=”images/2.jpg” width=”123″ height=”123″ alt=”"/>
<span></span>
<span>
<span>Blog</span><!–
<span>&nbsp;</span>–>
</span>
</a>
<div>
<a href=”#”>Job Board Website</a>
<a href=”#”>Shopping Cart</a>
<a href=”#”>Interactive Maps</a>
</div>
</li>
<li style=”background:none;”>
<a href=”pagetext.html”>
<img src=”images/4.jpg” width=”123″ height=”123″ alt=”"/>
<span></span>
<span>
<span>Contact Us</span><!–
<span>&nbsp;</span>–>
</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</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″ /><meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ /><title>无标题文档</title><link href=”css/css.css” rel=”stylesheet” type=”text/css” /><script type=”text/javascript” src=”js/jquery-1.4.2.min.js”></script><script type=”text/javascript” src=”js/jQuery Easing.js”></script><script type=”text/javascript”>$(function() { $(‘#sdt_menu > li’).bind(‘mouseenter’,function(){ var $elem = $(this); $elem.find(‘img’).stop(true).animate({ ‘width’:’123px’, ‘height’:’123px’, ‘left’:’0px’ },400,’easeOutBack’).andSelf().find(‘.sdt_wrap’).stop(true).animate({‘top’:’80px’},500,’easeOutBack’).andSelf().find(‘.sdt_active’).stop(true).animate({‘height’:’125px’},300,function(){ var $sub_menu = $elem.find(‘.sdt_box’); if($sub_menu.length){ var left = ’123px’; if($elem.parent().children().length == $elem.index()+1) left = ‘-123px’; $sub_menu.show().animate({‘left’:left},200); } }); }).bind(‘mouseleave’,function(){ var $elem = $(this); var $sub_menu = $elem.find(‘.sdt_box’); if($sub_menu.length) $sub_menu.hide().css(‘left’,’0px’); $elem.find(‘.sdt_active’).stop(true).animate({‘height’:’0px’},300).andSelf().find(‘img’).stop(true).animate({ ‘width’:’0px’, ‘height’:’0px’, ‘left’:’85px’},400).andSelf().find(‘.sdt_wrap’).stop(true).animate({‘top’:’10px’},500); }); });</script><script type=”text/javascript”>//SuckerTree Vertical Menu (Aug 4th, 06)//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus(){for (var i=0; i<menuids.length; i++){  var ultags=document.getElementById(menuids[i]).getElementsByTagName(“ul”)    for (var t=0; t<ultags.length; t++){    ultags[t].parentNode.getElementsByTagName(“a”)[0].className=”subfolderstyle”    ultags[t].parentNode.onmouseover=function(){    this.getElementsByTagName(“ul”)[0].style.display=”block”    }    ultags[t].parentNode.onmouseout=function(){    this.getElementsByTagName(“ul”)[0].style.display=”none”    }    }  }}
if (window.addEventListener)window.addEventListener(“load”, buildsubmenus, false)else if (window.attachEvent)window.attachEvent(“onload”, buildsubmenus)</script></head>
<body><div id=”header”>  <div id=”nav”> <ul id=”sdt_menu”> <li> <a href=”index.html”> <img src=”images/1.jpg” alt=”" height=”123″ width=”125″/> <span></span> <span> <span>Home</span> <span>&nbsp;test</span> </span> </a> </li> <li> <a href=”product.html”> <img src=”images/2.jpg” width=”123″ height=”123″ alt=”"/> <span></span> <span> <span>Products</span><!– <span>&nbsp;</span>–> </span> </a> <div> <a href=”#”>Websites</a> <a href=”#”>Illustrations</a> <a href=”#”>Photography</a> </div> </li> <li> <a href=”pagetext.html”> <img src=”images/3.jpg” width=”123″ height=”123″ alt=”"/> <span></span> <span> <span>Wholesale</span><!– <span>&nbsp;</span>–> </span> </a> </li> <li> <a href=”pagetext.html”> <img src=”images/4.jpg” width=”123″ height=”123″ alt=”"/> <span></span> <span> <span>DropShipping</span><!– <span>&nbsp;</span>–> </span> </a> </li>         <li> <a href=”news.html”> <img src=”images/5.jpg” width=”123″ height=”123″ alt=”"/> <span></span> <span> <span>News</span><!– <span>&nbsp;</span>–> </span> </a> </li>     <li> <a href=”faq.html”> <img src=”images/6.jpg” width=”123″ height=”123″ alt=”"/> <span></span> <span> <span>FAQs</span><!– <span>&nbsp;</span>–> </span> </a> </li>     <li> <a href=”#”> <img src=”images/2.jpg” width=”123″ height=”123″ alt=”"/> <span></span> <span> <span>Blog</span><!– <span>&nbsp;</span>–> </span> </a> <div> <a href=”#”>Job Board Website</a> <a href=”#”>Shopping Cart</a> <a href=”#”>Interactive Maps</a> </div> </li> <li style=”background:none;”> <a href=”pagetext.html”> <img src=”images/4.jpg” width=”123″ height=”123″ alt=”"/> <span></span> <span> <span>Contact Us</span><!– <span>&nbsp;</span>–> </span> </a> </li> </ul>  </div></div></body></html>

此效果需要两个JS,jquery-1.4.2.min.js和jQuery Easing.js,可以在网站搜索下载,具体的效果可以根据不同的需要对CSS时行修改。