• jquery 插件下载


    引用:http://www.cnblogs.com/akak123/archive/2012/07/24/2606000.html#2433861

    http://www.niutuku.com/js/201103/149943/

    如果每天看1-2个jquery,1个月的积累也是很可观的。

    今天晒一下我昨天的学习心得。

    大致的效果图:

    鼠标移动到哪个li ,滑动块就跟到那个区域。视觉效果不错。

    主要思路: 

    要给li 的hover加事件。让他感知当前li的margin-left (left)

    设置一个div(随便,只要是一个块,称为block),定好他的位置,也就是在li的上层

    然后在hover事件中,根据left调整block的left

    思路很简单。晒代码(mycode)

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
    <title>MyDemo</title>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
     
    <script  type="text/javascript"> <br>
    $(document).ready(function(){<br>
      var wapper=$(".webwidget_menu_glide");
          
        //固定block初始位置到current
            var stay=$('li').filter('#current').offset();
     
        $("#block").offset({left:stay.left,top:stay.top});
             
         //鼠标经过事件绑定
            $('.webwidget_menu_glide ul li').bind('hover',function(event){      
         
        var pos=$(event.target).offset();
        var left=pos.left+'px';
        $("#block").stop().animate({left:left},"fast"); //滑块速度可调   
     
        });
      
    })
    </script>
     
    <style>
     
    .webwidget_menu_glide{ 600px; height:30px; background-color:red; margin:0 auto;}
     
    .webwidget_menu_glide ul li{ 100px; height:30px; float:left; list-style-type:none;}
     
    .webwidget_menu_glide ul li a{ color:#000; 100px; height:30px; float:left;}
     
    #block{  100px; height:30px; float:left; background-color:green; position:absolute; margin-top:20px; opacity: 0.3;}
     
    </style>
     
     </head>
    <body>
    <input type="button" value="change" id="btn"/>
        <div id="block"></div>
     
     <div id="webwidget_menu_glide3" class="webwidget_menu_glide">
           
           <ul>
       
            <li ><a href="#">Home</a></li>
          
           <li id="current"><a href="#">News</a></li>
            
           <li><a href="#">About</a></li>
             
          <li><a href="#">Contact</a></li>
          
          <li><a href="#">More...</a></li>
          
         </ul>
    </div>
    </body>
    </html>

      

    然后有几个注意点:

    移动滑块的postion 不能为static。否则无法animate动态调整left值。

    再查了点资料希望对迷惑的人有帮助:

    1. position:static

    所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置。

    一般来说,不用指定 position:static,除非想要覆盖之前设置的定位。

    #div-1 {
     position:static;
    }

    2. position:relative

    如果设定 position:relative,就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置,只是视觉上相对于它在文档中的原有位置移动了】

    #div-1 {
     position:relative;
     top:20px;
     left:-40px;
    }

    3. position:absolute

    当指定 position:absolute 时,元素就脱离了文档【即在文档中已经不占据位置了】,可以准确的按照设置的 top,bottom,left 和 right 来定位了。

    #div-1a {
     position:absolute;
     top:0;
     right:0;
     200px;
    } 

    当然我自己对jquery也不是很了解,慢慢学起。

    这里晒下某网站的demo效果图

     这是他的地址http://www.niutuku.com/js/201103/149943/demo.html

    大家可以看看他的源码。写的好一些

    和我的自己的差别就是他加很圆角样式。以及他的js可以让他控制菜单样式。原理一样

  • 相关阅读:
    2017年8月21日 星期一 --出埃及记 Exodus 28:43
    2017年8月20日 星期日 --出埃及记 Exodus 28:42
    2017年8月19日 星期六 --出埃及记 Exodus 28:41
    2017年8月18日 星期五 --出埃及记 Exodus 28:40
    2017年8月17日 星期四 --出埃及记 Exodus 28:39
    2017年8月16日 星期三 --出埃及记 Exodus 28:38
    2017年8月15日 星期二 --出埃及记 Exodus 28:37
    2017年8月14日 星期一 --出埃及记 Exodus 28:36
    2017年8月13日 星期日 --出埃及记 Exodus 28:35
    2017年8月12日 星期六 --出埃及记 Exodus 28:34
  • 原文地址:https://www.cnblogs.com/sode/p/2658451.html
Copyright © 2020-2023  润新知