滚动区块的透明度渐变(遮罩)
闲话不说,先看效果:
代码实现:
<div class="rollingBlock"> <div class="mask"></div> <ul class="list"> <li>01</li> <li>02</li> <li>03</li> <li>04</li> <li>05</li> <li>06</li> <li>07</li> <li>08</li> <li>09</li> <li>10</li> </ul> </div>
div.rollingBlock{ position: relative; box-sizing: border-box; width: 800px; height: 600px; background-color: #021019; border-radius: 2px; overflow: hidden; transition: background-color 0.5s; -webkit-transition: background-color 0.5s; -moz-transition: background-color 0.5s; -o-transition: background-color 0.5s; -ms-transition: background-color 0.5s; } div.rollingBlock div.mask{ position: absolute; z-index:999; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(2,16,25,1)), to(rgba(2,16,25,0))); background: -moz-linear-gradient(top, rgba(0,0,0, 1), rgba(255, 255, 255, 0)); background: -o-linear-gradient(top, rgba(0,0,0, 1), rgba(255, 255, 255, 0)); background: -ms-linear-gradient(top, rgba(0,0,0, 1), rgba(255, 255, 255, 0)); background: linear-gradient(top, rgba(0,0,0, 1), rgba(255, 255, 255, 0)); } div.rollingBlock div.mask:hover{ background: transparent; } div.rollingBlock ul{ position: absolute; left: 22px; top: 0; width: 100%; } div.rollingBlock li{ box-sizing: border-box; width: 100%; height: 40px; text-align: center; padding: 0 10px 0 1px; margin-top: 6px; line-height: 40px; background-color: rgba(0,0,0,0.5); border-radius: 2px; }
$("div.rollingBlock").hover(function(){ clearInterval(time); }, function() { roll(); }); var time = null; var control = false; function roll() { clearInterval(time); time = setInterval(function() { // var top = Number.parseInt(getStyle(oUl, 'top')); var top = ul.position().top; ul.animate({top:top-46 + 'px'}, "slow",function() { top = Number.parseInt(getStyle(oUl, 'top')); var obj = ul.children().first().remove(); ul.append(obj); ul.css("top",top+46 + 'px'); } ); }, 2000); } roll();
注意遮罩的rgba()色彩要与盒子的背景色一致