码迷，mamicode.com
首页 > 其他好文 > 详细

巧妙的Jq仿QQ游戏导航界面学习

时间：2015-07-04 22:10:47      阅读：169      评论：0      收藏：0      [点我收藏+]

标签：

先贴上源代码

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>仿腾讯游戏首页小幻灯片jquery插件</title>
  6 
  7     <style>
  8         img{border:0px;font-size:0;}
  9 
 10         .banner{position:relative;width:960px;height:170px;overflow:hidden;margin:1px auto;}
 11         .mybox{ height: 100%;width: 200%;overflow: hidden;position: absolute;right: 0;top: 0;}
 12         .mybox .fPics{position:relative;float:right;height:100%;width:39%;background:#F3F9F8;}
 13         .mybox .fPics a{position:absolute;width:748px;height:100%;display:block;overflow:hidden;top:0;right:0;opacity:0;z-index:1;}
 14         .mybox .fPics a img{display: block;height: 100%;position: absolute;right: 0;top: 0;width: auto;z-index: 2;}
 15         .mybox .fBtns{position:relative;float:right;height:100%;width:11%;background:#F4F4F4;}
 16 
 17         /*banner自身左边导航样式*/
 18         .fBtns,.fBtns li{ margin: 0;padding: 0;list-style-type:none;vertical-align:top;}
 19         .mybox .fBtns li a{ display: block;overflow:hidden;}
 20         .mybox .fBtns li{position:relative;height:20%;}
 21         .fBtns .span-bg,.fBtns .span-text{  font-size: 14px; line-height: 34px; text-indent: 16px;
 22             display:block; position:absolute;top:0;left:0;z-index:1;
 23             width: 100%;overflow:hidden; white-space: nowrap}
 24         .mybox .fBtns li .span-bg{ width:4px;z-index:2;}
 25         .mybox .fBtns .span-text{color: #666; }
 26         .mybox .fBtns li .span-bg{ color: #fff;}
 27 
 28         .mybox .fBtns li.rli1 .span-bg{ background-color:#FF4E00;}
 29         .mybox .fBtns li.rli2 .span-bg{ background-color:#FFC502;}
 30         .mybox .fBtns li.rli3 .span-bg{background-color:#4C8502;}
 31         .mybox .fBtns li.rli4 .span-bg{ background-color:#009CFF;}
 32         .mybox .fBtns li.rli5 .span-bg{ background-color:#A19FEA;}
 33     </style>
 34 
 35 </head>
 36 <body>
 37 
 38 
 39     <div class="banner" id="myBanner">
 40         <div class="mybox">
 41             <div class="fPics">
 42                 <a href="" style="opacity: 1; display: block"><img src="1.jpg"/></a>
 43                 <a href=""><img src="2.jpg"/></a>
 44                 <a href=""><img src="3.jpg"/></a>
 45                 <a href=""><img src="4.jpg"/></a>
 46                 <a href=""><img src="5.jpg"/></a>
 47             </div>
 48             <ul class="fBtns">
 49                 <li class="rli1">
 50                     <a href= href="#">
 51                         <span class="span-bg" style="width: 100%">侧边按钮1</span>
 52                         <span class="span-text">侧边按钮1</span>
 53                     </a>
 54                 </li>
 55                 <li class="rli2">
 56                     <a href="#">
 57                         <span class="span-bg">侧边按钮2</span>
 58                         <span class="span-text">侧边按钮2</span>
 59                     </a>
 60                 </li>
 61                 <li class="rli3">
 62                     <a  href="#">
 63                         <span class="span-bg">侧边按钮3</span>
 64                         <span class="span-text">侧边按钮3</span>
 65                     </a>
 66                 </li>
 67                 <li class="rli4">
 68                     <a href="#">
 69                         <span class="span-bg">侧边按钮4</span>
 70                         <span class="span-text">侧边按钮4</span>
 71                     </a>
 72                 </li>
 73                 <li class="rli5">
 74                     <a href="#">
 75                         <span class="span-bg">侧边按钮5</span>
 76                         <span class="span-text">侧边按钮5</span>
 77                     </a>
 78                 </li>
 79             </ul>
 80         </div>
 81     </div>
 82 
 83 
 84 <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
 85 <script>
 86 
 87     $.fn.gameQq = function(){
 88         var $this = $(this),
 89             $btn = $this.find(".fBtns"),
 90             $img = $this.find(".fPics");
 91 
 92         function Bmove($oBtn,$oImg){
 93             this.btn=$oBtn.find("li");
 94             this.img=$oImg.find("a");
 95             this.show();
 96         }
 97         Bmove.prototype={
 98             show:function(){
 99                 var thb=this;
100                 this.btn.each(function(i){
101                     $(this).mouseenter(function(){
102                         thb.btn.find(".span-bg").stop().animate({"width":"4px"});
103                         $(this).find(".span-bg").stop().animate({"width":"100%"});
104                         thb.img.eq(i).stop().animate({"opacity":"1","z-index":2});
105                         thb.img.eq(i).siblings("a").stop().animate({"opacity":"0","z-index":1});
106                         return false;
107                     })
108                 })
109             }
110         };
111 
112         return this.each(function(){
113             new Bmove($btn,$img);
114         })
115     };
116 
117     //调用
118     $("#myBanner").gameQq();
119 
120 </script>
121 </body>
122 </html>

因为js 和jq基础比较差，首先过了一遍代码感觉就是高大上，看不懂，再贴上些基础知识。

首先是css 定位：

 定位的定义：

    在CSS中关于定位的内容是：
position:relative | absolute | static | fixed
    static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。
    relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
    absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
    fixed（固定定位） 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
注：
CSS中定位的层叠分级：z-index: auto | namber;

auto 遵从其父对象的定位
namber  无单位的整数值。可为负数

 

这里用到absolute是因为这个效果侧边按钮有两层，使用该属性让 span-bg背景层浮上来达到预期效果。

$.fn

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。 

 

js 中的 prototype

之前没接触过这东西，从网上找了些资料贴上

JavaScript能够实现的面向对象的特征有：
·公有属性(public field)
·公有方法(public Method)
·私有属性(private field)
·私有方法(private field)
·方法重载(method overload)
·构造函数(constructor)
·事件(event)
·单一继承(single inherit)
·子类重写父类的属性或方法(override)
·静态属性或方法(static member)


例子一(JavaScript中允许添加行为的类型)：可以在类型上使用proptotype来为类型添加行为。这些行为只能在类型的实例上体现。 JS中允许的类型有Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String

Js代码
  1. <script type="text/javascript">
  2. Object.prototype.Property = 1;
  3. Object.prototype.Method = function ()
  4. {
  5. alert(1);
  6. }
  8. var obj = new Object();
  9. alert(obj.Property);
  10. obj.Method();
  11. </script>

例子二(prototype使用的限制)：在实例上不能使用prototype，否则发生编译错误

Js代码
  1. <script type="text/javascript">
  2. var obj = new Object();
  3. obj.prototype.Property = 1; //Error
  4. //Error
  5. obj.prototype.Method = function()
  6. {
  7. alert(1);
  8. }
  9. </script>

例子三(如何定义类型上的静态成员)：可以为类型定义“静态”的属性和方法，直接在类型上调用即可

Js代码
  1. <script type="text/javascript">
  2. Object.Property = 1;
  3. Object.Method = function()
  4. {
  5. alert(1);
  6. }
  8. alert(Object.Property);
  9. Object.Method();
  10. </script>

例子五()：这个例子演示了通常的在JavaScript中定义一个类型的方法

Js代码
  1. <script type="text/javascript">
  2. function Aclass()
  3. {
  4. this.Property = 1;
  5. this.Method = function()
  6. {
  7. alert(1);
  8. }
  9. }
  10. var obj = new Aclass();
  11. alert(obj.Property);
  12. obj.Method();
  13. </script>

例子六(JavaScript中允许添加行为的类型)：可以在外部使用prototype为自定义的类型添加属性和方法。

Js代码
  1. <script type="text/javascript">
  2. function Aclass()
  3. {
  4. this.Property = 1;
  5. this.Method = function()
  6. {
  7. alert(1);
  8. }
  9. }
  10. Aclass.prototype.Property2 = 2;
  11. Aclass.prototype.Method2 = function
  12. {
  13. alert(2);
  14. }
  15. var obj = new Aclass();
  16. alert(obj.Property2);
  17. obj.Method2();
  18. </script>

例子八()：可以在对象上改变属性。（这个是肯定的）也可以在对象上改变方法。（和普遍的面向对象的概念不同）

Js代码
  1. <script type="text/javascript">
  2. function Aclass()
  3. {
  4. this.Property = 1;
  5. this.Method = function()
  6. {
  7. alert(1);
  8. }
  9. }
  10. var obj = new Aclass();
  11. obj.Property = 2;
  12. obj.Method = function()
  13. {
  14. alert(2);
  15. }
  16. alert(obj.Property);
  17. obj.Method();
  18. </script>

例子九()：可以在对象上增加属性或方法

Js代码
  1. <script type="text/javascript">
  2. function Aclass()
  3. {
  4. this.Property = 1;
  5. this.Method = function()
  6. {
  7. alert(1);
  8. }
  9. }
  10. var obj = new Aclass();
  11. obj.Property = 2;
  12. obj.Method = function()
  13. {
  14. alert(2);
  15. }
  16. alert(obj.Property);
  17. obj.Method();
  18. </script>

例子十(如何让一个类型继承于另一个类型)：这个例子说明了一个类型如何从另一个类型继承。

Js代码
  1. <script type="text/javascript">
  2. function AClass()
  3. {
  4. this.Property = 1;
  5. this.Method = function()
  6. {
  7. alert(1);
  8. }
  9. }
  11. function AClass2()
  12. {
  13. this.Property2 = 2;
  14. this.Method2 = function()
  15. {
  16. alert(2);
  17. }
  18. }
  19. AClass2.prototype = new AClass();
  21. var obj = new AClass2();
  22. alert(obj.Property);
  23. obj.Method();
  24. alert(obj.Property2);
  25. obj.Method2();
  26. </script>

例子十一(如何在子类中重新定义父类的成员)：这个例子说明了子类如何重写父类的属性或方法。

Js代码
    1. <script type="text/javascript">
    2. function AClass()
    3. {
    4. this.Property = 1;
    5. this.Method = function()
    6. {
    7. alert(1);
    8. }
    9. }
    11. function AClass2()
    12. {
    13. this.Property2 = 2;
    14. this.Method2 = function()
    15. {
    16. alert(2);
    17. }
    18. }
    19. AClass2.prototype = new AClass();
    20. AClass2.prototype.Property = 3;
    21. AClass2.prototype.Method = function()
    22. {
    23. alert(4);
    24. }
    25. var obj = new AClass2();
    26. alert(obj.Property);
    27. obj.Method();
    28. </script>

Jq中的动画效果

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：

实例

$("button").click(function(){
  $("div").animate({left:‘250px‘});
}); 

具体访问连接查看 http://w3school.com.cn/jquery/jquery_animate.asp

stop()停止动画

个人分析，技术有限，有错误的地方见笑了

首先，封装了一个gameQq方法，就不用多说了。

  $.fn.gameQq = function(){.... 

然后定位获取侧边按钮和图片

        var $this = $(this),
            $btn = $this.find(".fBtns"),
            $img = $this.find(".fPics");

添加Bmove方法和然后给Bmove添加了一个show()“方法”，好吧允许我这么说，具体的理解还得参考prototype定义。

function Bmove($oBtn,$oImg){
            this.btn=$oBtn.find("li");
            this.img=$oImg.find("a");
            this.show();
        }
        Bmove.prototype={
            show:function(){
                var thb=this;
                this.btn.each(function(i){
                    $(this).mouseenter(function(){
                        thb.btn.find(".span-bg").stop().animate({"width":"4px"});
                        $(this).find(".span-bg").stop().animate({"width":"100%"});
                        thb.img.eq(i).stop().animate({"opacity":"1","z-index":2});
                        thb.img.eq(i).siblings("a").stop().animate({"opacity":"0","z-index":1});
                        return false;
                    })
                })
            }
        };

这些是关键代码，我的理解是先each遍历侧边按钮li，当有鼠标经过（切换）时将当前（切换前）侧边按钮背景设置4px（隐藏），然后调去相应索引的图片进行展示，然后设置当前（切换前）的图片隐藏。

 

new 进行调用。

   return this.each(function(){
            new Bmove($btn,$img);
        })

 

这个代码感觉非常巧妙干练，与之前接触过的递归排序一样（虽然不是一个级别的）。

END;

巧妙的Jq仿QQ游戏导航界面学习

标签：

原文地址：http://www.cnblogs.com/voidcat/p/4621273.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！