京东常用的动态信息效果
Posted CC大神01
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了京东常用的动态信息效果相关的知识，希望对你有一定的参考价值。
<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="#" 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>
以上是关于京东常用的动态信息效果的主要内容，如果未能解决你的问题，请参考以下文章