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

最新推荐文章于 2025-05-19 17:16:54 发布

davechan_528

最新推荐文章于 2025-05-19 17:16:54 发布

阅读量6.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css HTML jq 文章标签： jq 翻页动画在页面翻页时执行

本文链接：https://blog.youkuaiyun.com/ccj1990528/article/details/44513597

本文介绍了作者在换工作后遇到的移动端翻页效果需求，通过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;