【划屏/滚屏】划屏/滚屏效果demo 分类：划屏 ...

最新推荐文章于 2020-12-31 05:30:41 发布

weixin_30825581

最新推荐文章于 2020-12-31 05:30:41 发布

阅读量109

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/snow-finland/p/4690154.html

版权

针对大于特定尺寸的显示器实现划屏效果（手机、平板不用划屏效果）的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>

转载于:https://www.cnblogs.com/snow-finland/p/4690154.html

weixin_30825581

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【划屏/滚屏】划屏/滚屏效果demo 分类：划屏 ...

针对大于特定尺寸的显示器实现划屏效果（手机、平板不用划屏效果）的demodemo中是4屏相互切换，并且能循环切换以下demo源码也可以通过以下地址下载：http://download.csdn.net/detail/snow_finland/8767943<!DOCTYPE html><html><head>&l...
复制链接

扫一扫