仿腾讯公布天涯论坛的机能代码,成分的二种方法的自己检查自纠

当transition遇上display

2016/01/13 · CSS · 5
评论 ·
display,
transition

初稿出处:
携程设计委员会   

深信大家在试用css3动画时候自然用过transition属性,相对于js动画来说用起来更高速简单。
代码如下:
HTML结构:

XHTML

<div id=”box”></div> <button>动画按钮</button>

1
2
<div id="box"></div>
<button>动画按钮</button>

CSS代码:

CSS

.box { background: goldenrod; width: 300px; height: 300px; margin: 30px
auto; transition: all .4s linear; /*display: block;*/ } .hidden {
/*display: none;*/ opacity: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
    background: goldenrod;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    transition: all .4s linear;
    /*display: block;*/
}
 
.hidden {
    /*display: none;*/
    opacity: 0;
}

JS代码

JavaScript

var box = $(‘#box’); $(‘button’).on(‘click’, function () {
if(box.hasClass(‘hidden’)){ box.removeClass(‘hidden’); }else{
box.addClass(‘hidden’); } });

1
2
3
4
5
6
7
8
var box = $(‘#box’);
$(‘button’).on(‘click’, function () {
    if(box.hasClass(‘hidden’)){
        box.removeClass(‘hidden’);
    }else{
        box.addClass(‘hidden’);
    }
});

在点击按钮后可以见见淡入淡出的动画效果,可是在css代码中排除对于display属性的两段注释以往,再打开浏览器一看,淡入淡出的职能全没了。
那简直是破坏性的功力,然后自个儿度娘了一晃总计了多少个办法。

率先种办法:将display用visibility来顶替,咱们都精晓visibility的机能实在跟display在放任自流程度上一般,这为啥说只是必然水平上相似呢,因为它仍然是占空间的,这您一定会说,这么用跟opacity没啥区别呀。但却能够避免遮挡下边包车型地铁层比如按钮的点击事件。

其次种形式是周旋于第①种方法的进阶,利用了js的setTimout和transitionend事件
css代码 将class hidden类中的opacity分离出来

CSS代码:

CSS

.box { background: goldenrod; width: 300px; height: 300px; margin: 30px
auto; transition: all .4s linear; visibility: visible; } .hidden {
display: none; } .visuallyhidden { opacity: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {
    background: goldenrod;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    transition: all .4s linear;
    visibility: visible;
}
.hidden {
    display: none;
}
.visuallyhidden {
    opacity: 0;
}

js代码

JavaScript

var box = $(‘#box’); $(‘button’).on(‘click’, function () { if
(box.hasClass(‘hidden’)) { box.removeClass(‘hidden’);
setTimeout(function () { box.removeClass(‘visuallyhidden’); }, 20); }
else { box.addClass(‘visuallyhidden’); box.one(‘transitionend’,
function(e) { box.addClass(‘hidden’); }); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var box = $(‘#box’);
$(‘button’).on(‘click’, function () {
    if (box.hasClass(‘hidden’)) {
        box.removeClass(‘hidden’);
        setTimeout(function () {
            box.removeClass(‘visuallyhidden’);
        }, 20);
    } else {
        box.addClass(‘visuallyhidden’);
        box.one(‘transitionend’, function(e) {
            box.addClass(‘hidden’);
        });
    }
});

其三种办法与第三种艺术类似,用requestAnimationFrame来取代setTimeout,相应的改动了if条件里的js。
requestAnimationFrame其实也就跟setTimeout/setInterval大约,通过递归调用同一方法来不断更新画面以达到动起来的效用,但它优于setTimeout/setInterval的地点在于它是由浏览器专门为卡通提供的API,在运作时浏览器会自行优化措施的调用,并且只要页面不是激活状态下的话,动画会自动刹车,有效节约了CPU开支。

js代码如下

JavaScript

var box = $(‘#box’); $(‘button’).on(‘click’, function () { if
(box.hasClass(‘hidden’)) { box.removeClass(‘hidden’);
requestAnimationFrame(function(){ box.removeClass(‘visuallyhidden’); });
} else { box.addClass(‘visuallyhidden’); box.one(‘transitionend’,
function(e) { box.addClass(‘hidden’); }); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var box = $(‘#box’);
$(‘button’).on(‘click’, function () {
    if (box.hasClass(‘hidden’)) {
        box.removeClass(‘hidden’);
        requestAnimationFrame(function(){
            box.removeClass(‘visuallyhidden’);
        });
    } else {
        box.addClass(‘visuallyhidden’);
        box.one(‘transitionend’, function(e) {
            box.addClass(‘hidden’);
        });
    }
});

以上正是当transition遇上display时相遇的坑。

1 赞 5 收藏 5
评论

美高梅开户网址 1

CSS“隐藏”成分的二种办法的相比

2016/02/16 · CSS ·
隐藏

最初的小说出处:
狼狼的蓝胖子(@狼狼的蓝胖子)   

一说起CSS隐藏成分,作者想抢先二分一小伙伴们都会想到的第③种方法正是安装display为none。这是极端人所熟练也是最常用的办法。笔者深信不疑还有诸四人想到利用安装visibility为hidden来隐藏成分,那种措施也是常用的主意,而且也有不少人了然两岸的例外。除了那二种办法,本文还计算了部分比较不常用的章程,相比了那二种“隐藏”成分方法的界别和优缺点,欢迎大家沟通!!

信任我们在试用css3动画片时候势必用过transition属性,相对于js动画来说用起来更火速简单。
代码如下:
HTML结构:

新近2天研究了下 腾讯公布腾讯网的机能 特此来分享下,效果如下:

三种艺术的简要介绍

首先我们独家来说说到底有哪三种隐藏成分的点子,有部分艺术是强烈的,还有部分好不简单一种技术。

<div id="box" class="box"></div>
<button>动画按钮</button>

美高梅开户网址 2

display:none

设置成分的display为none是最常用的隐藏成分的艺术。

CSS

.hide { display:none; }

1
2
3
.hide {
     display:none;
}

将成分设置为display:none后,成分在页面军长彻底消失,成分本来占有的半空中就会被此外因素占有,也正是说它会导致浏览器的重排和重绘。

CSS代码:

 

visibility:hidden

安装成分的visibility为hidden也是一种常用的隐藏元素的艺术,和display:none的分别在于,成分在页面消失后,其占用的上空依然会保留着,所以它只会导致浏览珍视绘而不会重排。

.hidden{ visibility:hidden }

1
2
3
.hidden{
     visibility:hidden
}

visibility:hidden适用于这3个成分隐藏后不指望页面布局会产生变化的气象

.box {
   background: goldenrod;
   width: 300px;
   height: 300px;
   margin: 30px auto;
   transition: all .4s linear;
   /*display: block;*/
}

.hidden {
   /*display: none;*/
   opacity: 0;
}

在此分享前 来商量自身编写代码的习惯,很四人会问作者既是用的是jquery框架
为何写的机件不用Jquery那种样式?笔者立马应答的是:各种人编写代码有各样人的习惯。不过作者更想发挥的是:那种编码个人觉得
有多个十分的大的独到之处,作者不是尤其信赖于Jquery框架,因为差异的协作社有例外的框架
比如在天猫用的kissy框架 在支付宝用的是支付宝框架 在百度用的是百度框架
在腾讯有腾讯的前端js框架 假诺小编的编撰代码太依仗于jquery
那假若其余人想要用自作者代码大概自个儿本身某一天去做腾讯项目了
不过她们那里须求我们不得不用他们的JS框架
且又有那样的效劳?那就算本身完全重视jquery这种方式编码
那今后自家是否要重复编码呢?借使依据现行反革命编码格局去编码
最八只是用了下jquery选用器而已 那么一旦改下采纳器
别的的代码都得以直接拿来用,那样的扩大性非凡好!笔者个人认为作为贰个行业内部的前端开发,不仅仅只会一丢丢jquery做做东西,而更应当考虑编写高品质的代码,或然用jquery写写简单的代码同样能抓实有个别东西,然而有没有考虑到假若某一天要求扩展了某某功能你是或不是又要改代码?能还是不能够在以前的基本功上海重机厂新写新的职能?而无需改代码!

opacity:0

opacity属性小编相信大家都理通大便示成分的折射率,而将成分的反射率设置为0后,在大家用户眼中,成分也是隐藏的,那究竟一种隐藏成分的法子。

.transparent { opacity:0; }

1
2
3
.transparent {
     opacity:0;
}

这种艺术和visibility:hidden的八个共同点是因素隐藏后依然占据着空间,但咱们都了然,设置发光度为0后,成分只是隐身了,它照旧存在页面中。

JS代码

何谓高品质的代码?

安装height,width等盒模型属性为0

那是本身总计的一种相比较奇葩的技能,简单说正是将成分的margin,border,padding,height和width等影响因素盒模型的属性设置成0,借使元素内有子成分或内容,还应该安装其overflow:hidden来隐藏其子成分,那到底一种奇技淫巧。

.hiddenBox { margin:0; border:0; padding:0; height:0; width:0;
overflow:hidden; }

1
2
3
4
5
6
7
8
.hiddenBox {
     margin:0;
     border:0;
     padding:0;
     height:0;
     width:0;
     overflow:hidden;
}

那种办法既不实用,也大概存在着着一些标题。但平日大家用到的一部分页面效果说不定正是运用那种艺术来完成的,比如jquery的slideUp动画,它正是设置成分的overflow:hidden后,接着通过定时器,不断地安装成分的height,margin-top,margin-bottom,border-top,border-bottom,padding-top,padding-bottom为0,从而达成slideUp的成效。

var box = $('#box');
$('button').on('click', function () {
    if(box.hasClass('hidden')){
        box.removeClass('hidden');
    }else{
        box.addClass('hidden');
    }
});

个人认为必须满足以下几点:

要素隐藏后的事件响应

若是被埋伏的因素绑定了某些风浪,大家执行了有关操作后,这一个事件是或不是会被响应并履行吗,看看下边包车型客车代码:

JavaScript

<style> div { width: 100px; height: 100px; background: red;
margin: 15px; padding: 10px; border: 5px solid green; display:
inline-block; overflow: hidden; } .none { display: none; } .hidden {
visibility: hidden; } .opacity0 { opacity: 0; } .height0 { height: 0; }
</style> <div class=”none”></div> <div
class=”hidden”></div> <div class=”opacity0″></div>
<div class=”height0″>aa</div> <script
src=”/Scripts/jquery-1.10.2.min.js”></script> <script>
$(“.none”).on(“click”, function () { console.log(“none clicked”); })
$(“.hidden”).on(“click”, function () { console.log(“hidden clicked”); })
$(“.opacity0”).on(“click”, function () { console.log(“opacity0
clicked”); }) $(“.height0”).on(“click”, function () {
console.log(“height0 clicked”); }) </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
        margin: 15px;
        padding: 10px;
        border: 5px solid green;
        display: inline-block;
        overflow: hidden;
    }
    .none { display: none; }
    .hidden { visibility: hidden; }
    .opacity0 { opacity: 0; }
    .height0 { height: 0; }  
</style>  
 
<div class="none"></div>
<div class="hidden"></div>
<div class="opacity0"></div>
<div class="height0">aa</div>  
 
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(".none").on("click", function () {
        console.log("none clicked");
    })
    $(".hidden").on("click", function () {
        console.log("hidden clicked");
    })
    $(".opacity0").on("click", function () {
        console.log("opacity0 clicked");
    })
    $(".height0").on("click", function () {
        console.log("height0 clicked");
    })
</script>

那段代码将多样隐藏成分的法门分别展现出来,然后绑定其点击事件,经过测试,重要有下边包车型地铁下结论:

① 、display:none:元素彻底破灭,很鲜明不会触发其点击事件
贰 、visibility:hidden:无法触发其点击事件,有一种说法是display:none是因素看不见摸不着,而visibility:hidden是看不见摸得着,那种说法是不精确的,设置成分的visibility后不可能触发点击事件,表达那种办法成分也是过眼烟云了,只是依然占据着页面空间。
叁 、opacity:0:能够触发点击事件,原因也极粗略,设置成分发光度为0后,成分只是对峙于人眼不存在而已,对浏览器来说,它依然存在的,所以能够触发点击事件
④ 、height:0:将成分的万丈设置为0,并且安装overflow:hidden。使用那种艺术来隐藏成分,是还是不是足以触发事件要依据具体的状态来分析。如若成分设置了border,padding等性子不为0,很精通,页面上或然能看出那么些因素的,触发成分的点击事件完全没分外。假设全勤质量都安装为0,很扎眼,那个因素也正是消失了,即不恐怕触发点击事件。

可是这个结论真的准确吗?
咱俩在上头的代码中添加那样一句代码:

1 $(“.none”).click();

1
1 $(".none").click();

结果发现,触发了click事件,也正是因而JS能够触发被安装为display:none的因素的事件。
由在此以前面不可能触发点击事件的真正原因是鼠标无法真正接触到被设置成隐藏的成分!!!

在点击按钮后能够看到淡入淡出的卡通效果,可是在css代码中革除对于display属性的两段注释未来,再打开浏览器一看,淡入淡出的效应全没了。
那大概是破坏性的法力,然后我度娘了一下总括了多少个主意。

   1. 可扩张性。

CSS3 transition对那两种形式的熏陶

CSS3提供的transition十分大地提升了网页动画的编排,但并不是种种CSS属性都能够通过transition来拓展动画的。大家修改代码如下:

JavaScript

<style> div { width: 100px; height: 100px; background: red;
margin: 15px; padding: 10px; border: 5px solid green; display:
inline-block; overflow: hidden; transition: all linear 2s; }
</style> <div class=”none”></div> <div
class=”hidden”></div> <div class=”opacity0″></div>
<div class=”height0″>aa</div> <script
src=”/Scripts/jquery-1.10.2.min.js”></script> <script>
$(“.none”).on(“click”, function () { console.log(“none clicked”);
$(this).css(“display”, “none”); }) $(“.hidden”).on(“click”, function ()
{ console.log(“hidden clicked”); $(this).css(“visibility”, “hidden”); })
$(“.opacity0”).on(“click”, function () { console.log(“opacity0
clicked”); $(this).css(“opacity”, 0); }) $(“.height0”).on(“click”,
function () { console.log(“height0 clicked”); $(this).css({ “height”: 0,
}); }) </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
        margin: 15px;
        padding: 10px;
        border: 5px solid green;
        display: inline-block;
        overflow: hidden;
        transition: all linear 2s;  
    }
</style>  
 
<div class="none"></div>
<div class="hidden"></div>
<div class="opacity0"></div>
<div class="height0">aa</div>  
 
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(".none").on("click", function () {
    console.log("none clicked");
    $(this).css("display", "none");
})
$(".hidden").on("click", function () {
    console.log("hidden clicked");
    $(this).css("visibility", "hidden");
})
$(".opacity0").on("click", function () {
    console.log("opacity0 clicked");
    $(this).css("opacity", 0);
})
$(".height0").on("click", function () {
    console.log("height0 clicked");
    $(this).css({
        "height": 0,
    });
})
</script>

因此测试,能够观察:
一 、display:none:完全不受transition属性的影响,成分立刻消失
二 、visibility:hidden:成分消失的岁月跟transition属性设置的小时一致,但是尚未动画效果
叁 、opacity和height等属性能够进行常规的动画效果

一经大家要通过CSS3来做贰个退出的卡通效果,应该如下:

.fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; }
.fadeOut:hover { visibility: hidden; opacity: 0; }

1
2
.fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; }
     .fadeOut:hover { visibility: hidden; opacity: 0; }

应该而且安装元素的visibility和opacity属性。

率先种办法:将display用visibility来取代,大家都驾驭visibility的功效其实跟display在一定水平上一般,那怎么说只是一定水准上相似呢,因为它照旧是占空间的,那您肯定会说,这么用跟opacity没啥差别呀。但却得以防止遮挡下边的层比如按钮的点击事件。

   2. 可维护性。

小结表达

本文化总同盟结表达了“隐藏”成分的三种方法,在那之中最常用的要么display:none和visibility:hidden。其余的不二法门只好算是奇技淫巧,并不引进应用它们来隐藏成分,它们的着实用途应该不在隐藏成分,而是通过打听这些方式的性状,挖掘出其真正的运用情状。欢迎大家调换!!

其次种办法是绝对于第①种艺术的进阶,利用了js的setTimout和transitionend事件
css代码 将class hidden类中的opacity分离出来

   3. 可读性,易使用性。

 补充

来自己评价论区小伙伴们补充的技能:

一 、设置成分的position与left,top,bottom,right等,将成分移出至显示器外

贰 、设置成分的position与z-index,将z-index设置成尽量小的负数

2 赞 3 收藏
评论

美高梅开户网址 3

CSS代码:

   4. JS性能。

.box {
    background: goldenrod;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    transition: all .4s linear;
    visibility: visible;
}
.hidden {
    display: none;
}
.visuallyhidden {
    opacity: 0;
}

 最要害知足以上几点。

js代码

 好了 废话不多说了!转核心,如今我做的那一个发表微博效果 只是不难的
当然腾讯刊登今日头条有一部分错综复杂的功用比如说上边有加上表情等等作用,近年来尚无做成那样的(工作量比较大)。

var box = $('#box');
$('button').on('click', function () {
    if (box.hasClass('hidden')) {
        box.removeClass('hidden');
        setTimeout(function () {
            box.removeClass('visuallyhidden');
        }, 20);
    } else {
        box.addClass('visuallyhidden');
        box.one('transitionend', function(e) {
            box.addClass('hidden');
        });
    }
});

 下边作者写的那几个JS代码要求小心2点:

其两种办法与第三种艺术类似,用requestAnimationFrame来代表setTimeout,相应的改动了if条件里的js。
requestAnimationFrame其实也就跟setTimeout/setInterval大致,通过递归调用同一方法来不断更新画面以高达动起来的成效,但它优于setTimeout/setInterval的地点在于它是由浏览器专门为动画片提供的API,在运转时浏览器会活动优化措施的调用,并且只要页面不是激活状态下的话,动画会自动刹车,有效节约了CPU费用。

 1.每一趟公布下后 我们在说列表会添加一条,方今从不发ajax请求 后台从未记录
所以刷新页面 会清掉。

js代码如下

 2. 时间是用的是客户端时间 倘诺客户端时间不当的话 那么时间也会受影响。

var box = $('#box');
$('button').on('click', function () {
    if (box.hasClass('hidden')) {
        box.removeClass('hidden');
        requestAnimationFrame(function(){
            box.removeClass('visuallyhidden');
        });
    } else {
        box.addClass('visuallyhidden');
        box.one('transitionend', function(e) {
            box.addClass('hidden');
        });
    }
});

事实上思路很简单 看上面的效力就明白所以思路在那边不多说了!或许自个儿下边会提供压缩demo
能够友善下载下来看看效果就ok了!每便公布一遍后 都提供了回调
作为扩展吧!当然鼠标移到某一项时候 会出现删除按钮
同时能够自由删除某一项。直接贴代码吧 也尚未什么样好说的!

上述就是当transition遇上display时遭逢的坑。

HTML代码如下:

复制代码 代码如下:

<div id=”msgBox”>
        <form>
            <h2>来 , 说说你在做哪些 , 想怎么着</h2>
            <div>
                <input id=”userName” class=”f-text” value=”” />
                <p id=”face”>
                    <img src=”img/face1.gif” class=”current” />
仿腾讯公布天涯论坛的机能代码,成分的二种方法的自己检查自纠。                    <img src=”img/face2.gif” />
                    <img src=”img/face3.gif” />
                    <img src=”img/face4.gif” />
                    <img src=”img/face5.gif” />
                    <img src=”img/face6.gif” />
                    <img src=”img/face7.gif” />
                    <img src=”img/face8.gif” />
                </p>
            </div>
            <div>
                <textarea id=”conBox”
class=”f-text”></textarea>
            </div>
            <div class=”tr”>
                <p>
                    <span
class=”countTxt”>还是能够输入</span><strong
class=”maxNum”>140</strong><span>个字</span>
                    <input id=”sendBtn” type=”button” value=””
title=”快捷键 Ctrl+Enter” />
                </p>
            </div>
        </form>
        <div class=”list”>
            <h3><span>大家在说</span></h3>
            <ul id=”list-msg”></ul>
        </div>   
    </div>

CSS代码如下:

复制代码 代码如下:

body,div,h2,h3,ul,li,p{margin:0;padding:0;}
    a{text-decoration:none;}
    a:hover{text-decoration:underline;}
    ul{list-style-type:none;}
    body{color:#333;background:#3c3a3b;font:12px/1.5 \5b8b\4f53;}
    #msgBox{width:500px;background:#fff;border-radius:5px;margin:10px
auto;padding-top:10px;}
    #msgBox form h2{font-weight:400;font:400 18px/1.5
\5fae\8f6f\96c5\9ed1;}
    #msgBox form{background:url(img/boxBG.jpg) repeat-x 0
bottom;padding:0 20px 15px;}
    #userName,#conBox{color:#777;border:1px solid
#d0d0d0;border-radius:6px;background:#fff url(img/inputBG.png)
repeat-x;padding:3px 5px;font:14px/1.5 arial;}
    #userName.active,#conBox.active{border:1px solid #7abb2c;}
    #userName{height:20px;}
    #conBox{width:448px;resize:none;height:65px;overflow:auto;}
    #msgBox form div{position:relative;color:#999;margin-top:10px;}
    #msgBox img{border-radius:3px;}
    #face{position:absolute;top:0;left:172px;}
    #face
img{float:left;display:inline;width:30px;height:30px;cursor:pointer;margin-right:6px;opacity:0.5;filter:alpha(opacity=50);}
    #face img.hover,#face
img.current{width:28px;height:28px;border:1px solid
#f60;opacity:1;filter:alpha(opacity=100);}
   
#sendBtn{border:0;width:112px;height:30px;cursor:pointer;margin-left:10px;background:url(img/btn.png)
no-repeat;}
    #sendBtn.hover{background-position:0 -30px;}
    #msgBox form .maxNum{font:26px/30px Georgia, Tahoma,
Arial;padding:0 5px;}
    #msgBox .list{padding:10px;}
    #msgBox .list
h3{position:relative;height:33px;font-size:14px;font-weight:400;background:#e3eaec;border:1px
solid #dee4e7;}
    #msgBox .list h3
span{position:absolute;left:6px;top:6px;background:#fff;line-height:28px;display:inline-block;padding:0
15px;}
    #msgBox .list ul{overflow:hidden;zoom:1;}
    #msgBox .list ul
li{float:left;clear:both;width:100%;border-bottom:1px dashed
#d8d8d8;padding:10px 0;background:#fff;overflow:hidden;}
    #msgBox .list ul li.hover{background:#f5f5f5;}
    #msgBox .list
.userPic{float:left;width:50px;height:50px;display:inline;margin-left:10px;border:1px
solid #ccc;border-radius:3px;}
    #msgBox .list
.content{float:left;width:400px;font-size:14px;margin-left:10px;font-family:arial;word-wrap:break-word;}
    #msgBox .list .userName{display:inline;padding-right:5px;}
    #msgBox .list .userName a{color:#2b4a78;}
    #msgBox .list .msgInfo{display:inline;word-wrap:break-word;}
    #msgBox .list .times{color:#889db6;font:12px/18px
arial;margin-top:5px;overflow:hidden;zoom:1;}
    #msgBox .list .times span{float:left;}
    #msgBox .list .times a{float:right;color:#889db6;}
    .tr{overflow:hidden;zoom:1;}
    .tr p{float:right;line-height:30px;}
    .tr *{float:left;}
    .hidden {display:none;}

JS代码如下:

复制代码 代码如下:

/**
 * 仿腾讯发表博客园的意义
 * 1.脚下从未有过发ajax请求 后台从未记录 所以刷新页面 会清掉
 * 2. 时光是用的是客户端时间 倘若客户端时间不当的话
那么时间也会受影响。
 * 如今就那样相互 具体的思绪不太复杂 如若项目中用到那样的
能够根据具体的要求变动
 * @constructor Microblog
 * @date 2013-12-23
 * @author tugenhua
 * @email 879083421@qq.com
 */

 function Microblog(options) {

    this.config = {
        maxNum                        :   140,               //
最大的字符数
美高梅开户网址,        targetElem                    :   ‘.f-text’,         // 输入框
恐怕文本域的class名
        maxNumElem                    :   ‘.maxNum’,         //
还可以输入多少字容器
        sendBtn                       :   ‘#sendBtn’,        //
广播按钮
        face                          :   ‘#face’,           //
表情容器
        activeCls                     :   ‘active’,          //
鼠标点击输入框add类
        currentCls                    :   ‘current’,         //
鼠标点击face头像时 扩展的类名
        inputID                       :   ‘#userName’,       //
输入框ID
        textareaId                    :   ‘#conBox’,         //
文本域ID
        list                          :   ‘#list-msg’,       //
大家在说的容器
        callback                      :   null               //
动态播放完后的回调函数
    };

    this.cache = {};
    this.init(options);
 }

 Microblog.prototype = {

    constructor: Microblog,

    init: function(options) {
        this.config = $.extend(this.config,options || {});
        var self = this,
            _config = self.config,
            _cache = self.cache;

        // 点击输入框input 文本域 textarea 边框的浮动
        $(_config.targetElem).each(function(index,item){

            $(item).unbind(‘focus’);
            $(item).bind(‘focus’,function(e){
                !$(this).hasClass(_config.activeCls) &&
$(this).addClass(_config.activeCls);
            });
            $(item).unbind(‘blur’);
            $(item).bind(‘blur’,function(e){
                $(this).hasClass(_config.activeCls) &&
$(this).removeClass(_config.activeCls);
            });
        });

        // 点击face头像 add(增加)类名
        var faceImg = $(‘img’,$(_config.face));
        $(faceImg).each(function(index,item){
            $(item).unbind(‘click’);
            $(item).bind(‘click’,function(e){
               
$(this).addClass(_config.currentCls).siblings().removeClass(_config.currentCls);
            });
        });

        // 广播按钮hover事件
        $(_config.sendBtn).hover(function(){
            !$(this).hasClass(‘hover’) && $(this).addClass(‘hover’);
        },function(){
            $(this).hasClass(‘hover’) && $(this).removeClass(‘hover’);
        })

        // 绑定事件
        self._bindEnv();
    },
    /*
     * 总括字符的尺寸 包含汉语 数字 英文等等
     * @param str
     * @return 字符串的长度
     */
     _countCharacters: function(str) {
         var totalCount = 0;
          for (var i=0; i<str.length; i++) {
             var c = str.charCodeAt(i);
             if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c &&
c<=0xff9f)) {
                totalCount++;
             }else {  
                totalCount+=2;
             }
         }
         return totalCount;
     },
     /*
      * 全数的绑定事件
      */
     _bindEnv: function() {
        var self = this,
            _config = self.config,
            _cache = self.cache;

        // 文本域keyup事件
        self._keyUp();

        // 点击播放按钮事件
        self._clickBtn();
     },
     /*
      * 文本域keyup事件
      */
     _keyUp: function() {
         var self = this,
             _config = self.config,
             _cache = self.cache;
         $(_config.textareaId).unbind(‘keyup’);
         $(_config.textareaId).bind(‘keyup’,function(){
             var len = self._countCharacters($(this).val()),
                 html;
             if(_config.maxNum * 1 >= len * 1) {
                html = _config.maxNum * 1 – len * 1;
             }else {
                html = _config.maxNum * 1 – len * 1;
             }
             $(_config.maxNumElem).html(html);
             $(_config.maxNumElem).attr(‘data-html’,html);
         });
     },
     /*
      * 点击播放按钮事件
      */
     _clickBtn: function() {

        var self = this,
            _config = self.config,
            _cache = self.cache;
        var reg = /^\s*$/g;
        $(_config.sendBtn).unbind(‘click’);
        $(_config.sendBtn).bind(‘click’,function(){

            var inputVal = $(_config.inputID).val(),
                textVal = $(_config.textareaId).val(),
                maxNum = $(_config.maxNumElem).attr(‘data-html’);
            if(reg.test(inputVal)) {
                alert(‘请输入你的姓名’);
                return;
            }else if(reg.test(textVal)) {
                alert(“随便说点什么吗!”);
                return;
            }
            if(maxNum * 1 < 0) {
                alert(‘字符超越限定 请缩减字’);
                return;
            }
            // 本来是要发ajax请求的 但是那边没有后台处理
所以近年来只是客户端渲染页面
            self._renderHTML(inputVal,textVal);
        });
     },
     /*
      * 把html结构渲染出来
      */
     _renderHTML: function(inputVal,textVal) {
         var self = this,
             _config = self.config,
             _cache = self.cache;
        var oLi = document.createElement(“li”),
            oDate = new Date();
        oLi.innerHTML = ‘<div class=”userPic”>’ +
                           ‘<img src=”‘+self._getSrc()+'” />’+
                        ‘</div>’ +
                        ‘<div class=”content”>’ +
                            ‘<div class=”userName”><a
href=”javascript:;”>’+inputVal+'</a>:</div>’ +
                            ‘<div
class=”msgInfo”>’+textVal+'</div>’ +
                            ‘<div class=”times”>’+
                               
‘<span>’+self._format(oDate.getMonth() + 1) + “\u6708” +
self._format(oDate.getDate()) + “\u65e5 ” +
self._format(oDate.getHours()) + “:” +
self._format(oDate.getMinutes())+'</span>’+
                                ‘<a class=”del hidden”
href=”javascript:;”>删除</a>’+
                            ‘</div>’ +
                        ‘</div>’;
        // 插入成分
        if($(_config.list + ” li”).length > 0) {

            $(oLi).insertBefore($(_config.list + ” li”)[0]);
            self._animate(oLi);
        }else {

            $(_config.list).append(oLi);
            self._animate(oLi);

        }
        _config.callback && $.isFunction(_config.callback) &&
_config.callback();

        // 清空输入框 文本域的值
        self._clearVal();

        // hover事件
        self._hover();
     },
     /*
      * 格式化时间, 就算为1位数时补0
      */
    _format: function(str){
        return str.toString().replace(/^(\d)$/,”0$1″);
    },
    /*
     * 获取ing src
     * @return src
     */
    _getSrc: function() {
        var self = this,
            _config = self.config,
            _cache = self.cache;
        var faceImg = $(‘img’,$(_config.face));

        for(var i = 0; i < faceImg.length; i++) {
            if($(faceImg[i]).hasClass(_config.currentCls)) {
                return $(faceImg[i]).attr(‘src’);
                break;
            }
        }
    },
    /*
     * 清空值
     */
    _clearVal: function() {
        var self = this,
            _config = self.config,
            _cache = self.cache;

        $(_config.inputID) && $(_config.inputID).val(”);
        $(_config.textareaId) && $(_config.textareaId).val(”);

    },
    /*
     * hover事件
     */
    _hover: function() {
        var self = this,
            _config = self.config,
            _cache = self.cache;
        $(_config.list + ‘ li’).hover(function(){
            !$(this).hasClass(‘hover’) &&
$(this).addClass(‘hover’).siblings().removeClass(‘hover’);
            $(‘.del’,$(this)).hasClass(‘hidden’) &&
$(‘.del’,$(this)).removeClass(‘hidden’);
            var $that = $(this);

            // 删除事件
            $(‘.del’,$that).unbind(‘click’);
            $(‘.del’,$that).bind(‘click’,function(){

                $($that).animate({
                    ‘opacity’ : 0
                },500,function(){
                    $that.remove();   
                });
            });
        },function(){
            $(this).hasClass(‘hover’) && $(this).removeClass(‘hover’);
            !$(‘.del’,$(this)).hasClass(‘hidden’) &&
$(‘.del’,$(this)).addClass(‘hidden’);
        });

    },
    /*
     * height
     */
     _animate: function(oLi) {
        var self = this;
        var iHeight = $(oLi).height(),
            alpah = 0,
            timer,
            count = 0;
        $(oLi).css({“opacity” : “0”, “height” : “0”});

        timer && clearInterval(timer);
        timer = setInterval(function (){
            $(oLi).css({“display” : “block”, “opacity” : “0”, “height” :
(count += 8) + “px”});
            if (count > iHeight){
                    clearInterval(timer);
                    $(oLi).css({ “height” : iHeight + “px”});
                    timer = setInterval(function (){
                        $(oLi).css({“opacity” : alpah += 10});

                        alpah > 100 && (clearInterval(timer),
$(oLi).css({“opacity”:100}));

                    },30);
                }
            },30);
     }
 };

 // 早先化代码
 $(function(){
    new Microblog({});
 });

源码下载:

您恐怕感兴趣的小说:

  • js获取url参数值的三种方法
  • JS
    UEscortL传汉语参数引发的乱码难点
  • JS获取USportageL中参数值(QueryString)的4种办法分享
  • javascript/jquery获取地址栏url参数的法子
  • js U宝马7系L参数的拼接方法相比较
  • 在JavaScript中拿走请求的U普拉多L参数
  • js修改地址栏U大切诺基L参数消除url参数难点
  • JavaScript
    Base64编码和平解决码,实现UOdysseyL参数字传送递。
  • JavaScript
    ULacrosseL参数读取革新版
  • javascript
    获取url参数的正则表达式(用来获得有些参数值)
  • js获取url中的参数且参数为普通话时经过js解码
  • js完结将当选内容分享到和讯或新浪易
  • JS完成仿腾讯和讯无刷新删除博客园效率代码
  • javascript贯彻的仿腾讯QQ窗口抖动作效果果代码
  • js获取腾讯录像ID的法门

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图