zoukankan      html  css  js  c++  java
  • 制作类似淘宝头部跳动的消息框

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

    只要肯努力学习工作,面包会有的,牛奶也会有的
  • 相关阅读:
    this和e.target的异同
    onmouseover和onmouseenter区别
    jquery带参插件函数的编写
    让bind函数支持IE8浏览器的方法
    LeetCode #9 Palindrome Number
    LeetCode #7 Reverse Integer
    LeetCode #1 Two Sum
    iOS 真机测试错误“The application bundle does not contain a valid identifier”
    Swift、Objective-C 单例模式 (Singleton)
    iOS 相册和网络图片的存取
  • 原文地址:https://www.cnblogs.com/sandraMaying/p/setInterval.html
Copyright © 2011-2022 走看看