• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

JavaScript网页特效

互联网 diligentman 2小时前 1次浏览

JavaScript网页特效


目录

    • JavaScript网页特效
    • 一、元素偏移量offest系列
    • 二、元素可视区client系列
    • 三、元素滚动scroll系列
    • 四、案例:放大镜效果

一、元素偏移量offest系列

1、offest:offset的含义是偏移量,使用offset的相关属性可以动态地获取该元素的位置、大小等
JavaScript网页特效2、获取鼠标位置:鼠标指针在盒子内的坐标位置示意图如下:
JavaScript网页特效案例演示:获取鼠标指针在盒子内的坐标

<style>
    #box {
        background-color: aquamarine;
        width: 200px;
        height: 200px;
        position: absolute;
        left: 50px;
        top: 20px;
    }
</style>
<body>
    <div id="box"></div>
    <script>
        console.log('宽度'+box.offsetWidth)
        console.log('高度'+box.offsetHeight)
        //给box绑定鼠标移动事件
        box.onmousemove = function(e){  //参数e表示事件对象,在这里表示MouseEvent
            //获取box的偏移量
            var left = box.offsetLeft
            var top = box.offsetTop
            // console.log('顶部偏移量'+top)
            // console.log('左边偏移量'+left)
            //获取鼠标指针在盒子内部的坐标
            var x = e.pageX - left
            var y = e.pageY - top
            console.log(x,y)
        }
    </script>
</body>

3、offest与style的区别
JavaScript网页特效案例:模态框拖曳效果
JavaScript网页特效

<style>
    /* 第1部分,遮罩层样式 */
    .login-bg{   
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #ccc;
        display: none;
    }
    /* 第2部分,模态框样式 */
    .modal{
        /* 模态框页面居中显示 */
        width: 500px;
        height: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: none;
        box-shadow: 0px 0px 20px #ddd;
        z-index: 999;
        cursor: move;
    }
    .modal form{
        /* 表单结构 */
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
    }
    .modal form .item1{
        /* 表单标题 */
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
    }
    .modal form .item2{
        /* 表单输入框 */
        margin: 0 auto;
        width: 70%;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    .username{
        margin-left: 16px;
    }
    .vip{
        border: 1px solid #ccc;
        border-radius: 20px;
        padding: 3px 40px;
        background-color: orange;
        color: #fff;
    }
    .close{
        /* 关闭按钮 */
        position: absolute;
        right: -10px;
        top: -10px;
        border: 1px solid #ccc;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 17px;
        border-radius: 50%;
        background-color: white;
    }
    /* 第3部分,单击弹出遮罩层部分样式 */
    .login-header{
        width: 100%;
        text-align: center;
        font-size: 20pt;
        position: absolute;
    }
</style>
<body>
    <div class="login-bg"></div>  <!-- 遮罩层 -->
    <!-- 模态框 -->
    <div class="modal">
        <form>
            <div class="item1">登录会员</div>
            <div class="item2">
                <div class="username">
                    <label for="username">用户名</label>
                    <input type="text" name="username">
                </div>
                <div class="username">
                    <label for="password">登录密码</label>
                    <input type="text" name="password">
                </div>
            </div>
            <div class="item1">
                <div class="vip">登录会员</div>
            </div>
        </form>
        <!-- 模态框关闭按钮 -->
        <div class="close">x</div>
    </div>
    <!-- 单击弹出遮罩层 -->
    <div class="login-header">单击,请登录会员...</div>
    <script>
        // 获取元素对象
      var modal = document.querySelector('.modal');
      var close = document.querySelector('.close');
      var login = document.querySelector('.login-header');
      var bg = document.querySelector('.login-bg');
      // 单击弹出遮罩层和模态框
      login.addEventListener('click', function () {
        modal.style.display = 'block';
        bg.style.display = 'block';
        modal.style.backgroundColor = 'white';
      });
      // 单击关闭模态框
      close.addEventListener('click', function () {
        modal.style.display = 'none';
        bg.style.display = 'none';
      });
      // 拖动模态框
      modal.addEventListener('mousedown', function (e) {
            // 当鼠标按下,获取鼠标在模态框中的坐标;
            var x = e.pageX - modal.offsetLeft;
            var y = e.pageY - modal.offsetTop;
            // 定义事件回调函数
            var move = function (e) {
            modal.style.left = e.pageX - x + 'px';
            modal.style.top = e.pageY - y + 'px';
            };
            // 鼠标按下,触发鼠标移动事件
            document.addEventListener('mousemove', move);
            // 鼠标抬起,移除鼠标移动事件
            document.addEventListener('mouseup', function (e) {
            document.removeEventListener('mousemove', move);
            });
      });
    </script>
</body>

二、元素可视区client系列

1、client:客户端,通过使用client系列的相关属性可以获取元素可视区的相关信息
JavaScript网页特效2、获取client元素
JavaScript网页特效

<div>我是内容...</div>
<style>...(省略了样式代码)</style>
<script>
  var div = document.querySelector('div');
  console.log(div.clientHeight);console.log(div.clientTop);
  console.log(div.clientLeft);
</script>

三、元素滚动scroll系列

1、scroll含义:scroll的含义是滚动,使用scroll系列的相关属性可以动态地获取该元素的滚动距离、大小等
JavaScript网页特效案例:固定侧边栏效果

<style>
    div{
        width: 200px;
        height: 200px;
        border: 5px solid red;
        background-color: yellow;
        overflow: auto;
        padding: 10px;
        color: violet;
    }
</style>
<body>
    <div>
        北京大学北京大学北京大学北京大学
        北京大学北京大学北京大学北京大学
        北京大学北京大学北京大学北京大学
        北京大学北京大学北京大学北京大学
        北京大学北京大学北京大学北京大学
        北京大学北京大学北京大学北京大学
        北京大学北京大学北京大学北京大学
        北京大学北京大学北京大学北京大学
        北京大学北京大学北京大学北京大学
        北京大学北京大学北京大学北京大学
    </div>
    <script>
        var div = document.querySelector('div');
        console.log('滚动条的高度:'+div.scrollHeight);
        console.log('滚动条的宽度:'+div.scrollWidth);
        console.log('被卷的左侧距离:'+div.scrollLeft);
        console.log('被卷的上方距离:'+div.scrollTop);
        div.onscroll = function(){
            console.log('被卷的左侧距离'+div.scrollLeft)
            console.log('被卷的上方距离'+div.scrollTop)
        }
    </script>
</body>

四、案例:放大镜效果

<style>
    /* 图片预览区域 */
    .preview_img {
        position: absolute;
        border: 1px solid #ccc
      }
      /* 放大镜 */
      .mask {
        display: none;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: red;
        opacity: 0.5; /*设置透明度*/
        position: absolute;
      }
      /* 大图片外部盒子 */
      .big {
        display: none;
        width: 500px;
        height: 600px;
        position: absolute;
        left: 600px;
        top: 0;
        border: 2px solid #ccc;
        overflow: hidden;
      }
      /* 大图片 */
      .bigIMg {
        position: absolute;
      }
</style>
<body>
    <!-- 图片预览区域 -->
    <div class="preview_img">
        <!-- 图片 -->
        <img src="../img/phone.png">
        <!-- 放大镜 -->
        <div class="mask"></div>
        <!-- 展示放大后图片效果 -->
        <div class="big">
          <img src="../img/bigphone.png" class="bigIMg">
        </div>
    </div>
    <script>
           // 获取元素对象
      var mask = document.querySelector('.mask'); //放大镜的div
      var preview = document.querySelector('.preview_img'); //原始图片所在的div
      var big = document.querySelector('.big');//原始图片
      var bigIMg = document.querySelector('.bigIMg'); //大图片
      // 当鼠标移动的时候
      preview.onmousemove = function (event) {
        mask.style.display = 'block'; //让放大镜显示出来
        // 获得遮挡层(放大镜)移动的距离
        var maskX = event.clientX - preview.offsetLeft - mask.offsetWidth / 2;
        var maskY = event.clientY - preview.offsetTop - mask.offsetHeight / 2;
        // 遮挡层(放大镜)最大的移动距离
        var maskMaxX = preview.offsetWidth - mask.offsetWidth;
        var maskMaxY = preview.offsetHeight - mask.offsetHeight;
        // 限制遮挡层的移动范围
        if (maskX < 0) {
          maskX = 0;
        } else if (maskX > maskMaxX) {
          maskX = maskMaxX;
        }
        if (maskY < 0) {
          maskY = 0;
        } else if (maskY >= maskMaxY) {
          maskY = maskMaxY;
        }
        // 让放大镜跟随鼠标进行移动
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        big.style.display = 'block';
        // 大图片最大移动距离
        var bigIMgMax = bigIMg.offsetWidth - big.offsetWidth;
        // 大图片的移动距离 = 遮挡层移动距离 * 大图片的最大移动距离 / 遮挡层最大移动距离
        var bigIMgX = maskX * bigIMgMax / maskMaxX;
        var bigIMgY = maskY * bigIMgMax / maskMaxY;
        // 大图片移动的距离
        bigIMg.style.left = -bigIMgX + 'px';
        bigIMg.style.top = -bigIMgY + 'px';
      };
      // 鼠标移出图片关闭放大镜效果
      preview.onmouseout = function () {
        big.style.display = 'none';
        mask.style.display = 'none';
      };
    </script>
</body>


程序员灯塔
转载请注明原文链接:JavaScript网页特效
喜欢 (0)