码迷,mamicode.com
首页 > 其他好文 > 详细

京东常用的动态信息效果

时间:2017-01-08 10:42:38      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:prot   back   lib   font   rip   index   pad   cms   dom   

 
 
<style>
    .danmu-214954 {
        position: absolute;
        left: 50%;
        margin-left: 335px;
        top: 210px;
        width: 257px;
        height: 233px;
        overflow: hidden;
        z-index: 3;
    }
 
        .danmu-214954 ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 157px;
        }
 
        .danmu-214954 li {
            width: 157px;
            height: 71px;
            position: absolute;
            left: 0;
            top: 0;
            margin-bottom: 10px;
            transition: all 0.8s ease;
            transform-origin: center bottom;
        }
 
            .danmu-214954 li a {
                display: block;
                padding: 13px 29px 13px 28px;
                width: 100px;
                height: 45px;
                font-family: ‘Microsoft Yahei‘;
                font-size: 20px;
                color: #fff;
                line-height: 1.1;
                text-align: center;
                overflow: hidden;
            }
 
                .danmu-214954 li a span {
                    font-size: 16px;
                    display: block;
                    width: 100%;
                    text-align: center;
                }
</style>
 
<div class="  danmu-214954 " moduleclass="danmu-214954" instanceid="20244344" style="margin-bottom: 10px;" module-name="shopAtten" data-has-point="true">
 
 
    <div class="mc" style=" min-height:0px;">
        <div class="danmu">
            <ul>
                <li clstag="pageclick|keycount|shopAtten_20244344_1|0" style="top: 0px; transform: scale(1, 1);"><a href="#" target="_blank">智能数码<span>抢亿元红包</span></a></li>
                <li clstag="pageclick|keycount|shopAtten_20244344_2|0" style="top: 81px; transform: scale(1, 1);"><a href="#" target="_blank">小家电<span>精品两件99元</span></a></li>
                <li clstag="pageclick|keycount|shopAtten_20244344_3|0" style="top: 162px; transform: scale(1, 1);"><a href="#" target="_blank">服饰家居<span>跨品类3件8折</span></a></li>
                <li clstag="pageclick|keycount|shopAtten_20244344_4|0" style="top: 243px; transform: scale(0, 0);"><a href="#" target="_blank">京东生鲜<span>满199减50</span></a></li>
                <li clstag="pageclick|keycount|shopAtten_20244344_5|0" style="top: -81px; transform: scale(0, 0);"><a href="#" target="_blank">京东超市<span>爆款9.9元抢</span></a></li>
            </ul>
        </div>
        <script type="text/javascript">
 
            function danmu(dom) {
                var _this = this;
                _this.sliderDom = $(dom);
                _this.sliderEle = _this.sliderDom.find(‘li‘);
                _this.domSize = _this.sliderEle.size();
                _this.sliderEle.css({ ‘top‘: 243 });
                _this.sliderIndex = 1;
                _this.slider(_this.sliderEle.size());
                _this.sti();
            }
 
            danmu.prototype.slider = function (dindex) {
                var _this = this;
                if (dindex == _this.domSize - 3) {
                    _this.sliderEle.eq(dindex - 1).css({
                        ‘top‘: -81,
                        ‘transform‘: ‘scale(0,0)‘
                    });
                    _this.sliderEle.eq(dindex).css({
                        ‘top‘: -81,
                        ‘transform‘: ‘scale(0,0)‘
                    });
                    setTimeout(function () {
                        _this.sliderEle.eq(dindex - 2).css({ ‘top‘: 243, ‘transform‘: ‘scale(0,0)‘ });
                        _this.sliderEle.eq(dindex - 1).css({ ‘top‘: 243, ‘transform‘: ‘scale(0,0)‘ });
                    }, 300);
                    _this.sliderEle.eq(dindex + 1).css({
                        ‘top‘: 0,
                        ‘transform‘: ‘scale(1,1)‘
                    });
                    _this.sliderEle.eq(dindex + 2).css({
                        ‘top‘: 81,
                        ‘transform‘: ‘scale(1,1)‘
                    });
                    _this.sliderEle.eq(0).css({
                        ‘top‘: 162,
                        ‘transform‘: ‘scale(1,1)‘
                    });
                }
                else if (dindex == _this.domSize - 2) {
                    _this.sliderEle.eq(dindex - 1).css({
                        ‘top‘: -81,
                        ‘transform‘: ‘scale(0,0)‘
                    });
                    _this.sliderEle.eq(dindex).css({
                        ‘top‘: -81,
                        ‘transform‘: ‘scale(0,0)‘
                    });
                    setTimeout(function () {
                        _this.sliderEle.eq(dindex - 2).css({ ‘top‘: 243, ‘transform‘: ‘scale(0,0)‘ });
                        _this.sliderEle.eq(dindex - 1).css({ ‘top‘: 243, ‘transform‘: ‘scale(0,0)‘ });
                    }, 1300);
                    _this.sliderEle.eq(dindex + 1).css({
                        ‘top‘: 0,
                        ‘transform‘: ‘scale(1,1)‘
                    });
                    _this.sliderEle.eq(0).css({
                        ‘top‘: 81,
                        ‘transform‘: ‘scale(1,1)‘
                    });
                    _this.sliderEle.eq(1).css({
                        ‘top‘: 162,
                        ‘transform‘: ‘scale(1,1)‘
                    });
                }
                else if (dindex == _this.domSize - 1) {
                    _this.sliderEle.eq(dindex).css({
                        ‘top‘: -81,
                        ‘transform‘: ‘scale(0,0)‘
                    });
                    setTimeout(function () {
                        _this.sliderEle.eq(dindex - 2).css({ ‘top‘: 243, ‘transform‘: ‘scale(0,0)‘ });
                        _this.sliderEle.eq(_this.domSize - 1).css({ ‘top‘: 243, ‘transform‘: ‘scale(0,0)‘ });
                    }, 1300);
                    _this.sliderEle.eq(0).css({
                        ‘top‘: 0,
                        ‘transform‘: ‘scale(1,1)‘
                    });
                    _this.sliderEle.eq(1).css({
                        ‘top‘: 81,
                        ‘transform‘: ‘scale(1,1)‘
                    });
                    _this.sliderEle.eq(2).css({
                        ‘top‘: 162,
                        ‘transform‘: ‘scale(1,1)‘
                    });
                }
                else if (dindex == _this.domSize) {
                    _this.sliderEle.eq(dindex - 1).css({
                        ‘top‘: -81,
                        ‘transform‘: ‘scale(0,0)‘
                    });
                    setTimeout(function () {
                        _this.sliderEle.eq(_this.domSize - 1).css({ ‘top‘: 243, ‘transform‘: ‘scale(0,0)‘ });
                    }, 1300);
                    _this.sliderEle.eq(0).css({
                        ‘top‘: 0,
                        ‘transform‘: ‘scale(1,1)‘
                    });
                    _this.sliderEle.eq(1).css({
                        ‘top‘: 81,
                        ‘transform‘: ‘scale(1,1)‘
                    });
                    _this.sliderEle.eq(2).css({
                        ‘top‘: 162,
                        ‘transform‘: ‘scale(1,1)‘
                    });
                }
                else if (dindex < _this.domSize - 3) {
                    _this.sliderEle.eq(dindex).css({
                        ‘top‘: -81,
                        ‘transform‘: ‘scale(0,0)‘
                    });
                    setTimeout(function () {
                        _this.sliderEle.eq(dindex - 1).css({ ‘top‘: 243, ‘transform‘: ‘scale(0,0)‘ });
                    }, 1300);
                    _this.sliderEle.eq(dindex + 1).css({
                        ‘top‘: 0,
                        ‘transform‘: ‘scale(1,1)‘
                    });
                    _this.sliderEle.eq(dindex + 2).css({
                        ‘top‘: 81,
                        ‘transform‘: ‘scale(1,1)‘
                    });
                    _this.sliderEle.eq(dindex + 3).css({
                        ‘top‘: 162,
                        ‘transform‘: ‘scale(1,1)‘
                    });
                }
 
                dindex++;
                if (dindex >= _this.domSize) {
                    dindex = 0;
                };
                _this.sliderIndex = dindex;
            }
 
            danmu.prototype.sti = function () {
                var _this = this;
                clearInterval(_this.st);
                _this.st = setInterval(function () {
                    _this.slider(_this.sliderIndex);
                }, 2000);
                window.onfocus = function () {
                    clearInterval(_this.st);
                    _this.st = setInterval(function () {
                        _this.slider(_this.sliderIndex);
                    }, 2000);
                }
                window.onblur = function () {
                    clearInterval(_this.st);
                }
                _this.sliderDom.bind(‘mouseenter‘, function () {
                    window.onblur();
                });
                _this.sliderDom.bind(‘mouseout‘, function () {
                    clearInterval(_this.st);
                    window.onfocus();
                });
            }
 
            $(function () {
                $(window).focus();
                var dm = new danmu(‘.danmu‘);
            })
        </script>
    </div>
 
</div>
技术分享

京东常用的动态信息效果

标签:prot   back   lib   font   rip   index   pad   cms   dom   

原文地址:http://www.cnblogs.com/CCDS01/p/6261582.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!