js無間隙向上滾動

時間 2019-12-10

原文原文鏈接

1、優勢：div能夠load；缺點：滾動的時候有點娘，磨磨唧唧，不夠乾脆爽快javascript

htmlcss

<div id="my_msg" class="my-msg bg-white clearfix none" style="display: block;">

    <div class="icon"><i class="envelope"></i><p>個人消息</p><i class="red-dot"></i></div>
    <div class="msg" id="myMsgContent">
        <ul>
        <li>
                        <a href="javascript:setRead(0,'http://person.tgxrc.com:88/apply/list')">
【投遞反饋】您投遞的「.net軟件開發工程師55」等6個職位企業已查看簡歷。
                        </a>
                    </li><li>
                        <a href="javascript:setRead(5,'http://person.tgxrc.com:88/message/list')">
【人事來信】中國廣西人才市場/廣西人才網給你發送了一封人事來信，點擊查看
                        </a>
                    </li><li>
                        <a href="javascript:setRead(6,'http://person.tgxrc.com:88/resume/list')">
                            您的競爭力較低，完善簡歷能夠提高競爭力，趕快去完善簡歷吧！
                        </a>
                    </li></ul>
    </div>
</div>

csshtml

.my-msg{height:46px;color:#999;padding:10px;}
.my-msg .icon{float:left;width:50px;border-right:1px solid #dcdcdc;text-align:left;margin-right:10px;position:relative;}
.my-msg a,.my-msg i{display:block;}
.my-msg i.envelope{float:left;width:40px;height:28px;background:#fff url(/Content/Images/2018/message.png) no-repeat;background-size:100%;}
.my-msg .icon p{float:left;font-size:12px;color:#666;transform: scale(0.8);margin-left:-4px;}
.my-msg i.red-dot{width:10px;height:10px;background:#f33;border-radius:100%; position:absolute;top:-2px;right:8px;}
.my-msg .msg{height:46px;overflow: hidden;}
.my-msg .msg li a{display:block;height:40px;line-height:20px;margin:5px; font-size:14px;color:#666;overflow:hidden;}

jsjava

//數據向上滾動
function scrollNews(obj) {
    var $self = obj.find('ul:first');
    var lineHeight = $self.find('li:first').height();
    $self.animate({
        'marginTop': -lineHeight + 'px'
    }, 500, function () {
        $self.css({ marginTop: 0 }).find('li:first').appendTo($self);
    });
}
function afterScrollNews(obj) {
    var timeout = 3000;
    var scrollTimer = setInterval(function () {
        scrollNews(obj);
    }, timeout);
    obj.hover(function () {
        clearInterval(scrollTimer);
    }, function () {
        scrollTimer = setInterval(function () {
            scrollNews(obj);
        }, timeout);
    });
}

var $obj = $('#myMsgContent');
afterScrollNews($obj);算法

2、不是很好用，代碼繁瑣，缺點：div內容是load的話，無效；優勢：滾動的時候比較乾脆爽快app

htmlide

<div class="contentWidth" id="RecruitmentArea">
                    <div id="ImportantRecruitment" class="RecruitmentInfo">

                        <div class="RecruitmentIcon">
                            <nav>

                                <a href="/HomePosition/resultCity?schType=1&amp;IsEmer=true&amp;pageSize=10&amp;page=1" class="menuJp" title="急聘">
                                    <i class="icon-clock"></i>
                                    <p>急聘</p>
                                </a>
                            </nav>
                        </div>
                        <div class="RecruitmentDe" id="ImportantRecruitmentPosition">
                            <ul class="Triangle" style="margin-top: -325px;">
  
                            <li>
                                            <a href="/home/jobDetail?pid=3142012">
                                                <p class="PositionName">蔚來顧問（Fellow)--高薪</p>
                                                <p class="Enterprise">上海蔚來汽車有限公司</p>
                                                <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>南寧市/青秀區</span><span class="vl">|</span><span>8001-10000</span></p>
                                            </a>
                                        </li><li>
                                            <a href="/home/jobDetail?pid=2611237">
                                                <p class="PositionName">技術支持/維護</p>
                                                <p class="Enterprise">廣西樂美趣智能科技有限公司</p>
                                                <p class="Enterprise"><span></span><span class="vl"></span><span>南寧市/西鄉塘區</span><span class="vl">|</span><span>4001-5000</span></p>
                                            </a>
                                        </li><li>
                                            <a href="/home/jobDetail?pid=2604036">
                                                <p class="PositionName">銷售行政助理（週末雙休）</p>
                                                <p class="Enterprise">南寧中天房地產有限責任公司</p>
                                                <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>南寧市</span><span class="vl">|</span><span>3001-4000</span></p>
                                            </a>
                                        </li><li>
                                            <a href="/home/jobDetail?pid=3142277">
                                                <p class="PositionName">寒假工(餐飲服務員）</p>
                                                <p class="Enterprise">廣西好友緣餐飲投資有限公司</p>
                                                <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>南寧市</span><span class="vl">|</span><span>2001-3000</span></p>
                                            </a>
                                        </li></ul>
                        </div>
                    </div>
                    <div id="Graduate" class="RecruitmentInfo">
                        <div class="RecruitmentIcon">
                            <nav>
                                <a href="/home/bys?did=2" class="menuBys" title="畢業生">
                                    <i class="icon-doctorialHat"></i>
                                    <p>畢業生</p>
                                </a>
                            </nav>
                        </div><div class=" RecruitmentDe" id="GraduateRecruitmentPosition">
                            <ul class="Triangle" style="margin-top: -650px;">

                            <li>
            <a href="/home/jobDetail?pid=3155622">
                <p class="PositionName">工程測量</p>
                <p class="Enterprise">廣西高立工程技術有限公司</p>
                <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>3001-4000</span></p>
            </a>
        </li><li>
            <a href="/home/jobDetail?pid=3155354">
                <p class="PositionName">道路設計實習生</p>
                <p class="Enterprise">廣西高立工程技術有限公司</p>
                <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>1001-1500</span></p>
            </a>
        </li><li>
            <a href="/home/jobDetail?pid=3155168">
                <p class="PositionName">財務實習生</p>
                <p class="Enterprise">永誠財產保險股份有限公司廣西分公司</p>
                <p class="Enterprise"><span>本科</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>1001-1500</span></p>
            </a>
        </li><li>
            <a href="/home/jobDetail?pid=3155622">
                <p class="PositionName">工程測量</p>
                <p class="Enterprise">廣西高立工程技術有限公司</p>
                <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>3001-4000</span></p>
            </a>
        </li><li>
            <a href="/home/jobDetail?pid=3155354">
                <p class="PositionName">道路設計實習生</p>
                <p class="Enterprise">廣西高立工程技術有限公司</p>
                <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>1001-1500</span></p>
            </a>
        </li></ul>
                        </div>
                    </div>
                </div>

cssui

#RecruitmentArea { padding: 10px 0; }
    #RecruitmentArea .RecruitmentInfo { height: 65px; background-color: #fff; padding: 0 0 0 90px; overflow: hidden; position: relative; }
    #RecruitmentArea .RecruitmentIcon { position: absolute; top: 0; left: 0; }
    #RecruitmentArea .RecruitmentIcon a { width: 80px; height: 80px; }
    .menuJp { background: #ff6666; }
    .menuBys { background: #99cc99; }
    .menuJp i { width: 49px; height:28px; margin: 10px auto 0; font-size: 26px; }
    .menuBys i { width: 49px; height:30px; margin: 3px auto 3px; font-size: 36px; }
    #ImportantRecruitmentPosition, #GraduateRecruitmentPosition { height: 65px; overflow: hidden; }
    #RecruitmentArea ul li { position: relative; height: 65px; }
    #RecruitmentArea ul li a { display:block; padding-right:20px;}
    #RecruitmentArea p {}
    #RecruitmentArea .PositionName { height: 24px; color: #009FE7; font-size: 16px; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; }
    #RecruitmentArea .Enterprise { height:19px; color: #666666; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
    #Graduate { margin-top: 10px; clear: both; }
    .RecruitmentDe { }

jsthis


                    (function () {function mix(t, s, ov, wl) {
                            if (!s || !t)
                                return t;
                            if (ov === undefined)
                                ov = true;
                            var i, p, l;
                            if (wl && (l = wl.length)) {
                                for (i = 0; i < l; i++) {
                                    p = wl[i];
                                    if (p in s) {
                                        if (ov || !(p in t)) {
                                            t[p] = s[p];
                                        }
                                    }
                                }
                            }
                            else {
                                for (p in s) {
                                    if (ov || !(p in t)) {
                                        t[p] = s[p];
                                    }
                                }
                            }
                            return t;
                        };
                        function augment(t, s, ov, wl) {
                            mix(t.prototype, s.prototype || s, ov, wl);
                            return t;
                        }

                        var direction = function () { }
                        direction.prototype = {
                            startTimer: function (fn) {
                                var self = this;
                                if (self.options.timeout) {
                                    self.timer = setInterval(function () {
                                        fn && fn.call(self);
                                        self.play();
                                    }, self.options.timeout);
                                }
                            },
                            stopTimer: function () {
                                var self = this;
                                self.timer && clearInterval(self.timer);
                            },
                            isDir: function () {
                                var self = this;
                                return self.options.dir == 1 || self.options.dir == 4;
                            },
                            getDir: function (b) {
                                var self = this;
                                return self.options.dir == 1 || self.options.dir == 3;
                            },
                            getDimName: function () {
                                var self = this;
                                return self.getDir() ? "height" : "width";
                            },
                            getDirName: function () {
                                var self = this;
                                return self.getDir() ? "margin-top" : "margin-left";
                            },
                            getElemSize: function () {
                                var self = this;
                                return self.getDir() ? self.options.outHeight : self.options.outWidth;
                            },
                            getContainerSize: function () {
                                var self = this;
                                return self.getDir() ? self.options.height : self.options.width;
                            },
                            //獲取滾動的算法信息
                            getSizeInfo: function () {
                                var self = this,
                                    totalPageSize = self.maxIndex * self.getElemSize(),
                                    totalPageLen = Math.floor(totalPageSize / self.getContainerSize()),
                                    viewPageLen = Math.floor(self.getContainerSize() / self.getElemSize()),
                                    residuePageLen = self.maxIndex - viewPageLen,
                                    endLen = residuePageLen % self.options.step,
                                    pageIndex = self.index * self.options.step,
                                    endPos = totalPageSize - self.getContainerSize(),
                                    stepPos = self.isDir() ? pageIndex - self.options.step : pageIndex + self.options.step,
                                    scrollPos = stepPos * self.getElemSize(),
                                    viewSize = self.getElemSize() * self.options.step,
                                    resultLen = self.maxIndex - endLen == self.maxIndex ? 0 : Math.abs(self.maxIndex - ((self.maxIndex - endLen) + self.options.step)),
                                    resultSize = resultLen * self.getElemSize(),
                                    maxIndex = Math.ceil((self.maxIndex - viewPageLen) / self.options.step);

                                return {
                                    totalPageSize: totalPageSize,
                                    endPos: endPos,
                                    pageIndex: pageIndex,
                                    scrollPos: scrollPos,
                                    viewSize: viewSize,
                                    viewPageLen: viewPageLen,
                                    totalPageLen: totalPageLen,
                                    resultSize: resultSize,
                                    maxIndex: maxIndex
                                }
                            }
                        }
                        var slider = function (o) {
                            this.options = o || {};
                            this.init();
                        }
                        mix(slider.prototype, {
                            init: function () {
                                var self = this;
                                self.options.target = self.options.target || '#banner_scroller';
                                self.options.item = self.options.item || 'li';
                                self.options.prev = self.options.prev || null;
                                self.options.next = self.options.next || null;
                                self.options.time = self.options.time != null ? self.options.time : 500;
                                self.options.timeout = self.options.timeout != null ? self.options.timeout : 5000;
                                self.options.dir = self.options.dir || 4;
                                self.options.autoPlay = self.options.autoPlay || "auto";
                                self.target = $(self.options.target);
                                self.item = self.target.find(self.options.item);
                                self.list = self.item.parent();
                                self.options.step = self.options.step || 1;
                                self.options.width = self.target.outerWidth();
                                self.options.height = self.target.outerHeight();
                                self.options.outWidth = self.item.outerWidth(true);
                                self.options.outHeight = self.item.outerHeight(true);
                                self.options.tempDir = self.options.dir;

                                self.maxIndex = self.item.length;
                                self.enabled = true;
                                self.steup();
                            },
                            steup: function () {
                                var self = this,
                                    size = self.getSizeInfo().viewPageLen;
                                if (self.options.step > size)
                                    self.options.step = size;
                                if (self.maxIndex <= size) {
                                    self.options.prev && self.target.find(self.options.prev).hide();
                                    self.options.next && self.target.find(self.options.next).hide();
                                    return;
                                }
                                self.bind();
                            },
                            bind: function () {
                                var self = this;
                                self.initList();
                                self.target.hover(function () {
                                    self.stopTimer();
                                }, function () {
                                    self.autoPlay();
                                });
                                self.options.prev && self.target.find(self.options.prev).click(function () {
                                    if (self.enabled) {
                                        self.options.dir = self.getDir() ? 3 : 2;
                                        self.play();
                                    }
                                });
                                self.options.next && self.target.find(self.options.next).click(function () {
                                    if (self.enabled) {
                                        self.options.dir = self.getDir() ? 1 : 4;
                                        self.play();
                                    }
                                });
                                self.autoPlay();
                            },
                            initList: function () {
                                var self = this,
                                    avaisize = self.maxIndex - self.getSizeInfo().viewPageLen,
                                    total = self.maxIndex * self.getElemSize(),
                                    html = self.list.html();
                                if (avaisize < self.options.step) {
                                    self.list.append(html);
                                }
                                self.list.prepend(html);
                                self.pos = -total;
                                self.list.css(self.getDirName(), self.pos);
                            },
                            addElement: function () {
                                var self = this;
                                self.item = self.target.find(self.options.item);
                                self.maxIndex = self.item.length;
                                self.item.each(function (i) {
                                    if (i >= self.options.step) return;
                                    if (self.isDir()) {
                                        self.item.eq(i).appendTo(self.list);
                                    } else {
                                        self.item.eq(self.maxIndex - i - 1).prependTo(self.list);
                                    }
                                });
                                self.list.css(self.getDirName(), self.pos);
                            },
                            play: function () {
                                var self = this;
                                self.enabled = false;
                                self.go();
                                self.stopTimer();
                            },
                            autoPlay: function () {
                                var self = this;
                                if (self.options.autoPlay === "auto") {
                                    self.stopTimer();
                                    self.startTimer();
                                }
                            },
                            go: function () {
                                var self = this;
                                self.list.stop(true, false).animate(self.getPos(), self.options.time, function () {
                                    self.addElement();
                                    self.enabled = true;
                                    self.options.dir = self.options.tempDir;
                                    self.autoPlay();
                                });
                            },
                            dir: function () {
                                var self = this;
                                return (self.options.dir == 4 || self.options.dir == 3) ? "Next" : "Prev";
                            },
                            getPos: function () {
                                var self = this,
                                    size = self.getElemSize() * self.options.step;
                                switch (self.options.dir) {
                                    case 1:
                                        return { "margin-top": (self.pos - size) };
                                        break;
                                    case 2:
                                        return { "margin-left": (self.pos + size) };
                                        break;
                                    case 3:
                                        return { "margin-top": (self.pos + size) };
                                        break;
                                    case 4:
                                        return { "margin-left": (self.pos - size) };
                                        break;
                                }
                            }
                        });
                        augment(slider, direction);
                        sr = new slider({
                            target: "#ImportantRecruitmentPosition",
                            dir: 1,
                            timeout: 3000
                        });
                        sr2 = new slider({
                            target: "#GraduateRecruitmentPosition",
                            dir: 1,
                            timeout: 3000
                        });

                    })();

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。