制作类似淘宝头部跳动的消息框

现在需要做一个类似于淘宝网头部消息那个跳动的矩形橙色块，大致思路：先用css将这个色块进行绝对定位，然后让该色块先加3个像素，然后再减3个像素，就按照这样的动作循环下去，就会达到跳动的目的。
如何才能达到一直循环加3，再减三呢？那用条件运算符，先定义变量 second ,然后再对second 一直进行加1，之后对second++ 除2进行模运算，如果可以除尽2，则加3像素，反之则减3像素。

现在就先温习下条件运算符：

?:条件运算符是运算符中功能最多的,与java中的相同；
变量 = 表达式 ？true-value :flase-value;
表示：如果表达式为真，则把true-value的值赋给变量，如果为假则将false-value的值赋给变量；

样式代码

<style type="text/css">
 #jump{
 position:absolute;width:50px;height:50px;background:red;top:50px;left:10px;
 }
</style>

js代码

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
  $(function(){
          var second =1;
         var move =function(){
           $("#jump").css("top",(second++%2)? '+=3':'-=3');
         }    
                
        var timer = setInterval(move,1000);//setInterval(move,1000)每隔一秒中调用一次move函数，从而达到跳动的目的
        $("#jump").hover(function(){//鼠标放上去之后，利用clearInterval()清除跳动函数
           clearInterval(timer);
        },function(){
          setInterval(move,1000);
        });  
  })
</script>

 

下面为html代码

<html>
<head>
<title>条件运算符 ？：的运用</title>
</head>
<body>
<div id="jump"></div>
</body>
</html>

 

posted @ 2013-08-15 11:59  Sandra-web前端  阅读(226)  评论(0)  编辑  收藏  举报