jQuery横向动态滑动特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery横向动态滑动特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横向动态滑动jQuery特效</title>
<link href="images/index.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="images/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="images/jquery.js"></script>
<script type="text/javascript">
$(function(){
    $("ul li a").each(function(){
	$(this).hover(function(){
		$(this).animate({width: "400px"}, {queue:false, duration:450});
      },function() {
		  $(this).animate({width: "128px"}, {queue:false, duration:450});
	  });
    });
	/*
		To use this you need to load jquery easing plugins
	*/	
    $("ul.easing li a").each(function(){
	$(this).hover(function(){
		$(this).animate({width: "400px"}, {queue:false, duration:450, easing:'easeOutBack'});
      },function() {
		  $(this).animate({width: "128px"}, {queue:false, duration:450, easing:'easeInBack'});
	  });
    });	
});
</script>
</head>
<body>
<h1>Jquery Horizontal Slide Navigation</h1>
<ul>
    <li><a href="#" title="" class="home"><p><strong>Bali Web Design</strong><br />Bali Web Design &amp; Web Development<br />Services</p></a></li>
    <li><a href="#blog" title="" class="blog"><p><strong>Web 2.0 Blog</strong><br />Web Design, Programming, Ajax <br />PHP, ASP, &amp; Web 2.0 Stuffs</p></a></li>
    <li><a href="#bali-web-services.asp" title="" class="services"><p><strong>Bali Web Services</strong><br />Web Design, Web Development &amp; SEO<br />Services</p></a></li>
    <li><a href="#portofolio" title="" class="portfolio"><p><strong>Portfolio</strong><br />Freelance Web Developer Portfolio</p></a></li>
</ul>
<p class="info">With Easing Options</p>
<ul class="easing">
    <li><a href="#" title="" class="home"><p><strong>Bali Web Design</strong><br />Bali Web Design &amp; Web Development<br />Services</p></a></li>
    <li><a href="#blog" title="" class="blog"><p><strong>Web 2.0 Blog</strong><br />Web Design, Programming, Ajax <br />PHP, ASP, &amp; Web 2.0 Stuffs</p></a></li>
    <li><a href="#bali-web-services.asp" title="" class="services"><p><strong>Bali Web Services</strong><br />Web Design, Web Development &amp; SEO<br />Services</p></a></li>
    <li><a href="#portofolio" title="" class="portfolio"><p><strong>Portfolio</strong><br />Freelance Web Developer Portfolio</p></a></li>
</ul>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)