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

先贴上源代码

  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代码

<script type="text/javascript">
Object.prototype.Property = 1;
Object.prototype.Method = function ()
{
alert(1);
}
var obj = new Object();
alert(obj.Property);
obj.Method();
</script>

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

Js代码

<script type="text/javascript">
var obj = new Object();
obj.prototype.Property = 1; //Error
//Error
obj.prototype.Method = function()
{
alert(1);
}
</script>

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

Js代码

<script type="text/javascript">
Object.Property = 1;
Object.Method = function()
{
alert(1);
}
alert(Object.Property);
Object.Method();
</script>

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

Js代码

<script type="text/javascript">
function Aclass()
{
this.Property = 1;
this.Method = function()
{
alert(1);
}
}
var obj = new Aclass();
alert(obj.Property);
obj.Method();
</script>

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

Js代码

<script type="text/javascript">
function Aclass()
{
this.Property = 1;
this.Method = function()
{
alert(1);
}
}
Aclass.prototype.Property2 = 2;
Aclass.prototype.Method2 = function
{
alert(2);
}
var obj = new Aclass();
alert(obj.Property2);
obj.Method2();
</script>

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

Js代码

<script type="text/javascript">
function Aclass()
{
this.Property = 1;
this.Method = function()
{
alert(1);
}
}
var obj = new Aclass();
obj.Property = 2;
obj.Method = function()
{
alert(2);
}
alert(obj.Property);
obj.Method();
</script>

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

Js代码

<script type="text/javascript">
function Aclass()
{
this.Property = 1;
this.Method = function()
{
alert(1);
}
}
var obj = new Aclass();
obj.Property = 2;
obj.Method = function()
{
alert(2);
}
alert(obj.Property);
obj.Method();
</script>

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

Js代码

<script type="text/javascript">
function AClass()
{
this.Property = 1;
this.Method = function()
{
alert(1);
}
}
function AClass2()
{
this.Property2 = 2;
this.Method2 = function()
{
alert(2);
}
}
AClass2.prototype = new AClass();
var obj = new AClass2();
alert(obj.Property);
obj.Method();
alert(obj.Property2);
obj.Method2();
</script>

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

Js代码

<script type="text/javascript">
function AClass()
{
this.Property = 1;
this.Method = function()
{
alert(1);
}
}
function AClass2()
{
this.Property2 = 2;
this.Method2 = function()
{
alert(2);
}
}
AClass2.prototype = new AClass();
AClass2.prototype.Property = 3;
AClass2.prototype.Method = function()
{
alert(4);
}
var obj = new AClass2();
alert(obj.Property);
obj.Method();
</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;

posted @ 2015-07-04 21:20 voidcat 阅读(376) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

voidcat

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

jQuery 动画 - animate() 方法

语法：

实例

公告