头像

HTML5+CSS3+JavaScript分屏屏幕滑块

来源:http://www.sucaihuo.com/js/3114.html 素材火管理员 2017-09-29 23:25浏览(1870) 收藏

一款HTML5+CSS3+JavaScript分屏屏幕滑块,通过鼠标的左右移动来显示分屏屏幕两个的不同内容,整体效果非常的大气漂亮。
HTML5+CSS3+JavaScript分屏屏幕滑块

程序员,你不是一个人;网站开发QQ群:436471830,在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 27 下载资源 下载积分: 20 积分

页面的head部分,需引入页面的样式文件,代码如下:

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

页面的body部分,在section标签里并列放入了两个div的嵌套结构,分别显示分屏两侧的不同内容,代码如下:

<section id="wrapper" class="skewed">
    <div class="layer bottom">
        <div class="content_wrapper">
            <div class="content_body">
                <h2>iphoneX-front</h2>
                <p>一直以来,我们都心存一个设想,期待着能够打造出这样一部 iPhone:它有整面的屏幕,能让你在使用时完全沉浸其中,仿佛忘记了它的存在。它是如此智能,你的一触、一碰、一言、一语,哪怕是轻轻一瞥,都会得到它心有灵犀的回应。而这个设想,终于随着 iPhone X 的到来成为了现实。现在,就跟未来见个面吧。
                </p>
            </div>
            <img src="img/front.png">
        </div>
    </div>
    <div class="layer top">
        <div class="content_wrapper">
            <div class="content_body">
                <h2>iphoneX-back</h2>
                <p>一直以来,我们都心存一个设想,期待着能够打造出这样一部 iPhone:它有整面的屏幕,能让你在使用时完全沉浸其中,仿佛忘记了它的存在。它是如此智能,你的一触、一碰、一言、一语,哪怕是轻轻一瞥,都会得到它心有灵犀的回应。而这个设想,终于随着 iPhone X 的到来成为了现实。现在,就跟未来见个面吧。
                </p>
            </div>
            <img src="img/back.png">
        </div>
    </div>
<div class="handle"></div>
</section>

页面的底部,需引入必要的JS文件,代码如下:

<script type="text/javascript" src="js/main.js"></script>
评论14
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 13楼
    05-11 15:03
    Sa*** ♚
    炫酷的效果,非常棒,下载来看看
  • 头像 12楼
    03-08 08:52
    yu***赫赫
    好看好看这个效果可以
  • 头像 11楼
    01-28 17:25
    SH***RO
    很炫的效果啊,果断下载了
  • 头像 10楼
    12-30 23:29
    蕃***薯
    很好,很酷
  • 头像 9楼
    12-08 10:22
    一***魔
    这个效果非常好
  • 头像 8楼
    10-31 22:28
    su***ee
    这个看上去好棒啊
  • 头像 7楼
    10-31 14:40
    11***11
    这个效果可以。值得模仿一下。
  • 头像 6楼
    10-30 14:50
    u_***16
    这个效果真厉害!!!!!!!!!!!!!!!!!!!!!!!
  • 头像 5楼
    10-14 09:25
    11***11
    这效果6的一匹啊。
  • 头像 4楼
    10-07 20:52
    ho***73
    这个效果确实不赖
1 2