jquery css3商业模式图标文字叠加布局代码

2020-12-22 0 394

jquery css3商业模式图标文字叠加布局代码

jquery 实现多种多样的商业盈利模式图标和文字区块叠加布局展示代码,页面滚动由内向外渐变动画效果代码。结构清晰简单易用,下载即可使用。

使用方法

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> <!--  滚动显示 里面的内容 默认需要在“pattern-box”上面加上高度 需向下滑动 才可显示内容 -->
<div class="pattern-box">
	<div class="pattern-head">
		<h2>多种多样的商业盈利模式</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>适用于各行各业电商买卖<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>打造网上综合商场<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>线上线下联动营销<br>线上预约/买单,线下消费</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>打造各行业新闻自媒体<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>付费发布</h3>
				</div>
				<p>二手、招聘、房产、宠物等<br>用户付费发布相关信息</p>
			</div>
		</div>
	</div>
</div>

<div style="height:200px;"></div>

<script type="text/javascript">

var $mod = $(".pattern-box");
document.addEventListener('scroll',function(){
	//滚动条高度+视窗高度 = 可见区域底部高度
	var visibleBottom = window.scrollY + document.documentElement.clientHeight;
	//可见区域顶部高度
	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+'个区域可见');
		}else{
			//$mod.eq(i).removeClass("show");
			//console.log('第'+i+'个区域不可见');
		}
	}
});
</script>
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1、如非特殊说明,本站对本文提供的代码或者素材不拥有任何权利,其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来,仅供学习和研究使用。
3、如有侵犯你版权的,请来信(邮箱:admin@mail.52muban.com)指出,核实后,本站将立即改正。
4、如有链接无法下载、失效或广告,请点击下面的报错或者联系我们处理!
5、以上资源售价只是赞助,不代表代码或者素材本身价格。收取费用仅维持本站的日常运营所需!

我爱模板网 其它特效 jquery css3商业模式图标文字叠加布局代码 https://www.52muban.com/9205.html

专注网站开发,建设。

常见问题
  • 我们承诺演示效果图均和网站一模一样,如有不同,全额退款,并且我们的模板和数据都没有留后门,请放心使用。
查看详情
  • 本站所有源码版权归原作者所有,我爱模板网提供的源码只能用于学习研究,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务