<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>列表滚动版</title>
<style>
.buyers-container{position: fixed;top:.66rem;left:.4rem;color: #fff; height:34px;overflow: hidden;z-index: 99999999;}
.buyers-item { display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; align-items: center;padding:0 5px;
height:34px;line-height:34px;-webkit-border-radius:16px;border-radius:16px;background: rgba(0,0,0,.6);-webkit-transition: 1;transition: 1; opacity: 0;}
.buyers-in {-webkit-animation: 1s show linear;animation: 1s show linear;opacity: 1;}
.buyers-out {-webkit-animation: 1s hide linear;animation: 1s hide linear;}
.buyers-show {opacity: 1}
.buyers-item p {max-width:200px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; font-size:12px;}
.buyers-img {width:28px;height:28px;-webkit-border-radius:50%;border-radius:50%;margin-right:10px;margin-left:1px;}
@-webkit-keyframes show {
0% {opacity:0}
to {opacity: 1}
}
@keyframes show {
0% {opacity:0}
to {opacity: 1}
}
@-webkit-keyframes hide {
0% {opacity:1}
to {opacity: 0}
}
@keyframes hide {
0% {opacity:1}
to {opacity: 0}
}
</style>
</head>
<body>
<div class="buyers-container" id="buyers-container">
<div class="buyers-item" id="buyers-item0">
<img src="images/1.jpg" alt="" width="20" height="20" class="buyers-img">
<p>扬州市杨**购买了该商品，10分钟前</p>
</div>
<div class="buyers-item" id="buyers-item1">
<img src="images/2.jpg" alt="" width="20" height="20" class="buyers-img">
<p>徐州市张**购买了该商品，16分钟前</p>
</div>
<div class="buyers-item" id="buyers-item2">
<img src="images/3.jpg" alt="" width="20" height="20" class="buyers-img">
<p>福州市吴**购买了该商品，18分钟前</p>
</div>
<div class="buyers-item" id="buyers-item3">
<img src="images/4.jpg" alt="" width="20" height="20" class="buyers-img">
<p>台州市武**购买了该商品，40分钟前</p>
</div>
<div class="buyers-item" id="buyers-item4">
<img src="images/5.jpg" alt="" width="20" height="20" class="buyers-img">
<p>吴中市孙**购买了该商品，34分钟前</p>
</div>
</div>
<script>
var data=document.getElementById("buyers-container").getElementsByTagName('div');
var nums=data.length;
//alert(nums);
function step () {
timer = setTimeout(show, 2000)
}
function nextDiv(currentBuyer){
//alert(nums);
cur_div=document.getElementById("buyers-item"+currentBuyer+"");
//next_div=document.getElementById("buyers-item"+(currentBuyer+1)+"");
div_show(cur_div);
cur_div.style.transform="translateY(-" + 34 * (currentBuyer) + "px)";
}
function div_show(div){
setTimeout(function(){div.className="buyers-item buyers-in";div.className="buyers-item buyers-show";},200);
setTimeout(function(){div.className="buyers-item buyers-out";},3000);
}
//nextDiv(4);
var currentBuyer=0;
function xianshi(){
nextDiv(currentBuyer);
currentBuyer++;
if(currentBuyer>nums-1){
currentBuyer=0;
}
if(currentBuyer < nums){
setTimeout(function(){
xianshi();
},6000);
}
}
xianshi();
</script>
</body>
</html>
利用jQuery技术实现网页订单弹幕效果特效代码渐隐渐现效果带演示
版权申诉
5星 · 超过95%的资源 173 浏览量
2021-03-15
22:10:05
上传
评论
收藏 77KB RAR 举报 
订单弹幕.rar （8个子文件） 
订单弹幕 
demo1.html 3KB
jquery1.7.2.js 90KB demo2.html 3KB images 
5.jpg 9KB 3.jpg 14KB 4.jpg 10KB 2.jpg 7KB 1.jpg 4KB资源评论
weixin_447381152022-05-23用户下载后在一定时间内未进行评价，系统默认好评。
cider79112022-10-01资源有一定的参考价值，与资源描述一致，很实用，能够借鉴的部分挺多的，值得下载。
chg1482022-06-11用户下载后在一定时间内未进行评价，系统默认好评。
XYCMS
- 粉丝: 42
- 资源: 59
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减4.47元 开通VIP
