首页 > 代码库 > 京东常用的动态信息效果
京东常用的动态信息效果
<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://www.mamicode.com/#" target="_blank">智能数码<span>抢亿元红包</span></a></li>
<li clstag="pageclick|keycount|shopAtten_20244344_2|0" style="top: 81px; transform: scale(1, 1);"><a href="http://www.mamicode.com/#" 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://www.mamicode.com/#" 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://www.mamicode.com/#" 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://www.mamicode.com/#" 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>
京东常用的动态信息效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。