javascript 小知识(技巧、方法) ---面包屑导航 文字上下滚动

一、面包屑导航
说起这个面包屑导航，首先给大家展示一下我们今天要创作的这个面包屑导航长什么样

作为一个前端er，你想如何实现这个效果呢？
当然，用图片的方式表示导航是最容易实现的，默认没选中的导航就是淡色(#f0f0f0)导航，在每次有一个导航被选中时，我们换一个相对特别的颜色(#FE993F)导航来表示它被选中，假设真的用图片，我们可能会用多少张图片呢？中间的导航我们可能可以使用同一个图片，第一个和第二个的图片不一样，用filter或者inverse，可能使得选中和非选中的导航图片使用同一个，你当然知道，根据雅虎军规十四条法则，为了提高网页性能，在我们的网页中，最好少点使用图片，那么问题来了，用html+css能否实现这个效果呢？看下面的代码
首先是css

*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "微软雅黑";}
/* demo */
.demo{width:600px;margin:100px auto;background:#f0f0f0;position:relative;}
/*修改上面的background我们可以修改默认的未选中导航的颜色*/
.demo ul{height:32px;overflow:hidden;}
.demo li{float:left;width:200px;text-align:center;position:relative;z-index:2;font-weight:bold;font-size:14px;line-height:32px;}
/*如果你改变了导航的宽度和高度，你可能会需要修改下面两行right top border-width等的值*/
.demo li em{position:absolute;right:-24px;top:-8px;width:0;height:0;line-height:0;border-width:24px 0 24px 24px;border-color:transparent  transparent transparent #fff;border-style:dashed dashed dashed solid;}
.demo li i{position:absolute;right:-16px;top:0;width:0;height:0;line-height:0;border-width:16px 0 16px 16px;border-color:transparent  transparent transparent #f0f0f0;border-style:dashed dashed dashed solid;}
/*下面两行是修改选中导航的颜色，记得两个都是要修改的*/
.demo li.current{background:#FE993F;color:#fff;z-index:1;}
.demo li.current i{border-color:transparent transparent transparent #FE993F;}

接着是html布局

<div class="demo">
    <ul class="clearfix">
        <li>导航1<em></em><i></i></li>
        <li class="current">导航2<em></em><i></i></li>
        <li>导航3<em></em><i></i></li>
    </ul>
</div>

然后你就会看到我在文章初贴的那张图了

二、文字上下滚动
同样还是先看下效果图

html部分

<div class="may1st-part1-right-name-box">
            <table class="may1st-part1-right-name-table" style="margin-top:-10px;">
                <tr>
                    <td class="may1st-part1-column1">138****2555</td>
                    <td class="may1st-part1-column2">14:32</td>
                    <td class="may1st-part1-column3">test test test</td>
                </tr>
                <tr>
                    <td class="may1st-part1-column1">138****2555</td>
                    <td class="may1st-part1-column2">14:32</td>
                    <td class="may1st-part1-column3">test test test</td>
                </tr>

            </table>
        </div>

要说明的是，如果使用本文章中的代码，需要你使用这个html的结构，table tr td的结构。
css 部分主要是控制样式，你可以有自己的样式

.may1st-part1-right-name-box{
                height: 360px;
                width: 325px;
                margin: 0 auto;
                background: #fff;
                box-shadow: 0 15px 15px #ccc inset ;
                border-left: 1px solid #7F3808;
                border-right: 1px solid #7F3808;
                border-bottom: 1px solid #7F3808;
                overflow: hidden;
            }

            .may1st-part1-right-name-table{
                text-align: left;
                vertical-align: middle;
                font-size: 14px;
                color: #333;
                width: 98%;
                margin: 0 auto;
            }
            .may1st-part1-right-name-table td{
                height: 32px;
            }
            .may1st-part1-column1{
                width: 30%;
            }

            .may1st-part1-column2{
                width: 22%;
            }

            .may1st-part1-column3{
                width: 48%;
            }

最总要的当时是js部分了

(function ($) {

                $.fn.myScroll = function (options) {
                    //默认配置
                    var defaults = {
                        speed: 40,  //滚动速度,值越大速度越慢
                        rowHeight: 41 //每行的高度
                    };

                    var opts = $.extend({}, defaults, options), intId = [];

                    function marquee(obj, step) {

                        obj.find("table").animate({
                            marginTop: '-=1'
                        }, 0, function () {
                            var s = Math.abs(parseInt($(this).css("margin-top")));
                            if (s >= step) {
                                $(this).find("tr").slice(0, 1).appendTo($(this));
                                $(this).css("margin-top", 0);
                            }
                        });
                    }

                    this.each(function (i) {
                        var sh = opts["rowHeight"], speed = opts["speed"], _this = $(this);
                        intId[i] = setInterval(function () {
                            if (_this.find("table").height() <= _this.height()) {
                                clearInterval(intId[i]);
                            } else {
                                marquee(_this, sh);
                            }
                        }, speed);

                        _this.hover(function () {
                            clearInterval(intId[i]);
                        }, function () {
                            intId[i] = setInterval(function () {
                                if (_this.find("table").height() <= _this.height()) {
                                    clearInterval(intId[i]);
                                } else {
                                    marquee(_this, sh);
                                }
                            }, speed);
                        });
                    });

                }

            })(jQuery);

            $(document).ready(function(){
                $(".may1st-part1-right-name-box").myScroll({
                    speed: 40,
                    rowHeight: 33
                });
            });