美文网首页
网页特效练习(2)

网页特效练习(2)

作者: 天使投资 | 来源:发表于2018-05-30 09:42 被阅读0次

1.中部导航吸顶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border:none
        }
        img{
            vertical-align: top;
            width: 100%;
        }

        section{
            width: 70%;
            margin: 0 auto;
        }

        .nav{
            position: fixed;
            left: 0;
            top:0;
            width: 100%;
        }

    </style>
</head>
<body>
   <header id="head">
       <img src="images/top.png" alt="">
   </header>
   <nav id="nav">
       <img src="images/nav.png" alt="">
   </nav>
   <section>
       <img src="images/body01.png" alt="">
       <img src="images/body02.png" alt="">
   </section>

<script src="js/myFunc.js"></script>
<script>
    window.onload = function () {
        // 1. 求出offsetHeight
        var nav_top_height = $("nav").offsetTop;

        // 2. 监听窗口滚动
        window.onscroll = function () {
            var scroll_top_height = scroll().top;
            console.log(scroll_top_height);

            // 2.1 判断
            if(scroll_top_height >= nav_top_height){
                 $("nav").className = "nav";
            }else {
                $("nav").className = "";
            }
        }
    }
</script>
</body>
</html>

侧边横幅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border:none
        }

        #aside{
            width: 150px;
            position: absolute;
            left: 0;
            top: 150px;
        }

        #aside img{
            width: 100%;
        }

        p{
            height: 50px;
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="aside">
        <img src="images/float.jpg" alt="">
    </div>

    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
    <p>上课要好好听课!下课要好好复习!不要打游戏!</p>

<script src="js/myFunc.js"></script>
<script>
    window.onload = function () {
        // 1. 获取广告头部的高度
        var offset_top = $('aside').offsetTop;

        // 2. 监听窗口的滚动
        var begin = 0, end = 0, timer = null;
        window.onscroll = function () {
            // 2.0 清除定时器
            clearInterval(timer);

            // 2.1 获取滚动的高度
            var scroll_top = scroll().top;
            end = offset_top + scroll_top;

            // 2.2 缓动动画
            timer = setInterval(function () {
                 begin = begin + (end - begin) * 0.2;
                 $("aside").style.top = begin + "px";

                console.log(begin, end);
                // 清除定时器
                if(Math.round(begin) === end){
                    clearInterval(timer);
                }

            }, 20);
        }
    }
</script>
</body>
</html>

3.返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
   <style>
       * {
           margin: 0;
           padding: 0;
           list-style: none;
           border: none;
       }

       body {
           background-color: #ccc;
       }

       p {
           margin-bottom: 20px;
           text-align: center;
       }

       #top {
           width: 43px;
           height: 43px;
           background: url("images/top.png") no-repeat;
           background-size: 100% 100%;
           position: fixed;
           right: 10px;
           bottom: 30px;
           display: none;
       }
   </style>
</head>
<body>
<span id="top"></span>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<p>今天天气很好!</p>
<script src="js/myFunc.js"></script>
<script>
   window.onload = function () {
       // 0. 变量
       var scroll_top = 0, begin = 0, end = 0, timer = null;

       // 1. 监听窗口的滚动
       window.onscroll = function () {
           // 1.1 获取滚动的高度
           scroll_top = scroll().top;
           // 1.2 显示和隐藏
           scroll_top > 0 ? show($('top')) : hide($('top'));
           begin = scroll_top;
       };

       // 2. 监听点击
       $("top").onclick = function () {
            // 2.1 清除定时器
           clearInterval(timer);

           // 2.2 开启缓动动画
           timer = setInterval(function () {
               begin = begin + (end - begin) / 20;
               window.scrollTo(0, begin);

               // 2.3 清除定时器
               console.log(begin, end);
               if(Math.round(begin) === end){
                   clearInterval(timer);
               }
           }, 20);
       }
   }
</script>
</body>
</html>

4.onresize

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="js/myFunc.js"></script>
<script>
    // 当屏幕的宽度>=960时，页面的背景颜色为红色；当屏幕的宽度>=640时，页面的背景颜色为蓝色；当屏幕的宽度<640时，页面的背景颜色为绿色？
    window.onload = function () {

        var bgColor;

        /*console.log('' + changeColor());
        console.log('' + changeColor);*/

        changeColor();

        window.onresize = changeColor;

        function changeColor() {
            if(client().width >= 960){
                bgColor = 'red';
            }else if(client().width >= 640){
                bgColor =  'blue';
            }else {
                bgColor =  'green';
            }
            document.body.style.backgroundColor = bgColor;
        }
    }
</script>
</body>
</html>

相关文章

  • 网页特效练习(2)

    1.中部导航吸顶 侧边横幅 3.返回顶部 4.onresize

  • 网页特效练习(1)

    1.手风琴相册 知识点1：a标签的伪类选择器 :link 修改从未被访问过状态下的样式:visited 修改被访问...

  • 网页特效2

    1 复习 offset 自己的 偏移offsetWidth 得到自己的宽度offsetHeight构成 ...

  • js网页特效-2

    js特效 - Day2 一、水平滚动条 和 垂直滚动条 1.1 核心技术点 1）求滚动条的长度？ 2）拖动滚动条，...

  • JavaScript的用途和基本语法

    javaScript用途： 1、 数据校验 2、 网页特效 3、数据交互（ajax） g...

  • 第八节 特效、选择器、过滤器

    1、特效 网页显示： 2 、基本选择器 3、层级选择器 网页显示： 4、筛选器 网页显示： 5、筛选器（conta...

  • 网页特效

    元素偏移量offset系列 动态获取元素的偏移 获取元素距离带有定位父元素的位置 获取元素的自身大小 返回的数值都...

  • 前端学习网站

    1、博客园(http://www.cnblogs.com/) 2、网页特效(http://www.csrcode....

  • 网站推荐 (不定时更新)

    1.网页设计 jQuery插件库：JS特效,网页特效,以及各种html5,css3动画和效果Bootstrap，来...

  • 前端编程学习网址

    一、前端 1、博客园(http://www.cnblogs.com/) 2、网页特效(http://www.csr...

网友评论

      本文标题：网页特效练习(2)

      本文链接：https://www.haomeiwen.com/subject/quftsftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|网页特效练习(2)|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！