Jquery+CSS 制作向下滑动的动画效果导航 « ONEPOUND（万方）外贸网站优化专家

2013年09月28日

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

Filed under: 英语网站设计 — 标签：JQuery, 英文外贸站 — 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”>

<head>

<title>无标题文档</title>

$(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>

<li>

<span>

</span>

</a>

</li>

<li>

<span>

<span>Products</span><!–

</span>

</a>

<div>

<a href=”#”>Websites</a>

<a href=”#”>Illustrations</a>

<a href=”#”>Photography</a>

</div>

</li>

<li>

<span>

<span>Wholesale</span><!–

</span>

</a>

</li>

<li>

<span>

<span>DropShipping</span><!–

</span>

</a>

</li>

<li>

<span>

<span>News</span><!–

</span>

</a>

</li>

<li>

<span>

<span>FAQs</span><!–

</span>

</a>

</li>

<li>

<span>

<span>Blog</span><!–

</span>

</a>

<div>

<a href=”#”>Job Board Website</a>

<a href=”#”>Shopping Cart</a>

<a href=”#”>Interactive Maps</a>

</div>

</li>

<span>

<span>Contact Us</span><!–

</span>

</a>

</li>

</ul>

</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> 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> </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> </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> </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> </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> </span>–> </span> </a> </li> <li> <a href=”#”> <img src=”images/2.jpg” width=”123″ height=”123″ alt=”"/> <span></span> <span> <span>Blog</span><!– <span> </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> </span>–> </span> </a> </li> </ul> </div></div></body></html>

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

阅读 (11,773 views) Comments (0)