jq实现鼠标滚动的时候上下翻页,动画在翻页的时候才会执行

本文介绍了作者在换工作后遇到的移动端翻页效果需求,通过jQuery实现鼠标滚动触发的页面翻转动画。文章分享了实现这一效果的CSS样式和jQuery代码片段,邀请读者和同行交流讨论。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

        以前一直想自己写几篇属于自己博客,但是由于工作原因以及一些生活的上的因素,导致一直都没能如愿,今天加班,正好事儿还没过来,真好留了时间给我写一篇博客。

        在上一家公司的时候,主要从事的是移动端的开发,由于基于移动端有了相对来说很成熟的翻页框架,所以基本上很少会自己写一些翻页的效果,以及翻页的动画效果,之前的公司的模式更像是外包模式,很忙,也基本没有时间去自己研究那些框架的搭建和基层代码,换公司以后,公司有这个需求,要做一个这样的效果,然后自己就稍微研究了一下做法,想了一些逻辑来实现,如果有什么不对的,或者麻烦的,请各位大神帮忙指点。

         话不多说了,开始贴代码吧:

<body>
<section class="wrapp">
	<div class="viewpoint">
    	<a style="z-index:5;"><img src="imgs/xhc_logo.png"></a>
        <a style="z-index:4;"><img id="downicon" src="imgs/down.png"></a>
        <ul class="slidethumb"></ul>
		<div class="containner">
	<!--/*<img src="imgs/section0_80d2d2ee.jpg" >*/-->
			<div class="data-1 page">
    			
    		</div>
    		<div class="data-2 page">
            	<div class="xiebottom"></div>
                <div class="data-2-animation">
                	<img class="data-2-floatimg" src="imgs/section1-phone1_e4888d2a.png">
                	<img class="data-2-floatimg floatimg2" src="imgs/section1-phone2_095728f7.png">
                	<img class="data-2-move1" src="imgs/section1-group1_62679686.png">
                	<img class="data-2-move2" src="imgs/section1-group3_23488e5d.png">
                </div>
            </div>
    		<div class="data-3 page">
            	<div class="xiebottom"></div>
            </div>
		</div>
	</div>
</section>
</body>
       我只是做了一个相应的demo,所以HTML写的比较随意,大神们请别见怪。

       下面是一些css的样式

     

<style>
	/*基本UI样式*/
	*{margin:0;padding:0;}
	.viewpoint{
		min-width:320px;
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		/*min-height:568px;*/
		overflow:hidden;
		}
	.containner{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:500%;
		}
		
	
	.viewpoint a{
		position:absolute;
		top:7%;
		left:10%;
		width:150px;
		height:40px;
		z-index:1;
		}
		.viewpoint a img{
		width:100%;
		height:100%;
		}
		.viewpoint a:nth-child(2){
			max-width:40px;
			min-width:15px;
			top:94%;
			left:48%;
			width:2%;
			height:auto;
			}
		.data-1{
			width:100%;
			height:20%;
			position:absolute;
			overflow:hidden;
			background-image:url("../imgs/section0_80d2d2ee.jpg");
			background-size:100% auto;
			background-repeat:no-repeat;
			background-color:#2996D7;
			background-position:50% 50%;
			}
		.data-2{
			width:100%;
			height:20%;
			top:20%;
			position:absolute;
			overflow:hidden;
	
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值