现在需要做一个类似于淘宝网头部消息那个跳动的矩形橙色块,大致思路:先用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>