2. 程式人生 > >jq實現滑鼠滾動的時候上下翻頁，動畫在翻頁的時候才會執行

jq實現滑鼠滾動的時候上下翻頁，動畫在翻頁的時候才會執行

阿新 • • 發佈：2019-01-27

        以前一直想自己寫幾篇屬於自己部落格，但是由於工作原因以及一些生活的上的因素，導致一直都沒能如願，今天加班，正好事兒還沒過來，真好留了時間給我寫一篇部落格。

        在上一家公司的時候，主要從事的是移動端的開發，由於基於移動端有了相對來說很成熟的翻頁框架，所以基本上很少會自己寫一些翻頁的效果，以及翻頁的動畫效果，之前的公司的模式更像是外包模式，很忙，也基本沒有時間去自己研究那些框架的搭建和基層程式碼，換公司以後，公司有這個需求，要做一個這樣的效果，然後自己就稍微研究了一下做法，想了一些邏輯來實現，如果有什麼不對的，或者麻煩的，請各位大神幫忙指點。

         話不多說了，開始貼程式碼吧：

<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;
			background:#3d475a;}
			.data-2 .xiebottom{
				position:absolute;
				height:100%;
				width:100%;
				top:100%;
				left:0;
				transform-origin:left top;
				-webkit-transform-origin:left top;
				transform:skewY(-7deg);
				-webkit-transform:skewY(-7deg);
				background:#ff5d43;
				}
			.data-2 .data-2-animation{
				position:absolute;
				width:25%;
				max-width:160px;
				left:10%;
				top:20%;
				}
			.data-2 .data-2-animation .data-2-floatimg{
				position:absolute;
				width:100%;
				height:auto;
				}
				.floatimg2{
					filter:alpha(opacity=0); /*IE濾鏡，透明度50%*/
					-moz-opacity:0; /*Firefox私有，透明度50%*/
					opacity:0;/*其他，透明度50%*/
					}	
		.data-3{top:40%;width:100%;
			height:20%;
			position:absolute;
			overflow:hidden;
			background-color:#ff5d43}
		.data-3 .xiebottom{
			position:absolute;
			height:100%;
			width:100%;
			top:100%;
			left:0;
			transform-origin:right top;
			-webkit-transform-origin:right top;
			transform:skewY(4deg);
			-webkit-transform:skewY(4deg);
			background:#28d5b9;
			}
		
	
			
		.slidethumb{
			position:absolute;
			list-style:none;
			max-width:10px;
			max-height:200px;
			width:1%;
			height:30%;
			top:35%;
			left:95%;
			z-index:3;
			}	
			.slidethumb li{
			list-style:none;
			max-height:200px;
			width:100%;
			margin-bottom:10px;
			text-align:center;
			transition:all .5s;
			}
			.slidethumb li div{
			width:2px;
			height:100%;
			background-color:#FFF;
			margin:0 auto;
			}
			.slidethumb li:hover{
				cursor:pointer;
				box-shadow:inset 0 0 8px #FFFFFF;
			}
			
		
		.data-2-move1{
			position:absolute;
			max-width:120px;
			width:75%;
			height:auto;
			left:13.3%;
			top:0%;
			filter:alpha(opacity=0); /*IE濾鏡，透明度50%*/
			-moz-opacity:0; /*Firefox私有，透明度50%*/
			opacity:0;/*其他，透明度50%*/
			}
		.data-2-move2{
			position:absolute;
			max-width:36px;
			width:25%;
			height:auto;
			left:3%;
			top:30.5%;
			filter:alpha(opacity=0); /*IE濾鏡，透明度50%*/
			-moz-opacity:0; /*Firefox私有，透明度50%*/
			opacity:0;/*其他，透明度50%*/
			}
		
		
		/*新增動畫樣式*/
		.adddata-1-phone{
			animation:data-1-floatimg-floatimg2 3s 1.5s forwards;
			-webkit-animation:data-1-floatimg-floatimg2 3s 1.5s forwards;
			}
				
		.viewpoint a:nth-child(2){
			animation:fadeinout 1s infinite;
			-webkit-animation:fadeinout 1s infinite;
			}
		.adddata-2-move1{
			animation:data-2-move1-slide 2s forwards;
			-webkit-animation:data-2-move1-slide 2s forwards;
			}
		.adddata-2-move2{
			animation:data-2-move2-slide 2s forwards;
			-webkit-animation:data-2-move2-slide 2s forwards;
			}
		
		/*動畫效果*/
		@keyframes data-2-move2-slide{
			from{filter:alpha(opacity=0); /*IE濾鏡，透明度50%*/
					-moz-opacity:0; /*Firefox私有，透明度50%*/
					opacity:0;/*其他，透明度50%*/
					left:3%;
					transform:rotate(0);}
			to{filter:alpha(opacity=100); /*IE濾鏡，透明度50%*/
					-moz-opacity:1; /*Firefox私有，透明度50%*/
					opacity:1;/*其他，透明度50%*/
					left:39.5%;
					transform:rotate(720deg);
					}
			}
		
		@-webkit-keyframes data-2-move2-slide{
			from{filter:alpha(opacity=0); /*IE濾鏡，透明度50%*/
					-moz-opacity:0; /*Firefox私有，透明度50%*/
					opacity:0;/*其他，透明度50%*/
					left:3%;
					transform:rotate(0);}
			to{filter:alpha(opacity=100); /*IE濾鏡，透明度50%*/
					-moz-opacity:1; /*Firefox私有，透明度50%*/
					opacity:1;/*其他，透明度50%*/
					left:39.5%;
					transform:rotate(720deg);
					}
			}
		
		@keyframes data-2-move1-slide{
			from{filter:alpha(opacity=0); /*IE濾鏡，透明度50%*/
					-moz-opacity:0; /*Firefox私有，透明度50%*/
					opacity:0;/*其他，透明度50%*/
					top:0;}
			to{filter:alpha(opacity=100); /*IE濾鏡，透明度50%*/
					-moz-opacity:1; /*Firefox私有，透明度50%*/
					opacity:1;/*其他，透明度50%*/
					top:18%;
					}
			}
		
		@-webkit-keyframes data-2-move1-slide{
			from{filter:alpha(opacity=0); /*IE濾鏡，透明度50%*/
					-moz-opacity:0; /*Firefox私有，透明度50%*/
					opacity:0;/*其他，透明度50%*/
					top:0;}
			to{filter:alpha(opacity=100); /*IE濾鏡，透明度50%*/
					-moz-opacity:1; /*Firefox私有，透明度50%*/
					opacity:1;/*其他，透明度50%*/
					top:18%;
					}
			}
		
		@keyframes data-1-floatimg-floatimg2{
			from{filter:alpha(opacity=0); /*IE濾鏡，透明度50%*/
					-moz-opacity:0; /*Firefox私有，透明度50%*/
					opacity:0;/*其他，透明度50%*/
					left:0;}
			to{filter:alpha(opacity=100); /*IE濾鏡，透明度50%*/
					-moz-opacity:1; /*Firefox私有，透明度50%*/
					opacity:1;/*其他，透明度50%*/
					left:150%;}
			}
		@-webkit-keyframes data-1-floatimg-floatimg2{
			from{filter:alpha(opacity=0); /*IE濾鏡，透明度50%*/
					-moz-opacity:0; /*Firefox私有，透明度50%*/
					opacity:0;/*其他，透明度50%*/
					left:0;}
			to{filter:alpha(opacity=100); /*IE濾鏡，透明度50%*/
					-moz-opacity:1; /*Firefox私有，透明度50%*/
					opacity:1;/*其他，透明度50%*/
					left:150%;}
			}
			
		@keyframes fadeinout{
			0%{filter:alpha(opacity=1); /*IE濾鏡，透明度0%*/
					-moz-opacity:1; /*Firefox私有，透明度0%*/
					opacity:1;/*其他，透明度0%*/
					top:94%;}
			100%{filter:alpha(opacity=0); /*IE濾鏡，透明度50%*/
					-moz-opacity:0; /*Firefox私有，透明度50%*/
					opacity:0;/*其他，透明度50%*/
					top:96%;}
			
			}
		@-webkit-keyframes fadeinout{
			0%{filter:alpha(opacity=1); /*IE濾鏡，透明度0%*/
					-moz-opacity:1; /*Firefox私有，透明度0%*/
					opacity:1;/*其他，透明度0%*/
					top:94%;}
			100%{filter:alpha(opacity=0); /*IE濾鏡，透明度50%*/
					-moz-opacity:0; /*Firefox私有，透明度50%*/
					opacity:0;/*其他，透明度50%*/
					top:96%;}
			
			}
		
</style>
      這裡的css我沒有使用less或者sass進行預處理，只是隨手寫了一下樣式，希望大神可以給一些樣式的規範意見供小弟去參考。

     下面是jq了，首先得引入相應的jq的min包，然後可以開始寫自己的程式碼了

<script>
//滾動滑鼠的時候滑動介面，並執行動畫
$(function(){
	var currentpage=0;//當前的頁面index
	var forepage;//獲取移動之前的頁面
	var slidePage;//獲取第一頁
	var height;//得到第一頁的高度
	var AllPage;//獲取滑動的整體介面
	var allheight;//獲取滑動介面的整個高度
	var top;//獲取滑動整體介面的top屬性值
	var pagecount;//獲取滑動的頁數
	var data2animationheight;
	var htmlholder="";
	//資料初始化
	var init=function(){
		slidePage=$(".data-1");
		height=slidePage.height();
		AllPage=$(".containner");
		allheight=AllPage.height();
		top=AllPage.css("top");
		pagecount=AllPage.find(".page").length;
		data2animationheight=$(".data-2-floatimg").height();
		$(".data-2-animation").height(data2animationheight);
		}
	//生成右邊的滑動欄
	init();
	for(var i=0;i<pagecount;i++){
		htmlholder+="<li><div></div></li>";
		}
		$(".slidethumb").append(htmlholder);
		$(".slidethumb").find("li").css({"height":($(".slidethumb").height()/(pagecount+1))});
	//點選滑動欄會移動
	$(".slidethumb").find("li").click(function(e){
		//console.log($(this).index());
		//$(this).find("div").css({"width":4});
		for(var i=0;i<pagecount;i++){
			if(i==$(this).index()){
				$(this).find("div").css({"width":4});
				}
				else{
					$(".slidethumb li:eq("+i+")").find("div").css({"width":2});
					}
			}
		//console.log($(!this).index());
		forepage=currentpage;
		currentpage=$(this).index();
		if(forepage!=currentpage){
			animation(currentpage);
			setTimeout(function(){removeanimation(forepage);},1000);
			}
		AllPage.animate({'top':'-'+currentpage*height},1000);
		
		})
	//滑動效果
	var slide=function(delta){
		init();
		
		if(currentpage==(pagecount-1)){
					$("#downicon").css({"display":"none"});
					}
				if(currentpage!=(pagecount-1)){
					$("#downicon").css({"display":"block"});
					}
		
		//alert(pagecount);
		if(!AllPage.is(":animated")){
			if(delta<0&¤tpage<pagecount-1){
				AllPage.animate({'top':'-='+height},1000);
				//setTimeout("",1000);
				forepage= currentpage;
				currentpage++;
				
			    setTimeout(function(){removeanimation(forepage);},1000);
				animation(currentpage);
				
				console.log(currentpage);
			}else if(delta>0&¤tpage>0){
				AllPage.animate({'top':'+='+height},1000);
				forepage=currentpage;
				currentpage--;
				setTimeout(function(){removeanimation(forepage);},1000);
				animation(currentpage);
				
				console.log(currentpage);
				}
			}
		}
		//動畫效果
		var animation=function(currentpage){
			for(var i=0;i<pagecount;i++){
				if(i==currentpage){
					$(".slidethumb li:eq("+i+")").find("div").css({"width":4});
					}
					else{
						$(".slidethumb li:eq("+i+")").find("div").css({"width":2});
						}
				}
				switch(currentpage){
					case 1:
						$(".floatimg2").addClass("adddata-1-phone");
						$(".data-2-move1").addClass("adddata-2-move1");
						$(".data-2-move2").addClass("adddata-2-move2");
					break;
					case 2:
						
					break;
					}
			} 
		//移除動畫效果
		function removeanimation(currentpage){
				switch(currentpage){
					case 1:
						$(".floatimg2").removeClass("adddata-1-phone");
						$(".data-2-move1").removeClass("adddata-2-move1");
						$(".data-2-move2").removeClass("adddata-2-move2");
					break;
					case 2:
					break;
					}
			} 
		//滾輪事件
		var wheel=function(event){
				var delta = 0;  //滾動數值
				//ie
				if(!event)
				event = window.event;
				//ie+opera
				else if(event.wheelDelta)
				delta=event.wheelDelta/120;
				//firefox
				else if(event.detail)
				delta=-event.detail/3;
				
				if(delta)
				handle(delta);
			}
		var handle=function(delta){
					slide(delta);
			}
			
		
		//判斷是否支援觸控事件
		var touchcheck=function(){
			try{
				document.createEvent("TouchEvent");
				document.addEventListener('touchstart', touchstartfunc, false);
    			document.addEventListener('touchmove', touchMovefunc, false);
    			document.addEventListener('touchend', touchEndfunc, false);
				}
			catch(e){
				//監聽滾輪事件
				//ff
				if(window.addEventListener){
					window.addEventListener("DOMMouseScroll",wheel,false);
				}
				//ie
				window.onmousewheel=document.onmousewheel=wheel;
				}
			}
			
		//手機上的觸控事件
		var startX=0;
		var startY=0;
		function touchstartfunc(ev){
			var touch=ev.touches[0];
			startX=Number(touch.pageX);
			startY=Number(touch.pageY);
			console.log(startX+" "+startY);
			}	
		function touchMovefunc(ev){
				ev.preventDefault(); //阻止觸控時瀏覽器的縮放、滾動條滾動等
				//alert("Move");
        		var touch = ev.touches[0]; //獲取第一個觸點
        		var x = Number(touch.pageX); //頁面觸點X座標
       		 	var y = Number(touch.pageY); //頁面觸點Y座標
				if(Math.abs(x-startX)<5&&(y-startY)>5){
					slide(1);
					}
				else if(Math.abs(x-startX)<5&&(y-startY)<-5){
					slide(-1);
					}
			}
		//監聽滾輪事件
		//ff
		//if(window.addEventListener){
//			window.addEventListener("DOMMouseScroll",wheel,false);
//			}
//		//ie
//		window.onmousewheel=document.onmousewheel=wheel;
		//監聽螢幕大小的改變
		window.onresize=function(){
			if(currentpage!=0){
				if(!AllPage.is(":animated")){
					AllPage.animate({'top':0},1000);
					//alert(currentpage)
					removeanimation(currentpage);
					animation(0);
					currentpage=0;
					init();
					}
			}
			else{
				init();
				}
			}
	$("#downicon").click(function(e) {
			slide(-1);
    });
		
		animation(currentpage);
		touchcheck();
});
</script>
    這裡的程式碼包含的是手機端和PC端的效果，有判斷手機端還是PC端的，如果是手機端的話會有觸發事件，如果是PC端的話才會有滑鼠的滾輪事件，程式碼還監聽了螢幕大小改變的時候觸發的事件，在變螢幕的大小變化的時候，會將資料進行初始化，避免了因為螢幕大小發生改變而使得翻頁的時候翻動的距離還是之前介面的大小而產生的bug。
    這是小弟第一次寫部落格，有寫的不好的或者不對的，請各位大神指出，我會及時糾正的。謝謝您觀看此部落格。

相關推薦

jq實現滑鼠滾動的時候上下翻頁，動畫在翻頁的時候才會執行

        以前一直想自己寫幾篇屬於自己部落格，但是由於工作原因以及一些生活的上的因素，導致一直都沒能如願，今天加班，正好事兒還沒過來，真好留了時間給我寫一篇部落格。         在上一家公司的時候，主要從事的是移動端的開發，由於基於移動端有了相對來說很成熟的翻頁框

實現滑鼠滾動一下頁面就上下翻一頁的效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <li

MiniUI前臺分頁，假分頁實現源碼

MiniUI 假分頁背景對於數據較少，無需後臺分頁的需求，可使用以下解決方案方案MiniUI提供了監聽事件，特別方便即可實現。源碼mini.parse(); var grid = mini.get("datagridTable"); // 獲取所有數據和總記錄數 { tot

Qt中實現滑鼠一段時間不用，自動隱藏

Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) { ui->setupUi(this); this->setMouseTracking(true);

Android 如何實現帶滾動條的TextView，在更新文字時自動滾動到最後一行

1、主佈局程式碼： <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to

jq實現滑鼠放置名字上顯示詳細內容的氣泡效果

  實現效果如上圖，當滑鼠放置到名字上時，則顯示出內容詳情。 實現具體過程如下： 1、需要加這句js <!--實現滑鼠放置名字上顯示氣泡說明的js--> <script>         $(functi

jQuery實現滑鼠經過圖片上移消失，隨後在下方逐漸顯示出來。

<!DOCTYPE html> <html> <head><title></title><meta charset="utf-8"><style type="text/css">     *

SSM框架實現分頁，返回分頁的JSON資料

先看一下返回的JSON資料： { "pagNum": 1, "pageSize": 5, "totalRecord": 12, "totalPage": 3,

JQ實現無縫滾動

<script type="text/javascript">     var timer = 0; //定時器初始化     var index = 0; //圖片索引值     var left = 714;//圖片的寬度     var $len = $(".box>li").size

Android 如何實現帶滾動條的TextView，在更新文字時自動滾動到最後一行？

如下設定：滾動條為垂直滾動條，並且一直可見（當TextView中的文字行數超過頁面能顯示的範圍之後）。 android:scrollbars="vertical" android:fadeScrollbars="false" 2、在Activity中的onCreate()方法中，使用s

實現：編輯短信，按power鍵鎖屏後，再點亮屏幕，進入的還是編輯短信界面，按返回鍵才會進入解鎖界面。

亮屏 ram flags you creat att msu con sim 描寫敘述：在編輯短信界面按電源鍵鎖屏後，又一次按電源鍵點亮屏幕。並沒有進入到鎖屏界面而是在編輯短信界面。此時短信界面懸浮與鎖屏界面之上。這時按返回鍵關閉編輯短信界面。回到鎖屏界面，是怎樣實

用wow.js實現頁面滾動時觸發animate.css動畫特效

偏移量 true fin 滾動 cdn lock src 代碼 splay 　　　　很高興在2017/10/14發表了自己的第一個博客隨筆，不管你們怎麽想，我自己覺得逼格瞬間高了起來。哈哈哈，哈撒尅。 有時候項目需要一些動畫來提升用戶體驗，吸引用戶註意力。這時wow是個

原生JS和JQ實現div的展開與收齊動畫

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>展開收起</title> <style> * {

這次是分頁，看在我終於會的面子上，算是原創吧，哈哈哈

解釋原理先   分頁，就是將你需要的查詢結果，連同幾個變數，傳到前臺，就是這麼簡單。 舉例說，你需要查詢班級總共人數，以及每個人的詳情， 那麼你還需要額外計算幾個變數，比如，“記錄（也就是班級人數）”的總條數，一頁需要展現幾條（由你自己定）D，還有當前頁 以及總頁數。 總

列表頁到詳情頁，從詳情頁返回之前列表頁的位置

背景： 對於一般採用同樣的技術棧開發的多頁面應用來說，可能遇到的狀況如下： h5上拉重新整理來實現分頁，當有很多頁的話，點選列表某一頁去詳細，然後從詳情返回上一頁，可能重新整理上一頁，位置不能保持，體驗不好 列表使用a連結過去的，詳情使用window.history.go(-1)返回

hibernate 通用分頁，查詢分頁的泛型類

寫在泛型dao層的實現類裡，可以達到寫一次，然後繼承這個實現類，傳入各自的型別就可以達到很高的複用效果，增加開發效率 也可以作為查詢的分頁，自己動態構造查詢的語句，然後對應好傳入的引數，動態構造查詢語句的時候StringBuffer，直接用string型別效率低。 向上具體

js_window.open新標籤頁，當前標籤頁開啟

視窗name值 描述 _blank 預設的，在新視窗開啟連結的url _self 在當前視窗開啟連結url _parent 在父視窗開啟連結url

mybatis邏輯分頁，含分頁導航

mybatis是非常優秀的半orm框架，比hibernate更容易控制，效能也很好，但mybatis官方並沒提供分頁功能，需要自己實現，下面提供一種物理分頁的實現思路： （基於sping、spring mvc、mybatis的整合，將PO） 1. 編寫一個Pagina

JQ實現點選返回頂部（有動畫過渡）

$(function(){ //當滾動條的位置處於距頂部100畫素以下時，跳轉連結出現，否則消失 $(function () { $(window).scroll(function(){ if ($(window).sc

JQuery AJAX 分頁，跳頁下一頁，上一頁【總結了一天啊乾貨】

網上的分頁基本有問題，自己總結下：程式碼如下<script type="text/javascript"> var pagesi = "2";//每頁行數 var totalPage = "0";//總頁數 var currentPage = "1";//當前頁