您的位置：首页 > 其它

【划屏/滚屏】划屏/滚屏效果demo 分类： 划屏 划屏效果 划屏demo 2015-06-03 14:48 27人阅读 评论(0) 收藏

2015-06-03 14:48 465 查看
针对大于特定尺寸的显示器实现划屏效果（手机、平板不用划屏效果）的demo

demo中是4屏相互切换，并且能循环切换

以下demo源码也可以通过以下地址下载：
http://download.csdn.net/detail/snow_finland/8767943 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>test1</title>
<style type="text/css">
html,body,div,p,span,ul,li{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
height:100%;
}
.header{
position: fixed;
height: 40px;
top: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
}
.screen{
height:800px;
}
.screen1,.screen3{
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
}
.screen1{
background: #ffffff url("bg1.jpg") no-repeat scroll center top;
}
.screen2{
background-color: #ffffff;
}
.screen3{
background: #ffffff url("bg3.jpg") no-repeat scroll center top;
}
.screen4{
background-color: #323232;
}

.page_animate .screens_outer{
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.page_animate .screens{
height: 100%;
width: 100%;
position: absolute;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.page_animate .screen{
height: 100%;
width: 100%;
position: absolute;
}
.page_animate .screen1{
top: 0%;
}
.page_animate .screen2{
top: 100%;
}
.page_animate .screen3{
top: 200%;
}
.page_animate .screen4{
top: 300%;
}

.page_animate .animate1{
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
}
.page_animate .animate2{
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.page_animate .animate3{
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
}
.page_animate .animate4{
-webkit-transform: translateY(-300%);
-moz-transform: translateY(-300%);
-ms-transform: translateY(-300%);
transform: translateY(-300%);
}
</style>
</head>

<body>
<div class="header">
</div>
<div class="screens_outer">
<div class="screens" id="J_screens">
<div class="screen screen1">
</div>
<div class="screen screen2">
</div>
<div class="screen screen3">
</div>
<div class="screen screen4">
</div>
</div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
var scroll_screen = {
animate_arr : ['animate2','animate3','animate4','animate1'],
scrollEnable : true,
animate : true,
device : 0,
window_w : $(window).width(),
window_h : $(window).height(),
lastTime : null,
check_window : function(){
var self = this;
self.window_w = $(window).width();
self.window_h = $(window).height();

// 窗口小于定值不用滚屏
if(self.window_w > 640 && self.window_h >= 600){
self.animate = true;
}else{
self.animate = false;
}
},
init : function(){
var self = this;
self.check_window();

// IE10以下不用滚屏（IE10以下不完全兼容CSS3）
var ua = navigator.userAgent;
if(ua.indexOf("MSIE 6.0")>0 || ua.indexOf("MSIE 7.0")>0 || ua.indexOf("MSIE 8.0")>0 || ua.indexOf("MSIE 9.0")>0){
self.animate = false;
}

// 手机、平板不用滚屏
if(ua.match('iPad') || ua.match('iPhone') || ua.match('iPod')){
self.device = 1;
}else if(ua.match('Android')){
self.device = 2;
}else{
self.device = 0;
}

if(self.device != 0){
self.animate = false;
}

self.check_animate();
},
check_animate : function(){
var self = this;
if(self.animate){
$('body').addClass('page_animate');
}else{
$('body').removeClass('page_animate');
}
},
window_resize : function(){
var self = this;
self.check_window();
self.check_animate();
},
preventScroll : function(delay){
var self = this;
self.scrollEnable = false;
if(delay){
setTimeout(function(){
self.scrollEnable = true;
}, delay);
}
},
move : function(delta){
var self = this;
if( self.scrollEnable == true ){
var temp_ani;
// Define next screen
if( delta < 0 ){
temp_ani = self.animate_arr.shift();
self.animate_arr.push(temp_ani);
} else {
temp_ani = self.animate_arr.pop();
self.animate_arr.unshift(temp_ani);
}

// Disable scrolling for defined ms
self.preventScroll(1000);

// Update classes in DOM for animation and active pagination
$('#J_screens').attr('class', 'screens '+temp_ani);

}
}
};
$(document).ready(function(){
scroll_screen.init();
});
$(window).resize(function(){
scroll_screen.window_resize();
});
$(document).bind({
// Mouse Scroll
// IE、Chrome：mousewheel
// FireFox：DOMMouseScroll
'mousewheel DOMMouseScroll' : function(e) {
if( scroll_screen.animate ){
// IE、Chrome：event.wheelDelta（向下滚动为负值）
// FireFox：event.detail（向下滚动为正值）
var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail,
time = new Date().getTime();
if(time - scroll_screen.lastTime < 1000) {
return;
}
scroll_screen.move(delta);
scroll_screen.lastTime = time;
}
},
// Keypress - Up/Left and Down/Right Arrows
keydown : function(e){
if( scroll_screen.animate ){
switch(e.which) {
case 37:
case 38:
scroll_screen.move(1);
break;
case 39:
case 40:
scroll_screen.move(-1);
break;
default:
return;
}
}
}
});
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航