Debian mourns the passing of Ian Murdock

2015/12/31
Linux
暂无评论

https://bits.debian.org/2015/12/mourning-ian-murdock.html

CSS常用代码

2015/12/20
front-end
暂无评论

入研究-webkit-overflow-scrolling:touch及ios滚动
https://www.cnblogs.com/xiahj/p/8036419.html
https://aotu.io/notes/2020/06/08/momentum-scrolling/

黑暗模式

苹果公司在谈到黑暗模式时说它时一种有助于你专注工作的吸引人的新外观
同事也是一种全方位的对眼睛友好的无干扰环境

谷歌则从使用角度回答，生成黑暗模式可以显著降低用电量
提高低视力用户和对强光敏感用户的能见度，并且可以让任何人在低光环境下轻松的使用设备

https://segmentfault.com/a/1190000020899202
灵活运用CSS开发技巧(66个实用技巧，值得收藏)

响应式（RWD） = 所有设备的代码是一样的
自适应（AWD）= 不同设备的代码是不一样的

iPhone适配

https://aotu.io/notes/2017/11/27/iphonex/index.html
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

吸底镂空填充颜色

div {
height: calc(60px(假设值) + constant(safe-area-inset-bottom));
height: calc(60px(假设值) + env(safe-area-inset-bottom));
background: #fff;
}

文字超出换行的一种处理

padding: 6px;
background: bisque;
text-align: left;
margin-bottom: 2px;

CSS3 Shapes和CSS3 Regions

解决子div撑不开父div

table中的td设置固定宽度，没有效果
 twitter 网站是怎么根据 windows10 的“颜色”来改变网页背景颜色？
prefers-color-scheme
以上测试 windows : 个性化->颜色->选择默认应用模式

多图实现动画

    <html>
    <head>
    <title>每隔一定时间更换图片</title>
    <script language="javascript">
    <!--
        Img = new Array("loading_1@2x.png","loading_2@2x.png","loading_3@2x.png","loading_4@2x.png","loading_5@2x.png","loading_6@2x.png","loading_7@2x.png","loading_8@2x.png","loading_9@2x.png","loading_10@2x.png");
        size = Img.length;
        i = 0;
        function chImg(){
            picID.src = Img[i];
            i++;
            if (i>=size) i = 0;
            setTimeout("chImg()",500);
        }
    //-->
// for(var i = 0 ; i < 5 ; i++){
// var j = 0;
// var arr= [1,2,5,7,8];
// setTimeout(function(){
//   console.log(arr[j ++]);
// },i*3000)}

    </SCRIPT>
    </head>
    <body onLoad="chImg()">
    <a href=""><img id="picID" border="0"></a>
    </body>
    </html>

方法二以上

彩条水平流动的效果

给文字设置彩色水平流动效果

.index {
    color: red;//一定要设置文字颜色，任意纯色即可
    /*background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);*/ //不要删此行，注释即可，但对文字起作用
    animation: hue 6s linear infinite;
}
    @keyframes hue {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(360deg); }
}

那些事儿

2015/12/17
default
暂无评论

才发现这是第99篇，其实不止99篇的了
12月里有点事就不经常更新了！
今天被说：人是有惰性的！你不赖床就不错的了
这个站点的存在很大程度上是我的“惰性”导致的！
网上出现的东西不断出现————也同时在不断地消失！
今天发现之前在这里的外链有些失效了！
国nei网络环境有什么不好？
就是太好了！真是太好了！
好到慢慢的就不是“我”的站点了！
看到一些站长把自己的分享内容推倒重新来！
还有V2社区从“被关键字”到回国华丽“备案”！
但愿有些快照能保存久一点！
前段时间看到陈guanxi的一些视频
里面有段话说的很好，大概意思是：

在“亚洲”，人们有个点子，会收收埋埋！
在美国，展开双臂--意思是开放，分享！

几乎不看娱乐新闻那就再“八卦一下吧”之前有篇是说他自己的--为什么我是那个坏人！

知道有人不知道我在说什么！早已习惯！
这个站不会“回guo”!永远不会！
即使它被D到只剩下域名，我都会在上面写着

Hello World！

为网站添加优衣库UNIQLOCK的音乐舞蹈时钟

2015/12/03
web
暂无评论

来自：为网站添加优衣库UNIQLOCK的音乐舞蹈时钟
对于网站的创意时钟来说，目前最好最有创意的莫过于优衣库UNIQLOCK的音乐舞蹈时钟。

优衣库（UNIOLO)是日本著名的休闲服装品牌，是排名全球服饰零售业前列的日本迅销集团旗下的核心品牌。其创意的营销受众，已经覆盖了全球超过两亿人。
这一款创意的优衣库UNIQLOCK的音乐舞蹈时钟，除了有清纯美丽的少女舞蹈外，还能带给人们在繁忙工作之余的些许放松，在视觉和听觉上都极其享受。使用这款创意时钟，不仅仅可以提供当做屏保，还可以作为博客的widget功能，丰富自己网站的内容，延长访客在网站停留的时间。据我不完全统计，几乎所有人都想把每个舞蹈姿势看完。

此外，此外UNIQLOCK的widget还有闹钟功能，你可以设定时间，到了指定时间将播放一段30秒的舞蹈及你所输入的文字。像这样的时钟widget以前接触过的还有ClockLink及Blog-Apartments，不过像UNIQLOCK这样有创意的还比较少有的。

登陆http://www.uniqlo.jp/uniqlock/ 在左侧有menu菜单，打开Blog Parts，LOCAL TIME里选择CHINA BEIJING，在SIZE里选择自己想要的尺寸，不过目前来说，只有两种尺寸可选，分别是：W：160 H：130和W：424 H：278。MUSIC的ON和OFF控制音乐的开关。

最后点击SET，就会在右侧出现可供使用的代码了。整个操作流程还是很简便的。无论是放在自己的博文里还是放在网站的侧栏，都能带来不错的效果。

看不了点我

网站侧边栏仓鼠flash动画

2015/12/03
web
暂无评论

来自：网站侧边栏仓鼠flash动画
网站侧边栏仓鼠flash动画仓鼠头部会跟随鼠标移动，鼠标点击会。。。不知道该怎么描述了大家自己体验吧
在哪里？点我

代码如下：

<object data="http://cdn.abowman.com/widgets/hamster/hamster.swf?" height="100%" style="outline:none;" type="application/x-shockwave-flash" width="100%"><param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?" /><param name="AllowScriptAccess" value="always" /><param name="wmode" value="opaque" /></object>

仓鼠头部会跟随鼠标移动，鼠标点击会。。。不知道该怎么描述了大家自己体验吧

用户不在当前标签页面改变title

2015/12/03
front-end
暂无评论

来自：用户不在当前标签页面改变title

实现代码

简单有效，将整个窗口绑定onblur和onfocus。
全选复制放进笔记

window.onblur = function() { document.title = "(●—●)";
}; window.onfocus = function() { document.title = "啦啦啦啦";
}

浏览器兼容性

目前主流的标准浏览器基本都已经支持，部门旧版浏览器需要增加内核前缀，IE从10开始支持。

常见应用场景

幻灯片播放时可在不可见时停止播放，恢复显示后继续播放
每隔一段时间向服务器请求数据的可在切换可见性时停止，减轻服务器负担
网站访问统计提供跟准确的数据
网站title根据可见性变换

例如在typecho主题里footer.php里添加

<script>
window.onblur = function() {
    document.title = "你在看什么呢？";
window.onfocus = function() {
    document.title = "<?php $this->archiveTitle(array(
            'category'  =>  _t('分类 %s 下的文章'),
            'search'    =>  _t('包含关键字 %s 的文章'),
            'tag'       =>  _t('标签 %s 下的文章'),
            'author'    =>  _t('%s 发布的文章')
        ), '', ' - '); ?><?php $this->options->title(); ?>";
    }
};
</script>

另一个版本在http://blog.iplayloli.com/看到的

<script>
        var changeTitle = {
    originTitle: document.title,
    change: function() {
        document.title = " 草榴社區 - t66y.com ";
    },
    reset: function() {
        document.title = changeTitle.originTitle;
    }
};
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        changeTitle.change();
    } else {
        changeTitle.reset();
    }
});
</script>

chrome下右键“查看网页源代码”，就会看到

<script>
window.onblur = function() {
    document.title = "你在看什么呢？";
window.onfocus = function() {
    document.title = "用户不在当前标签页面改变title - 52M";
    }
};
</script>

实际效果可以在不同窗口下切换就看到

h5ai

2015/12/01
web, PHP
4 条评论

[经验] h5ai的一些安装使用经验

更：0.28.1版本中文文件名乱码,已解决！但不算完美...

阅读全文

前端开发

2015/12/01
front-end
7 条评论

阅读全文

eclipse最有用快捷键整理

2015/11/23
tutorial
暂无评论

阅读全文

Eclipse IDE for Java - Full Dark Theme

2015/11/23
soft
暂无评论

http://stackoverflow.com/questions/5053834/eclipse-ide-for-java-full-dark-theme
如何为Eclipse安装主题(Color Theme)

Jquery实现侧边栏跟随滚动条固定

2015/11/19
front-end
暂无评论

来自 http://www.tabyouto.com/fixed-sidebar-with-jquery.html
现在很多主题都集成了用Jquery将侧边栏随滚动条固定在屏幕一侧的功能，提高体验度的同时放个小广告也是不错的选择，现在不用插件也可以实现，不用羡慕那些高大上的收费主题，她们有的我们也可以。

CDN引用安装JQuery：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <!--Google-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <!--Microsoft-->

侧边栏滚动结束时固定设定模块

这个代码可以自动获取侧边栏高度，当侧边栏滚动结束后，设定的模块激活并固定在屏幕中，IE6无效。
默认支持两个模块，如果需要增加模块要在第二行添加变量并参照第8行的代码为新变量添加启动的参数。

jQuery(document).ready(function (a) {
        var c = 1,d = 2; //这里设定的是第1和第2
        a.browser.msie && 6 == a.browser.version && !a.support.style || (
        e = a("#sidebar").width(), f = a("#sidebar .widget"), g = f.length, g >= (c > 0) && g >= (d > 0) && a(window).scroll(function () {
                        var b = document.documentElement.scrollTop + document.body.scrollTop;
                        b > f.eq(g - 1).offset().top + f.eq(g - 1).height() ? 0 == a(".roller").length ? (f.parent().append(''), f.eq(c - 1).clone().appendTo(".roller"), c !== d && f.eq(d - 1).clone().appendTo(".roller"), a(".roller").css({ position: "fixed", top: 50, zIndex: 0, width: 250 }), a(".roller").width(e)) : a(".roller").fadeIn(300) : a(".roller").fadeOut(300) })) });

滚动到指定模块时置顶该模块

这串代码适合侧边栏较长的用户，如有JavaScript加载的模块高度会判断出错，建议侧边栏没有JavaScript模块的用户使用。
当滚到 #suggested 时置顶该模块，可以按自己的需要修改。

jQuery(document).ready(function($) {
    $.fn.smartFloat = function() {
        var position = function(element) {
            var top = element.position().top,
            pos = element.css("position");
            $(window).scroll(function() {
                var scrolls = $(this).scrollTop();
                if (scrolls > top) {
                    if (window.XMLHttpRequest) {
                        element.css({
                            position: "fixed",
                            top: 0
                        });
                    } else {
                        element.css({
                            top: scrolls
                        });
                    }
                } else {
                    element.css({
                        position: "absolute",
                        top: top
                    });
                }
            });
        };
        return $(this).each(function() {
            position($(this));
        });
    };
    //绑定,将引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC"
    $("#suggested").smartFloat();
});

滚动到一定像素后固定显示

通过设定固定的高度，卷动到该高度时显示置顶的模块。默认给出的是卷动368像素后侧边栏 #sidebar 整体跟随滑动,适合侧边栏少的网站。

var documentHeight = 0;
var topPadding = 15;
$(function() {
    var offset = $("#sidebar").offset();
    documentHeight = $(document).height();
    $(window).scroll(function() {
        var sideBarHeight = $("#sidebar").height();
        if ($(window).scrollTop() > offset.top) {
            var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
            var maxPosition = documentHeight - (sideBarHeight + 368);
            if (newPosition > maxPosition) {
                newPosition = maxPosition;
            }
            $("#sidebar").stop().animate({
                marginTop: newPosition
            });
        } else {
            $("#sidebar").stop().animate({
                marginTop: 0
            });
        };
    });
});

wordpress个性化站点统计

2015/11/19
WordPress
暂无评论

来自 http://www.zzhck.com/491.html

效果如下：

实现这个功能需要修改主题的footer.php和css文件

在footer.php中，你想让出现的位置（左侧，中间，右侧）添加如下代码

<!--站点统计开始-->
<span class="btn-primary web-sta"><i class="icon-map-marker icon-white icon12"></i> 站内统计</span>      
<div class="statistics">
<h3>站内统计</h3>
<ul>
<li>建站日期：2014-07-31</li>
<li>运行天数：<?php echo floor((time()-strtotime("2014-07-31"))/86400); ?> 天</li>
<li>分类总数：<?php echo $count_categories = wp_count_terms('category'); ?> 个</li>
<li>日志总数：<?php $count_posts = wp_count_posts(); echo $published_posts = $count_posts->publish;?> 篇</li>
<li>标签数量：<?php echo $count_tags = wp_count_terms('post_tag'); ?> 个</li>
<li>评论总数：<?php echo $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments");?> 条</li>
<li>链接数量：<?php $link = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->links WHERE link_visible = 'Y'"); echo $link; ?> 个</li>
<li>最后更新：<?php $last = $wpdb->get_results("SELECT MAX(post_modified) AS MAX_m FROM $wpdb->posts WHERE (post_type = 'post' OR post_type = 'page') AND (post_status = 'publish' OR post_status = 'private')");$last = date('Y-n-j', strtotime($last[0]->MAX_m));echo $last; ?></li>
</ul>
</div>
<script type="text/javascript">
$(".footer-inner span.web-sta").hover(function(){
    $(".footer-inner .statistics").slideDown("slow");
},function(){
    $(".footer-inner .statistics").slideUp("slow");
});
</script>
<!--站点统计结束-->

然后修改主题的css文件，增加如下代码

/* 底部站点统计 */
span.web-sta{display:inline-block;height:22px;line-height:22px;padding:0 5px;margin:auto 0px auto 5px;cursor:pointer}
.footer .statistics{max-width:360px;border:1px solid #ddd;border-left:0;position:absolute;top:-156px;right:-1px;font-size:12px;background-color:#444;cursor:pointer;display:none}
.footer .statistics h3{border:0;border-bottom:1px dashed #ff8540;font-size:16px;height:25px;line-height:25px;padding:0px 20px 8px;text-align:left}
.footer .statistics ul{padding:5px 8px;position:relative}
.footer .statistics ul li{min-width:150px;display:inline-block;margin-left:10px;margin-bottom:5px}
.footer .statistics ul li:hover{background-color:#eee}

最后再次感谢王海达老师，他教会了我很多，自己动手,用心学习，前端代码没有秘密可言

WordPress去掉链接中的category

2015/11/19
WordPress
暂无评论

来自 http://www.zzhck.com/617.html
相信很多人用了wordpress后都会选择去掉链接中的category，以前比较完美的方法是使用WP No Category Base之类的插件，使用插件有个好处就是301重定向，本站也正在使用Remove Category URL插件！但是插件多了，确实会影响一部分运行速度，比较占用内存和CPU！最近在各种折腾，能用代码的，尽量不用插件！感谢前辈们的分享精神，找到一种效果和WP No Category Base插件一样的代码，再次做个记录，也分享给大家！

将以下代码加在主题目录的functions.php（记住半角和？>前面

add_action('load-themes.php', 'no_category_base_refresh_rules');
// WordPress免插件去除链接categroy
register_activation_hook(__FILE__, 'no_category_base_refresh_rules');
add_action('created_category', 'no_category_base_refresh_rules');
add_action('edited_category', 'no_category_base_refresh_rules');
add_action('delete_category', 'no_category_base_refresh_rules');
function no_category_base_refresh_rules() {
 global $wp_rewrite;
 $wp_rewrite -> flush_rules();
}
register_deactivation_hook(__FILE__, 'no_category_base_deactivate');
function no_category_base_deactivate() {
 remove_filter('category_rewrite_rules', 'no_category_base_rewrite_rules');
 // We don't want to insert our custom rules again
 no_category_base_refresh_rules();
}
// Remove category base
add_action('init', 'no_category_base_permastruct');
function no_category_base_permastruct() {
 global $wp_rewrite, $wp_version;
 if (version_compare($wp_version, '3.4', '<')) {
 // For pre-3.4 support
 $wp_rewrite -> extra_permastructs['category'][0] = '%category%';
 } else {
 $wp_rewrite -> extra_permastructs['category']['struct'] = '%category%';
 }
}
// Add our custom category rewrite rules
add_filter('category_rewrite_rules', 'no_category_base_rewrite_rules');
function no_category_base_rewrite_rules($category_rewrite) {
 //var_dump($category_rewrite); // For Debugging
 $category_rewrite = array();
 $categories = get_categories(array('hide_empty' => false));
 foreach ($categories as $category) {
 $category_nicename = $category -> slug;
 if ($category -> parent == $category -> cat_ID)// recursive recursion
 $category -> parent = 0;
 elseif ($category -> parent != 0)
 $category_nicename = get_category_parents($category -> parent, false, '/', true) . $category_nicename;
 $category_rewrite['(' . $category_nicename . ')/(?:feed/)?(feed|rdf|rss|rss2|atom)/?$'] = 'index.php?category_name=$matches[1]&feed=$matches[2]';
 $category_rewrite['(' . $category_nicename . ')/page/?([0-9]{1,})/?$'] = 'index.php?category_name=$matches[1]&paged=$matches[2]';
 $category_rewrite['(' . $category_nicename . ')/?$'] = 'index.php?category_name=$matches[1]';
 }
 // Redirect support from Old Category Base
 global $wp_rewrite;
 $old_category_base = get_option('category_base') ? get_option('category_base') : 'category';
 $old_category_base = trim($old_category_base, '/');
 $category_rewrite[$old_category_base . '/(.*)$'] = 'index.php?category_redirect=$matches[1]';
 
 //var_dump($category_rewrite); // For Debugging
 return $category_rewrite;
}
// Add 'category_redirect' query variable
add_filter('query_vars', 'no_category_base_query_vars');
function no_category_base_query_vars($public_query_vars) {
 $public_query_vars[] = 'category_redirect';
 return $public_query_vars;
}
// Redirect if 'category_redirect' is set
add_filter('request', 'no_category_base_request');
function no_category_base_request($query_vars) {
 //print_r($query_vars); // For Debugging
 if (isset($query_vars['category_redirect'])) {
 $catlink = trailingslashit(get_option('home')) . user_trailingslashit($query_vars['category_redirect'], 'category');
 status_header(301);
 header("Location: $catlink");
 exit();
 }
 return $query_vars;
}

注意事项

如果你已经在用WP No Category Base之类插件的话就别用以上方法了，那个插件用了一次的话就必须得一直用下去；
不然文章页会无法访问，当然你也可以想办法把这个插件彻底卸载了，再用上面的方法！
还有就是把WP No Category Base之类的插件关闭自然也是没用的….切记！！！

关闭No Category之类的插件更换代码的方法：

1.把【固定连接】改为【默认】状态,然后，关闭【WP NO category base】插件
2.再改回之前的URL形式就可以了。
3.最后你就可卸载掉该插件了。

d8主题流动公告代码分享

2015/11/19
WordPress
暂无评论

流动公告主要用到的是marquee元素实现的，详细的介绍大家自己百度
下面分享一下我现在用的流动公告代码，效果顶部自己预览

<marquee width="1000px" height="16px" direction="left" scrollamount="3" scrolldelay="5" onmouseover="this.stop()" onmouseout="this.start()">
<span style="color: #0000ff;">贰月叁拾</span>——<span style="color: #ff0000;">欢迎您的到来，期待您能够有所收获！有问题请<a title="留言板" href="http://www.zzhck.com/liuyan">点击这里</a>，给我留言吧！</span></marquee>

复制修改后，直接粘贴到d8主题设置的最新消息里，保存！好了，一切搞定，同样这串代码也可以用在其他地方了，希望大家活学活用！
来自 http://www.zzhck.com/338.html

d8主题图片轮播效果二

2015/11/19
WordPress
暂无评论

来自 http://www.zzhck.com/796.html

代码是年前林子分享给我的，非常感谢他！
然后我...

新版轮播代码特点：

1.支持自适应大小
2.可以鼠标选择想看那一张
3.当然你也可以加上超级链接
4.更加简洁易用

详细代码如下，大家可以添加到d8主题设置的导航下方广告位

<style type="text/css">
body{min-width:320px;background-color:#f6f7f7;}
a,img{border:0;}
.index_banner{position:relative;height: auto}
.index_banner ul{overflow:hidden;}
.index_banner li{position:absolute;top:0;left:0;overflow:hidden;width:100%;height:350px;}
.index_banner li a{display:block;margin:0 auto;}
.index_banner cite{position:absolute;bottom:10px;left:50%;z-index:999;display:block;margin-left:-144px;width:288px;height:15px;_display:none;}
.index_banner cite span{float:left;display:block;margin:0 4px;width:40px;height:8px;background-color:#e5e5e5;text-indent:-999em;opacity:.8;cursor:pointer;}
.index_banner cite span:hover{background-color:#f5f5f5;}
.index_banner cite span.cur{background-color:#1d8bd8;cursor:default;}
.clear{clear:both;}
</style>
 
<!-- div -->
<div class="index_banner" id="banner_tabs">
    <ul>
        <li><img src="http://www.zzhck.com/static/img/1.jpg" alt="贰月叁拾" width="100%"></li>
        <li><img src="http://www.zzhck.com/static/img/2.jpg" alt="贰月叁拾" width="100%"></li>      
        <li><img src="http://www.zzhck.com/static/img/3.jpg" alt="贰月叁拾" width="100%"></li>    
        <li><img src="http://www.zzhck.com/static/img/4.jpg" alt="贰月叁拾" width="100%"></li>
        <li><img src="http://www.zzhck.com/static/img/5.jpg" alt="贰月叁拾" width="100%"></li>        
    </ul>
    <!--此处的img是用来占位的，在实际使用中，可以另外制作一张全空的图片-->
    <img style="visibility:hidden;" src="http://www.zzhck.com/static/img/0.png" alt="贰月叁拾" width="100%">
    <cite>
        <span class="cur">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>        
    </cite>
    <div class="clear"></div>
</div>
<!-- 下JS -->
<script type="text/javascript">
(function(){
    if(!Function.prototype.bind){
        Function.prototype.bind = function(obj){
            var owner = this,args = Array.prototype.slice.call(arguments),callobj = Array.prototype.shift.call(args);
            return function(e){e=e||top.window.event||window.event;owner.apply(callobj,args.concat([e]));};
        };
    }
})();
var banner_tabs = function(id){
    this.ctn = document.getElementById(id);
    this.adLis = null;
    this.btns = null;
    this.animStep = 0.2;//动画速度0.1～0.9
    this.switchSpeed = 3;//自动播放间隔(s)
    this.defOpacity = 1;
    this.tmpOpacity = 1;
    this.crtIndex = 0;
    this.crtLi = null;
    this.adLength = 0;
    this.timerAnim = null;
    this.timerSwitch = null;
    this.init();
};
banner_tabs.prototype = {
    fnAnim:function(toIndex){
        if(this.timerAnim){window.clearTimeout(this.timerAnim);}
        if(this.tmpOpacity <= 0){
            this.crtLi.style.opacity = this.tmpOpacity = this.defOpacity;
            this.crtLi.style.filter = 'Alpha(Opacity=' + this.defOpacity*100 + ')';
            this.crtLi.style.zIndex = 0;
            this.crtIndex = toIndex;
            return;
        }
        this.crtLi.style.opacity = this.tmpOpacity = this.tmpOpacity - this.animStep;
        this.crtLi.style.filter = 'Alpha(Opacity=' + this.tmpOpacity*100 + ')';
        this.timerAnim = window.setTimeout(this.fnAnim.bind(this,toIndex),50);
    },
    fnNextIndex:function(){
        return (this.crtIndex >= this.adLength-1)?0:this.crtIndex+1;
    },
    fnSwitch:function(toIndex){
        if(this.crtIndex==toIndex){return;}
        this.crtLi = this.adLis[this.crtIndex];
        for(var i=0;i<this.adLength;i++){
            this.adLis[i].style.zIndex = 0;
        }
        this.crtLi.style.zIndex = 2;
        this.adLis[toIndex].style.zIndex = 1;
        for(var i=0;i<this.adLength;i++){
            this.btns[i].className = '';
        }
        this.btns[toIndex].className = 'cur'
        this.fnAnim(toIndex);
    },
    fnAutoPlay:function(){
        this.fnSwitch(this.fnNextIndex());
    },
    fnPlay:function(){
        this.timerSwitch = window.setInterval(this.fnAutoPlay.bind(this),this.switchSpeed*1000);
    },
    fnStopPlay:function(){
        window.clearTimeout(this.timerSwitch);
    },
    init:function(){
        this.adLis = this.ctn.getElementsByTagName('li');
        this.btns = this.ctn.getElementsByTagName('cite')[0].getElementsByTagName('span');
        this.adLength = this.adLis.length;
        for(var i=0,l=this.btns.length;i<l;i++){
            with({i:i}){
                this.btns[i].index = i;
                this.btns[i].onclick = this.fnSwitch.bind(this,i);
                this.btns[i].onclick = this.fnSwitch.bind(this,i);
            }
        }
        this.adLis[this.crtIndex].style.zIndex = 2;
        this.fnPlay();
        this.ctn.onmouseover = this.fnStopPlay.bind(this);
        this.ctn.onmouseout = this.fnPlay.bind(this);
    }
};
var player1 = new banner_tabs('banner_tabs');
</script>