【划屏/滚屏】划屏/滚屏效果demo

最新推荐文章于 2021-01-06 10:23:48 发布

VIP文章 snow_finland

最新推荐文章于 2021-01-06 10:23:48 发布

阅读量853

点赞数

分类专栏：划屏效果划屏demo 划屏文章标签：划屏划屏效果划屏demo

本文链接：https://blog.csdn.net/snow_finland/article/details/46345359

版权

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

最低0.47元/天解锁文章

snow_finland

关注

0
点赞
踩
0

收藏

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

针对大于特定尺寸的显示器实现划屏效果（手机、平板不用划屏效果）的demodemo中是4屏相互切换，并且能循环切换以下demo源码也可以通过以下地址下载：http://download.csdn.net/detail/snow_finland/8767943test1html,body,div,p,span,ul,li{ margin: 0;
复制链接

扫一扫