京东最近常用的动态信息效果 从京东偷下来的

jenn89
jenn89 发布于 2017-01-05 12:39:32 浏览:4151 类型:原创 - 随笔 分类:JavaScript - html 二维码: 作者原创 版权保护
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<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;
            background: url(http://img11.360buyimg.com/cms/jfs/t3217/316/4863803670/10858/5c6a05a2/5858cc4dNda031ab1.png) no-repeat 0 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="http://smzdqiang.com/dataoke/" target="_blank">智能数码<span>抢亿元红包</span></a></li>
                <li clstag="pageclick|keycount|shopAtten_20244344_2|0" style="top: 81px; transform: scale(1, 1);"><a href="http://smzdqiang.com/dataoke/" target="_blank">小家电<span>精品两件99元</span></a></li>
                <li clstag="pageclick|keycount|shopAtten_20244344_3|0" style="top: 162px; transform: scale(1, 1);"><a href="http://smzdqiang.com/dataoke/" 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="http://smzdqiang.com/dataoke/" 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="http://smzdqiang.com/dataoke/" 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>
标签:
z
给个赞 24 人点赞
收藏 51 人收藏
评论 已有 11 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
小水晶
小水晶2017-01-09 10:07:5711F
服饰家居那个效果  是掉下来的  和别的都不一样
举报 支持 (0) 回复 (0)
luomg1995
luomg19952017-01-06 15:38:2810F
在 IE 10及以上版本主要动态功能是正常的,样式有些问题
举报 支持 (0) 回复 (0)
rocky191
rocky1912017-01-06 14:35:519F
mark
举报 支持 (0) 回复 (0)
2542095193
25420951932017-01-06 13:43:328F
挺不错的
举报 支持 (0) 回复 (0)
zhaoyanxiansen
zhaoyanxiansen2017-01-06 11:01:227F
有这么复杂么·······??
举报 支持 (0) 回复 (0)
走火爱上鱼
走火爱上鱼2017-01-06 09:14:036F
我怎么看不出 什么效果
举报 支持 (0) 回复 (0)
★时☆月★
★时☆月★2017-01-05 20:01:435F
动画上移的时候有轻微抖动
举报 支持 (0) 回复 (0)
brucelyy
brucelyy2017-01-05 15:56:304F
偷走了emoticon
举报 支持 (0) 回复 (0)
277039203
2770392032017-01-05 15:23:053F
emoticon
举报 支持 (0) 回复 (0)
zzmisss
zzmisss2017-01-05 14:39:152F
效果赞赞的~
举报 支持 (0) 回复 (0)
探花
探花2017-01-05 13:08:051F
挺不错的
举报 支持 (0) 回复 (0)
jenn89 jenn89 作者

码到用时方很少!

作者最新