qq敝屏一些功能怎么浏览器打开就是qq导航导航和游戏

QQ空间导航的更多中不想显示访客怎么设置??_百度知道如何改回浏览器打开的是主页,QQ导航,勋章墙_百度知道屏敝了QQ要如何恢复_百度知道先贴上源代码
1 &!doctype html&
4 &meta charset="utf-8"&
5 &title&仿腾讯游戏首页小幻灯片jquery插件&/title&
img{border:0px;font-size:0;}
.banner{position:relative;width: .mybox{ height: 100%;width: 200%;overflow: hidden;position: absolute;right: 0;top: 0;}
.mybox .fPics{position:relative;float:right;height: /*banner自身左边导航样式*/
.fBtns,.fBtns li{ margin: 0;padding: 0;list-style-type:none;vertical-align:top;}
.mybox .fBtns li a{ display: block;overflow:hidden;}
.mybox .fBtns li{position:relative;height:20%;}
.fBtns .span-bg,.fBtns .span-text{
font-size: 14px; line-height: 34px; text-indent: 16px;
display:block; position:absolute;top:0;left:0;z-index:1;
width: 100%;overflow:hidden; white-space: nowrap}
.mybox .fBtns li .span-bg{ width:4px;z-index:2;}
.mybox .fBtns .span-text{color: #666; }
.mybox .fBtns li .span-bg{ color: #fff;}
.mybox .fBtns li.rli1 .span-bg{ background-color:#FF4E00;}
.mybox .fBtns li.rli2 .span-bg{ background-color:#FFC502;}
.mybox .fBtns li.rli3 .span-bg{background-color:#4C8502;}
.mybox .fBtns li.rli4 .span-bg{ background-color:#009CFF;}
.mybox .fBtns li.rli5 .span-bg{ background-color:#A19FEA;}
35 &/head&
&div class="banner" id="myBanner"&
&div class="mybox"&
&div class="fPics"&
&a href="" style="opacity: 1; display: block"&&img src="1.jpg"/&&/a&
&a href=""&&img src="2.jpg"/&&/a&
&a href=""&&img src="3.jpg"/&&/a&
&a href=""&&img src="4.jpg"/&&/a&
&a href=""&&img src="5.jpg"/&&/a&
&ul class="fBtns"&
&li class="rli1"&
&a href= href="#"&
&span class="span-bg" style="width: 100%"&侧边按钮1&/span&
&span class="span-text"&侧边按钮1&/span&
&li class="rli2"&
&a href="#"&
&span class="span-bg"&侧边按钮2&/span&
&span class="span-text"&侧边按钮2&/span&
&li class="rli3"&
&span class="span-bg"&侧边按钮3&/span&
&span class="span-text"&侧边按钮3&/span&
&li class="rli4"&
&a href="#"&
&span class="span-bg"&侧边按钮4&/span&
&span class="span-text"&侧边按钮4&/span&
&li class="rli5"&
&a href="#"&
&span class="span-bg"&侧边按钮5&/span&
&span class="span-text"&侧边按钮5&/span&
84 &script type="text/javascript" src="/js/jquery/1.11.1/jquery.min.js"&&/script&
85 &script&
$.fn.gameQq = function(){
var $this = $(this),
$btn = $this.find(".fBtns"),
$img = $this.find(".fPics");
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;
return this.each(function(){
new Bmove($btn,$img);
$("#myBanner").gameQq();
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 |auto&遵从其父对象的定位namber&&无单位的整数值。可为负数
这里用到absolute是因为这个效果侧边按钮有两层,使用该属性让&span-bg背景层浮上来达到预期效果。
$.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
&script&type="text/javascript"&
Object.prototype.Property&=&1;
Object.prototype.Method&=&function&()
var&obj&=&new&Object();
alert(obj.Property);
obj.Method();
例子二(prototype使用的限制):在实例上不能使用prototype,否则发生编译错误
&script&type="text/javascript"&
var&obj&=&new&Object();
obj.prototype.Property&=&1;&//Error
obj.prototype.Method&=&function()
例子三(如何定义类型上的静态成员):可以为类型定义&静态&的属性和方法,直接在类型上调用即可
&script&type="text/javascript"&
Object.Property&=&1;
Object.Method&=&function()
alert(Object.Property);
Object.Method();
例子五():这个例子演示了通常的在JavaScript中定义一个类型的方法
&script&type="text/javascript"&
function&Aclass()
this.Property&=&1;
this.Method&=&function()
var&obj&=&new&Aclass();
alert(obj.Property);
obj.Method();
例子六(JavaScript中允许添加行为的类型):可以在外部使用prototype为自定义的类型添加属性和方法。
&script&type="text/javascript"&
function&Aclass()
this.Property&=&1;
this.Method&=&function()
Aclass.prototype.Property2&=&2;
Aclass.prototype.Method2&=&function
var&obj&=&new&Aclass();
alert(obj.Property2);
obj.Method2();
例子八():可以在对象上改变属性。(这个是肯定的)也可以在对象上改变方法。(和普遍的面向对象的概念不同)
&script&type="text/javascript"&
function&Aclass()
this.Property&=&1;
this.Method&=&function()
var&obj&=&new&Aclass();
obj.Property&=&2;
obj.Method&=&function()
alert(obj.Property);
obj.Method();
例子九():可以在对象上增加属性或方法
&script&type="text/javascript"&
function&Aclass()
this.Property&=&1;
this.Method&=&function()
var&obj&=&new&Aclass();
obj.Property&=&2;
obj.Method&=&function()
alert(obj.Property);
obj.Method();
例子十(如何让一个类型继承于另一个类型):这个例子说明了一个类型如何从另一个类型继承。
&script&type="text/javascript"&
function&AClass()
this.Property&=&1;
this.Method&=&function()
function&AClass2()
this.Property2&=&2;
this.Method2&=&function()
AClass2.prototype&=&new&AClass();
var&obj&=&new&AClass2();
alert(obj.Property);
obj.Method();
alert(obj.Property2);
obj.Method2();
例子十一(如何在子类中重新定义父类的成员):这个例子说明了子类如何重写父类的属性或方法。
&script&type="text/javascript"&
function&AClass()
this.Property&=&1;
this.Method&=&function()
function&AClass2()
this.Property2&=&2;
this.Method2&=&function()
AClass2.prototype&=&new&AClass();
AClass2.prototype.Property&=&3;
AClass2.prototype.Method&=&function()
var&obj&=&new&AClass2();
alert(obj.Property);
obj.Method();
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'});
}); 具体访问连接查看 .cn/jquery/jquery_animate.aspstop()停止动画个人分析,技术有限,有错误的地方见笑了
首先,封装了一个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(){
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});
这些是关键代码,我的理解是先each遍历侧边按钮li,当有鼠标经过(切换)时将当前(切换前)侧边按钮背景设置4px(隐藏),然后调去相应索引的图片进行展示,然后设置当前(切换前)的图片隐藏。
new 进行调用。
return this.each(function(){
new Bmove($btn,$img);
这个代码感觉非常巧妙干练,与之前接触过的递归排序一样(虽然不是一个级别的)。
阅读(...) 评论()我的QQ敝屏了啥办_百度知道

参考资料

 

随机推荐