css3 雪碧图实现数字切换

标签：mil   div   分享   sof   col   time   ++   only   highlight   

vue中css 雪碧图应用及数字切换demo

<template>
    <div class="total">
        <div class="content">
            <span class="number" v-for="item in numberObj" :class="item.classObj"></span>
        </div>
    </div>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                total: ‘12451‘,
                numberObj: [
                    {
                        classObj: ‘‘
                    },
                    {
                        classObj: ‘‘
                    },
                    {
                        classObj: ‘‘
                    },
                    {
                        classObj: ‘‘
                    },
                    {
                        classObj: ‘‘
                    },
                    {
                        classObj: ‘‘
                    },
                    {
                        classObj: ‘‘
                    },
                    {
                        classObj: ‘‘
                    },
                    {
                        classObj: ‘‘
                    }
                ]
            };
        },

       mounted() {
    　　　　setTimeout(function () {
        　　　　this.total = 12451;
    　　　　}, 1000 * 30);
　　　　},
　　　　watch: {
    　　　　‘total‘(newVal, oldVal){
        　　　　this.total = newVal;
        　　　　this.refresh();
    　　　　}
　　　　},
　　　　methods: {
    　　　　refresh: function () {
        　　　　let length = this.total.toString().length;

        　　　　for (let i = 1; i <= length; i++) {
            　　　　let _number = parseInt(this.total % Math.pow(10, i) / Math.pow(10, (i - 1)));
               　　　　this.numberObj[9-i].classObj = [‘position_‘ + _number, ‘highLight‘];
        　　　　}
    　　　　}
　　　　}

    };
</script>

.number {
    flex: none;
    margin: 0 2px;
    height: 34px;
    width: 21px;
    background-image: url("/image/number/css-sprites-x1.png");
    @media only screen and (min-device-pixel-ratio: 2) {
        background-image: url("/image/number/css-sprites-x2.png");
    }

    &.highLight{
        background-image: url("/image/number/css-sprites-highlight-x1.png");
        @media only screen and (min-device-pixel-ratio: 2) {
            background-image: url("/image/number/css-sprites-highlight-x2.png");
        }
    }

   background-position: 48px 0;

    &.position_0 {
        background-position: -1px 0;

    }
    &.position_1 {
        background-position: -22px 0;

    }
    &.position_2 {
        background-position: -43px 0;

    }
    &.position_3 {
        background-position: -70px 0;

    }
    &.position_4 {
        background-position: -97px 0;

    }
    &.position_5 {
        background-position: 129px 0;

    }
    &.position_6 {
        background-position: 102px 0;

    }
    &.position_7 {
        background-position: 72px 0;

    }
    &.position_9 {
        background-position: 21px 0;

    }
}

效果图：

css3 雪碧图实现数字切换

标签：mil   div   分享   sof   col   time   ++   only   highlight   

原文地址：http://www.cnblogs.com/apple-p/p/7612377.html