您的位置:首页 > 其它

有的事情是无可奈何的,有的事情是能够改变的……

2016-02-04 09:59 405 查看
占位页面。*^_^*

然后接下来的路~~~

不习惯文章里面没有技术方面的内容又添加了个前几天写的demo,希望你喜欢

/* Hi~ 希望你会喜欢,希望2016会更加多彩。这是别人的创意,无耻的改造*^_^*
这是我写的一个jQuery插件,目前还没想到能够起什么作用
而且创意也是从别人那里拿过来的...
发现,我只会抄,索性只是抄创意,代码都会尝试自己实现...
那么先看一下效果
3...
2...
1...
0...
开始...
*/
#demo *{transition:1s;
font-size:12px;
font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;}
#demo {
padding:10px;background-color:#fff; transition:1s; width: 80%; height: 500px;
border: solid 1px #ddd; margin: 50px 0 0 50px;
overflow-y:auto;
}
/*
.......是的
她的作用就是处理css文本,抽离样式和注释,最后动态输出,包含了几种通知回调
......那么先让这些文字更好看吧
.
.
注释着色处理
*/

.dynamicStyle-notes{
color:#008200;
}

/*
行跟行之间似乎不太明显,那么再加点东西吧
here we go......
*/

.dynamicStyle-line{
line-height: 24px;
}
.dynamicStyle-line:nth-of-type(2n){
background-color:#f4f4f4;
}
/*
然后是选择器名称,给上颜色和粗体
*/
.dynamicStyle-class-name{
color:#BD8C1F;
font-weight:bold;
}
/*
样式的关键字,以及值(普通文字)
*/
.dynamicStyle-class-key{
color:#187496;
font-weight:bold;
}

.dynamicStyle-class-value{
color:#464646;
}
/*
.............
接下来调整一下间距
*/
.dynamicStyle-class-key,
.dynamicStyle-class-name+.dynamicStyle-class-value{
display:inline-block;
text-indent:10px;
}
.dynamicStyle-class-key{
text-indent:30px;
}

/*
好了,css 部分的文字样式大概调整完毕
... 似乎可以作一个简单的代码着色工具,但是这种粗糙的轮子并没有什么卵用
完结撒花...跳个舞庆祝一下
*/
#demo{
-webkit-animation-name: shake-slow;
animation-name: shake-slow;
-webkit-animation-duration: 5s;
animation-duration: 5s;
}
/*
.撒花~ *★,°*:.☆\( ̄▽ ̄)/$:*.°★*
. *★,°*:.☆\( ̄▽ ̄)/$:*.°★* 撒花~
.撒花~ *★,°*:.☆\( ̄▽ ̄)/$:*.°★*
.
能看到这里也是难为您了,耽误了不少宝贵的时间
主要是这个东西花了不少时间,不想就这么丢弃
虽然并没有什么用
但是...
1.提高了自己的正则水平
2.打发了无聊的时间
3.娱乐了您,也娱乐了自己
-------------by: 上酱
.
.
.
下面可以下载该demo http://files.cnblogs.com/files/lianmin/DynamicStyle.rar 本篇水了一把,很不好意思
*/

请点我,可以看点东西

// var demoNode=document.getElementById("demo");
var styleNode=$("").appendTo($("body"));
$("#btnDemo").click(function(){
document.body.scrollTop=$(this).offset().top;
$(this).hide();
$("#demo").dynamicStyle({
delay:50,
content:$("#styleBox").val(),
notify:function(item){
if(item.type==2){
styleNode.append(item.content);
}
},
contentNotify:function(){
demoNode.scrollTop=demoNode.scrollHeight;
},
complete:function(){
$("#demo").append("这里是结束的回调,表示所有效果已经结束,不用再等了

");
demoNode.scrollTop=demoNode.scrollHeight;
}
});
});
// ]]>

.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: