jQuery鼠标滚动3D翻转切换代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标滚动3D翻转切换代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<TITLE>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<link href="css/style.css" rel="stylesheet" />
<style>

.page4 h2{
margin:auto !important;
position:absolute !important;
top:0 !important;left:0;bottom:0;right:0;
height:100px;
transform:none;
transition:all 3s;
}
.ani{
transform:scale(3) rotate(360deg) !important;
}</style>

<script src='js/jquery.min.js'></script>

</head>
<body>

<div id="cubeTransition">
<div class="page1"><h2>cubeTransition.js</h2></div>
<div class="page2"><h2 style='display:none'>Elegant,</h2></div>
<div class="page3"><h2 style='position:absolute;left:0px;top:-150px'>exected!</h2></div>
<div class="page4"><h2>Simple.</h2></div>
</div>

<ul id="bullets"></ul>

<div class="credit">a simple demo for cubeTransition.js</div>

<script>
function animationIn(i){
console.log(i,'i\'m in')
switch(i) {
    case 1:
        $('.page2 h2').fadeIn();
        break;
    case 2:
        $('.page3 h2').animate({top:'40%',left:'30%'},1000);
        break;
	case 3:
			   setTimeout(function(){
		 $('.page4 h2').addClass('ani')
		 console.log('hhh')
		},0)
        break;
    default:
        ;
}
}

function animationOut(i){
console.log(i,'i\'m out')
switch(i) {
    case 1:
        $('.page2 h2').fadeOut();
        break;
    case 2:
        $('.page3 h2').animate({top:0,left:0},1000);
        break;
	case 3:
        $('.page4 h2').removeClass('ani')
        break;
    default:
        ;
}
}
</script>
<script src='js/mousewheel.js'></script>
<script src="js/jquery.touchSwipe.js"></script>
<script src="js/cubeTransition.js"></script>
</body>
</html>

HTML代码(index2.html):

<!DOCTYPE html>
<html>
<head>
<TITLE>cubeTransition.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="css/style.css" rel="stylesheet" />
<script src='js/jquery.min.js'></script>
</head>
<body>
<div id="cubeTransition">
<div class="page1"><h2>cubeTransition.js</h2></div>
<div class="page2"><h2>Elegant,</h2></div>
<div class="page3"><h2>exected!</h2></div>
<div class="page4"><h2>Simple.</h2></div>
</div>
<ul id="bullets"></ul>
<div class="credit">a simple demo for cubeTransition.js</div>
<script>
function animationIn(i){
console.log(i,'i\'m in')
}
function animationOut(i){
console.log(i,'i\'m out')
}
</script>
<script src='js/mousewheel.js'></script>
<script src="js/jquery.touchSwipe.js"></script>
<script src="js/cubeTransition.js"></script>
</body>
</html>

JS代码(mousewheel.js):

!function(a){
	"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}
(function(a){
	function b(b){
	var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;
	if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){
	if(1===g.deltaMode){
	var q=a.data(this,"mousewheel-line-height");
	j*=q,m*=q,l*=q}
else if(2===g.deltaMode){
	var r=a.data(this,"mousewheel-page-height");
	j*=r,m*=r,l*=r}
if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){
	var s=this.getBoundingClientRect();
	o=b.clientX-s.left,p=b.clientY-s.top}
return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}
}
function c(){
	f=null}
function d(a,b){
	return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}
var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;
	if(a.event.fixHooks)for(var j=g.length;
	j;
	)a.event.fixHooks[g[--j]]=a.event.mouseHooks;
	var k=a.event.special.mousewheel={
	version:"3.1.12",setup:function(){
	if(this.addEventListener)for(var c=h.length;
	c;
	)this.addEventListener(h[--c],b,!1);
	else this.onmousewheel=b;
	a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))}
,teardown:function(){
	if(this.removeEventListener)for(var c=h.length;
	c;
	)this.removeEventListener(h[--c],b,!1);
	else this.onmousewheel=null;
	a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")}
,getLineHeight:function(b){
	var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();
	return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16}
,getPageHeight:function(b){
	return a(b).height()}
,settings:{
	adjustOldDeltas:!0,normalizeOffset:!0}
}
;
	a.fn.extend({
	mousewheel:function(a){
	return a?this.bind("mousewheel",a):this.trigger("mousewheel")}
,unmousewheel:function(a){
	return this.unbind("mousewheel",a)}
}
)}
);

CSS代码(style.css):

*{margin:0;padding:0;}
html,body{overflow:hidden;height:100%;background-color:#fefefe;font-family:Helvetica,sans-serif;font-size:16px;color:#fff;}
#cubeTransition{position:relative;width:100%;height:100%;-webkit-perspective:1200px;-moz-perspective:1200px;perspective:1200px;}
#cubeTransition div{min-height:100%;width:100%;position:absolute;top:0;left:0;backface-visibility:hidden;transform:translate3d(0,0,0);transform-style:preserve-3d;font-size:5em;color:#fff;display:none;}
#cubeTransition h2{position:relative;top:200px;margin:0;font-size:1.5em;text-align:center;text-shadow:1px 1px 0px rgba( 0,0,0,0.1 );}
.page1{background:#89b32f;}
.page2{background:#dc6c5f;}
.page3{background:#64b9d2;}
.page4{background:green;}
.top{z-index:9999}
.rotateCubeTopOut{transform-origin:50% 100%;animation:rotateCubeTopOut .6s both ease-in;}
.rotateCubeTopIn{transform-origin:50% 0%;animation:rotateCubeTopIn .6s both ease-in;}
.rotateCubeBottomOut{transform-origin:50% 0%;animation:rotateCubeBottomOut .6s both ease-in;}
.rotateCubeBottomIn{transform-origin:50% 100%;animation:rotateCubeBottomIn .6s both ease-in;}
@keyframes rotateCubeTopOut{50%{animation-timing-function:ease-out;transform:translateY(-50%) translateZ(-200px) rotateX(45deg);}
100%{opacity:.3;transform:translateY(-100%) rotateX(90deg);}
}
@keyframes rotateCubeTopIn{0%{opacity:.3;transform:translateY(100%) rotateX(-90deg);}
50%{animation-timing-function:ease-out;transform:translateY(50%) translateZ(-200px) rotateX(-45deg);}
}
@keyframes rotateCubeBottomOut{50%{animation-timing-function:ease-out;transform:translateY(50%) translateZ(-200px) rotateX(-45deg);}
100%{opacity:.3;transform:translateY(100%) rotateX(-90deg);}
}
@keyframes rotateCubeBottomIn{0%{opacity:.3;transform:translateY(-100%) rotateX(90deg);}
50%{animation-timing-function:ease-out;transform:translateY(-50%) translateZ(-200px) rotateX(45deg);}
}
#bullets{position:absolute;width:100%;bottom:20px;padding:0;margin:0;text-align:center;}
#bullets li{display:inline-block;width:20px;height:20px;border-radius:50%;margin:0 3px;background:rgba( 255,255,255,0.5 );box-shadow:0px 0px 4px rgba( 0,0,0,0.2 );cursor:pointer;-webkit-tap-highlight-color:rgba( 0,0,0,0 );}
#bullets li:hover{background:rgba( 255,255,255,0.8 );}
#bullets li.active{cursor:default;background:#fff;}
.credit{position:absolute;bottom:24px;right:24px;margin:0;z-index:1;font-size:0.9em;}
.credit a{color:#fff;font-weight:bold;text-decoration:none;}
@media screen and (max-width:500px){body{font-size:10px;}
#cubeTransition h2{font-size:1em;}
.bullets li{margin:0 6px;}
.credit{bottom:initial;top:10px;right:10px;}
.share,.github-ribbon{display:none;}
}

附件:下载该文件资源,减少时间成本(增值服务)