css3 雪碧圖實現數字切換
阿新 • • 發佈:2017-09-29
this family ++ flex class ext 技術分享 def 分享
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 雪碧圖實現數字切換