(4)关于整屏滚动的一些想法

一,其中元素的尺寸大小

    html结构:

        <html>

            <body>

                <ul>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                </ul>

            </body>

        </html>

     css中,关于关于整屏滚动百分比尺寸,很重要的一点:

            html,body,ul,ul li{width:100%;

                      height:100%;}

      其中,html,body,ul,ul li这四个点,一个都不能少,少了一个,整个页面就没效果了。

                     

时间: 2024-10-11 11:49:43

(4)关于整屏滚动的一些想法的相关文章

整屏滚动的讲解

今天写的是整屏滚动的内容,最近奶糖饱受Vue的折磨,之前学习js的时候就没认真学,知道这一个月的后台学习下来我才知道js和jq是如此的可爱,好了闲话不扯进入今天的主体. 首先是我们的布局部分 //有了身体,我们还是得给他设置点样式属性,毕竟得有情怀 <style> * {margin: 0; padding: 0;}button {background: #3498db; color: #fff; font-size: 14px; text-align: center; width: 60px

整屏滚动

最近一周写了一个pc端自适应的下载推广页面. 第一次做自适应的页面,在此记录一些体会. 首先我拿到的AI设计图纸是1920*1080的分辨率的. 和普通的定宽页面相比,在自适应的页面中,宽度设定为100%,高度需要通过js调节,通过获取视口的高度.再为每一个整屏页面赋值.在项目中我设定页面的最小高度为600px.pc端大概也没有分辨率低于这个数字的了吧. var height = window.innerHeight || document.documentElement.clientHeigh

fullPage教程 -- 整屏滚动效果插件 fullpage详解

1.引用文件 [html] view plain copy print?在CODE上查看代码片派生到我的代码片 <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></

视差滚动学习笔记(1):整屏滚动

转载请注明出处: 猩猩队长  http://www.cnblogs.com/wayns/p/parallax_study_page_scroll.html 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为2014年网页设计的热点趋势,越来越多的网站应用了这项技术.http://www.awwwards.com/top-10-web-design-topics-of-2014.html 这里有一些在awwwards上获

整屏滚动效果 jquery.funnPage.js插件+CSS3实现

最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: 首先使用要引入插件 <link rel="stylesheet" href="../c/jquery.fullPage.css" media="all"/> <script type="text/javascript" src="../j/l

鼠标滚轮事件实现整屏滚动

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> *{ margin:0; padding:0; } html,body{ width:100%; height:100%; position:relative; overflow:hidden; } .box{ width:100%; height:

CSS3实现整屏切换效果

总是能看见非常多广告或者站点都是使用整屏滚动的效果,一直看着都心痒痒,想自己也实现一个.近期刚学习到css3的动画效果,所以尝试使用css3做了一个整屏切换. 页面结构 实现思路与大众方法相似.如图 每一个section就是一页内容.它的大小充满了屏幕(红色区域).一个container由多个section构成,我们通过改变container的位置,来达到页面切换的效果. container向下走.页面好像上移了,container向上走,页面就下移了. html结构例如以下: <!DOCTYP

移动端页面开发

移动端页面开发 移动客户端的开发类型(站在前端立场上来说),主要是三种:Native App(原生APP),也就是完全使用移动设备系统语言写的客户端,iPhone iPad就是纯Object-C,安卓就是纯JAVA, 是性能最棒的开发方式,但灵活性不好.Web App, 就是在移动浏览器里打开的,纯HTML+CSS+JS,说白了就是个网页,只不过非常的富应用,比如手机浏览器访问的GMAIL.就是在浏览器里打开的页面.IOS支持可以在桌面创建访问的快捷方式,但是说到底还是打开Safari跑.而且对

移动端JS事件、移动端框架

一.移动端的操作方式和PC端是不同的,移动端主要是用手指操作,所以有特殊的touch事件,touch事件包括如下几个事件: 1.手指放到屏幕上时触发   touchstart 2.手指放在屏幕上滑动式触发    touchmove 3.手指离开屏幕时触发.  touchend 4.系统取消touch事件的时候触发,比较少用.  touchcancel 二.移动端一般有三种操作:点击.滑动.拖动,这三种操作一般是组合使用上面的几个事件来完成的,所有上面的4个事件一般很少单独使用,一般是封装使用来实