Home > Design > jQuery+CSS制作滑动门效果
2009June . 9th

jQuery+CSS制作滑动门效果

Design 9 comments

本例利用jQuery实现背景图像动画效果。我们可以利用这种特效做一个“滑动门”菜单。请看demo。

这个效果的实现方法：
创建一个jquery.backgroundPosition.js文件，内容如下：

(function($) {
	$.extend($.fx.step,{
	    backgroundPosition: function(fx) {
            if (fx.state === 0 && typeof fx.end == 'string') {
                var start = $.curCSS(fx.elem,'backgroundPosition');
                start = toArray(start);
                fx.start = [start[0],start[2]];
                var end = toArray(fx.end);
                fx.end = [end[0],end[2]];
                fx.unit = [end[1],end[3]];
			}
            var nowPosX = [];
            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];           
            fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
 
           function toArray(strg){
               strg = strg.replace(/left|top/g,'0px');
               strg = strg.replace(/right|bottom/g,'100%');
               strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
               var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
               return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
           }
        }
	});
})(jQuery);

建立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" />
 
	<title>Garage Door Menu from CSS-Tricks</title>
 
	<style type="text/css">
	<!--
	* { margin:0px; padding:0px; }
	body { background:#c1c1c1; }
	a  { outline-style: none; }
 
	ul#menuback {
	margin: 50px auto;
	list-style: none;
	background: url(../images/menu-bg.jpg);
	width: 800px;
	overflow: auto;	
	}
 
	ul#menuback li.shutter {
	width: 200px;
	height: 100px;
	display: block;
	float: left;
	}
 
	ul#menuback li#shutter1 {
	background: url(../images/shutter-africanplains.jpg) no-repeat; 
	}
	ul#menuback li#shutter2 {
	background: url(../images/shutter-reptiles.jpg) no-repeat; 
	}
	ul#menuback li#shutter3 {
	background: url(../images/shutter-aviary.jpg) no-repeat; 
	}
	ul#menuback li#shutter4 {
	background: url(../images/shutter-arcticzone.jpg) no-repeat; 
	}
 
	a.link {
	width: 200px;
	height: 100px;
	display: block;
	background: url(../images/window.png) no-repeat bottom center;
	text-indent: -9999px;
	}
	-->
	</style>
 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.backgroundPosition.js"></script>
 
	<script type="text/javascript">
		$(document).ready(function() {
 
			//Set css in Firefox (Required to use the backgroundPosition js)
			$('#shutter1').css({backgroundPosition: '0px 0px'});
			$('#shutter2').css({backgroundPosition: '0px 0px'});
			$('#shutter3').css({backgroundPosition: '0px 0px'});
			$('#shutter4').css({backgroundPosition: '0px 0px'});
 
			//Animate the shutter  
			$(".link").hover(function(){
			      $(this).parent().animate({backgroundPosition: '(0px -100px)'}, 500 );
			    }, function() {
			      $(this).parent().animate({backgroundPosition: '(0px 0px)'}, 500 );
			}); 
		 });
	</script>
</head>
 
<body>
 
	<ul id="menuback">
	<li class="shutter" id="shutter1"><a class="link" href="#1">Link 1</a></li>
	<li class="shutter" id="shutter2"><a class="link" href="#2">Link 2</a></li>
	<li class="shutter" id="shutter3"><a class="link" href="#3">Link 3</a></li>
	<li class="shutter" id="shutter4"><a class="link" href="#4">Link 4</a></li>
	</ul>
 
</body>
 
</html>

可见这个效果的html结构是非常简单的，重点是好好地利用jQuery提供的效果。

, 推荐到豆瓣
  1. 2009June . 9th - 9:08 AM
    挑战书

    看了半天，就是在想jQuery是个什么东西。替你扫盲一个：jQuery是一款免费且开放源代码的JavaScript代码库，由John Resig创建。已有Google AJAX Libraries API等公开站台提供jQuery的js的引用服务。

    你的CODE貌似不可用啊，或者就是你提供的链接不可用。

    Reply
  2. 2009June . 9th - 10:22 AM
    bolo

    @挑战书
    谢谢你的提醒了，url打错了

    Reply
  3. 2009June . 9th - 11:21 AM
    芒果

    博主貌似很精通JQuery啊，向您学习，向您致敬！

    Reply
  4. 2009June . 9th - 11:54 AM
    bolo

    @芒果
    我也是最近才学，这些东西都是从国外转载的

    Reply
  5. 2009June . 9th - 5:23 PM
    平平

    挺漂亮的 厉害啊

    Reply
  6. 2009June . 9th - 5:56 PM
    simaopig

    哈，最近在学JQ啊？很好，很强大。呵。

    Reply
  7. 2009June . 9th - 6:10 PM
    bolo

    @simaopig
    对啊，用jQuery比自己编写js好多了

    Reply
  8. 2009June . 9th - 7:37 PM
    LAONB

    呵呵，这个就不太感兴趣了，对于我们这个主题不太适用。

    Reply
  9. 2009June . 10th - 12:41 PM
    Jutoy

    bolo :
    @simaopig
    对啊，用jQuery比自己编写js好多了

    努力努力~~到时候要请教你了~~

    Reply

Subscriber selector

Close