<!DOCTYPE html>
<html>
<head>
<TITLE>jQuery鼠标滚动全屏3D翻转动画切换代码</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><script src="/demos/googlegg.js"></script>
<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>更多源码下载：<a href="http://www.96flw.com" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
jQuery鼠标滚动全屏3D翻转动画切换代码.zip
版权申诉
59 浏览量
2023-09-21
00:26:32
上传
评论
收藏 41KB ZIP 举报
jQuery鼠标滚动全屏3D翻转动画切换代码.zip （7个子文件） 
js 
mousewheel.js 3KB cubeTransition.js 2KB jquery.touchSwipe.js 11KB jquery.min.js 90KB
index2.html 940B css style.css 3KB index.html 2KB资源评论
