jquery 實現(xiàn)多種多樣的商業(yè)盈利模式圖標(biāo)和文字區(qū)塊疊加布局展示代碼,頁面滾動由內(nèi)向外漸變動畫效果代碼。結(jié)構(gòu)清晰簡單易用,下載即可使用。
使用方法:
1、head引入css文件
<link href="css/style.css" rel="stylesheet" type="text/css"/>
2、head引入js文件
<script src="js/jquery-1.7.2.min.js"></script>
3、body引入HTML代碼
<div style="height:400px;"></div> <!-- 滾動顯示 里面的內(nèi)容 默認(rèn)需要在“pattern-box”上面加上高度 需向下滑動 才可顯示內(nèi)容 -->
<div class="pattern-box">
<div class="pattern-head">
<h2>多種多樣的商業(yè)盈利模式</h2>
</div>
<div class="pattern-wrap">
<div class="pattern-list">
<div class="pattern-item item-1">
<div class="pattern-item-title">
<img src="images/app-store-biz1.png" about="" title="" alt="">
<h3>自營電商</h3>
</div>
<p>適用于各行各業(yè)電商買賣<br>服裝、生鮮、電器、家居等</p>
</div>
<div class="pattern-item item-2">
<div class="pattern-item-title">
<img src="images/app-store-biz2.png" about="" title="" alt="">
<h3>招商入駐</h3>
</div>
<p>打造網(wǎng)上綜合商場<br>入駐費、傭金折扣、廣告費</p>
</div>
<div class="pattern-item item-3">
<div class="pattern-item-title">
<img src="images/app-store-biz3.png" about="" title="" alt="">
<h3>O2O營銷</h3>
</div>
<p>線上線下聯(lián)動營銷<br>線上預(yù)約/買單,線下消費</p>
</div>
<div class="pattern-item item-4">
<div class="pattern-item-title">
<img src="images/app-store-biz4.png" about="" title="" alt="">
<h3>付費閱讀</h3>
</div>
<p>打造各行業(yè)新聞自媒體<br>集聚粉絲,付費閱讀</p>
</div>
<div class="pattern-item item-5">
<div class="pattern-item-title">
<img src="images/app-store-biz5.png" about="" title="" alt="">
<h3>付費發(fā)布</h3>
</div>
<p>二手、招聘、房產(chǎn)、寵物等<br>用戶付費發(fā)布相關(guān)信息</p>
</div>
</div>
</div>
</div>
<div style="height:200px;"></div>
<script type="text/javascript">
var $mod = $(".pattern-box");
document.addEventListener('scroll',function(){
//滾動條高度+視窗高度 = 可見區(qū)域底部高度
var visibleBottom = window.scrollY + document.documentElement.clientHeight;
//可見區(qū)域頂部高度
var visibleTop = window.scrollY;
for (var i = 0; i < $mod.length; i++) {
var centerY = $mod.eq(i).offset().top+($mod.eq(i).outerHeight()/2);
//console.log($mod.eq(i).outerHeight());
if(centerY>visibleTop&¢erY<visibleBottom){
$mod.eq(i).addClass("show");
//console.log('第'+i+'個區(qū)域可見');
}else{
//$mod.eq(i).removeClass("show");
//console.log('第'+i+'個區(qū)域不可見');
}
}
});
</script>