JavaScript常见的网页特效（元素样式相关属性）

最新推荐文章于 2024-07-26 11:09:07 发布

努力做一只合格的前端攻城狮

最新推荐文章于 2024-07-26 11:09:07 发布

阅读量4.9k

点赞数 8

分类专栏： Javascript 文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/shao_xuan_/article/details/121697820

版权

Javascript 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

JavaScript常见的网页特效

特效样式
如何实现这些效果呢？
元素偏移量offset系列
元素可视区client系列
元素滚动scroll系列
如何实现上面那些效果呢

特效样式

1、模态框拖曳效果

在这里插入图片描述

2、放大镜效果

在这里插入图片描述

3、固定侧边栏效果

在这里插入图片描述

4、上下图片无间断滚动

在这里插入图片描述

5、左右图片无间断滚动

在这里插入图片描述

如何实现这些效果呢？

我想介绍一下元素偏移量offset系列、元素可视区client系列、元素滚动scroll系列相关的知识。

元素偏移量offset系列

offset含义：offset的含义是偏移量，使用offset的相关属性可以动态地获取该元素的位置、大小等。

属性	说明
offsetLeft	返回元素相对其带有定位的父元素左边框的偏移
offsetTop	返回元素相对其带有定位的元素上方的偏移
offsetWidth	返回自身的宽度（包括padding、边框和内容区域的宽度）。注意返回数值不带单位
offsetHeight	返回自身的高度（包括padding、边框和内容区域的高度）。注意返回数值不带单位
offsetParent	返回作为该元素带有定位元素的父级元素（如果父级都没有定位则返回body）

offset与style的区别

Offset	style
offset可以得到任意样式表中的样式值	style只能得到行内样式表中的样式值
offset系列获得的数值是没有单位的	style.width获得的是带有单位的字符串
offsetWidth包含padding、border、width的值	style.width获得的是不包含padding、border的值
offsetWidth等属性是只读属性，只能获取不能赋值	style.width是可读写属性，可以获取也可以赋值

案例

获取鼠标位置：鼠标指针在盒子内的坐标位置示意图分析。
在这里插入图片描述
效果展示

JavaScript代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box{
        position: absolute;
        top: 50px;
        left: 20px;
        background-color: pink;;
        width: 200px;
        height: 200px;

    }
</style>
<body>
    <div id="box"></div>
    <script>
        var box = document.querySelector('#box');
        //输出盒子的宽带和高度
        console.log(box.offsetWidth);
        console.log(box.offsetHeight);
        box.addEventListener('mousemove',function(e){
            //获取box的偏移量
            var left = box.offsetLeft;
            var top = box.offsetTop;
            console.log('偏移量:'+'('+left+','+top+')');
            //计算鼠标在box中的坐标
            var x = e.pageX-left;
            var y = e.pageY-top;
            console.log('x轴的坐标:'+x+','+'y轴的坐标:'+y);
        })
    </script>
</body>
</html>

元素可视区client系列

client系列：client中文意思是客户端，通过使用client系列的相关属性可以获取元素可视区的相关信息。

属性	说明
clientLeft	返回元素左边框的大小
clientTop	返回元素上边框的大小
clientWidth	返回自身的宽度（包含padding），内容区域的宽度（不含边框）。注意返回数值不带单位
clientHeight	返回自身的高度（包含padding），内容区域的高度（不含边框）。注意返回数值不带单位

案例

获取元素client。

效果展示
在这里插入图片描述

JavaScript代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        overflow: auto;
        border: 10px solid red;
        padding: 10px;
      }
    </style>
  <body>
    <div>
      我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
    </div>
    <script>
      var div = document.querySelector('div');
      console.log(div.clientHeight);
      console.log(div.clientTop);
      console.log(div.clientLeft);

    </script>
  </body>
</html>

元素滚动scroll系列

scroll含义：scroll的含义是滚动，使用scroll系列的相关属性可以动态地获取该元素的滚动距离、大小等。

属性	说明
scrollLeft	返回被卷去的左侧距离，返回数值不带单位
scrollTop	返回被卷去的上方距离，返回数值不带单位
scrollWidth	返回自身的宽度，不含边框。注意返回数值不带单位
scrollHeight	返回自身的高度，不含边框。注意返回数值不带单位

案例
获取scrollHeight。

效果展示
在这里插入图片描述

JavaScript代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        overflow: auto;
        border: 10px solid red;
        padding: 10px;
      }
    </style>
  <body>
    <div>
      我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容
    </div>
    <script>
      var div = document.querySelector('div');
      console.log(div.scrollHeight);
    </script>
  </body>
</html>

如何实现上面那些效果呢

模态框拖曳效果代码实现

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 单击弹出遮罩层的样式 */
    .login-header{
        width: 100%;
        text-align: center;
        font-size: 20pt;
        position: absolute;
        cursor: pointer;
    }
    .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;
        width: 100%;
        height: 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: wheat;
        cursor: pointer;
    }
    /* 遮罩层样式 */
    .login-bg{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #ccc;
        display: none;
    }
</style>
<body>
    <div class="login-bg"></div>
    <!-- //模态对话框 -->
    <div class="modal">
        <form>
            <div class="item1">登录会员</div>
            <div class="item2">
                <div class="username">
                    <label>
                        用户名：
                        <input type="text" name="uesername">
                    </label>
                </div>
                <div class="password">
                    <label>
                        登录密码：
                        <input type="password" name="password">
                    </label>
                </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');

        //给遮罩层注册click事件
        login.addEventListener('click',function(){
            modal.style.display = 'block';
            bg.style.display = 'block';
            modal.style.backgroundColor = 'white';
        })
        //给close注册click事件
        close.addEventListener('click',function(){
            modal.style.display = 'none';
            bg.style.display = 'none';
        })
        //给modal注册mousedown事件
        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(){
                document.removeEventListener('mousemove',move);
            })
        })
    </script>
</body>
</html>

放大镜效果代码实现

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>放大镜</title>
  <style>
    #magnifying {
      display: block;
      width: 400px;
      height: 400px;
      margin: 50px;
      position: relative;
      border: 1px solid rgba(122, 74, 74, 0.05);
    }
    #origin {
      position: relative;
    }
    #float {
      display: none;
      width: 200px;
      height: 200px;
      background: #1d882c;
      border: 1px solid rgb(145, 58, 58);
      filter: alpha(opacity=30);
      opacity: 0.3;
      position: absolute;
      overflow: hidden;
    }
 
    #mark {
      position: absolute;
      display: block;
      width: 400px;
      height: 400px;
      z-index: 10;
      cursor: move;
    }
 
    #zoom {
      display: none;
      position: absolute;
      top: 0;
      left: 420px;
      width: 400px;
      height: 400px;
      overflow: hidden;
    }
    #zoom img {
      position: absolute;
      z-index: 5
    }
  </style>
 
</head>
<body>
<div id="magnifying">
  <div id="origin">
    <div id="mark"></div>
    <div id="float"></div>
    <img width="400px" src="../../2021-9-25/2021-11-28/document/phone.png"/>
  </div>
  <div id="zoom">
    <img src="../../2021-9-25/2021-11-28/document/bigphone.png"/>
  </div>
</div>
<script>

  window.onload = function () {
    var Magnifying = document.querySelector("#magnifying");
    var Origin = document.querySelector("#origin");
    var Mark = document.querySelector("#mark");
    var Float = document.querySelector("#float");
    var Zoom = document.querySelector("#zoom");
    var ZoomImage = Zoom.getElementsByTagName("img")[0];
 
    Mark.addEventListener('mouseover',function () {
      Float.style.display = "block";
      Zoom.style.display = "block";
    });
 
    Mark.addEventListener('mouseout',function () {
      Float.style.display = "none";
      Zoom.style.display = "none";
    });
 
    Mark.addEventListener('mousemove',function (e) {
 
      var _event = e || window.event;  //兼容多个浏览器的event参数模式
      //计算鼠标中心点的坐标
      var left = _event.clientX - Magnifying.offsetLeft - Origin.offsetLeft - Float.offsetWidth / 2;
      var top = _event.clientY - Magnifying.offsetTop - Origin.offsetTop - Float.offsetHeight / 2;
 
      //判断鼠标中心点是否在图片内部
      if (left < 0) {
        left = 0;
      } else if (left > (Mark.offsetWidth - Float.offsetWidth)) {
        left = Mark.offsetWidth - Float.offsetWidth;
      }
      if (top < 0) {
        top = 0;
      } else if (top > (Mark.offsetHeight - Float.offsetHeight)) {
        top = Mark.offsetHeight - Float.offsetHeight;
 
      }
 
      Float.style.left = left + "px";
      Float.style.top = top + "px";
      //求相对位置
      var percentX = left / (Mark.offsetWidth - Float.offsetWidth);
      var percentY = top / (Mark.offsetHeight - Float.offsetHeight);
      console.log(percentX);
      //方向相反，故而是负值
      ZoomImage.style.left = -percentX * (ZoomImage.offsetWidth - Zoom.offsetWidth) + "px";
      ZoomImage.style.top = -percentY * (ZoomImage.offsetHeight - Zoom.offsetHeight) + "px";
    });
  }
</script>
</body>
</html>

固定侧边栏效果代码实现

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .w{
        width: 70%;
        margin: 0 auto;
        margin-top: 10px;
    }
    .header{
        height: 100px;
        background-color: red;
    }
    .bananer{
        height: 200px;
        background-color: pink;
    }
    .main{
        height: 1267px;
        background-color: orange;
    }
    .slider-bar{
        width: 70px;
        height: 70px;
        background-color: yellow;
        position: absolute;
        left: 85%;
        top: 330px;
    }
    .goBack{
        display: none;
        position: absolute;
        bottom: 30px;
        cursor: pointer;
    }
</style>
<body>
    <div class="header w">头部区域</div>
    <div class="bananer w">bananer区域</div>
    <div class="main w">主体区域</div>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <script>
        var header = document.querySelector('.header');
        var bananer = document.querySelector('.bananer');
        var slider = document.querySelector('.slider-bar');
        var goBack = document.querySelector('.goBack');
        goBack.addEventListener('click',function(){
            window.scrollTo(0,0);
        })
        document.addEventListener('scroll',function(){
            //获取页面顶部和左侧卷去了多少
            slider.style.top = window.pageYOffset;
            if(window.pageYOffset>(header.scrollHeight+bananer.scrollHeight+30)){
                goBack.style.display = 'block';
                slider.style.position = 'fixed';
                slider.style.left = '85%';
                slider.style.top = '0px';
            }else{
                slider.style.position = 'absolute';
                slider.style.left = '85%'
                slider.style.top = (header.scrollHeight+bananer.scrollHeight+30)+'px'
                goBack.style.display = 'none';
            }
        })
    </script>
</body>
</html>

上下图片无间断滚动代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上下无间断滚动</title>

<body>
<div id="demo" style=" margin-left: 300px; overflow:hidden;height:500px;width:220px; border:1px solid #dde5bc; overflow:hidden;float:left">
	<div id=demo1> 
	<img src="../../../11-27/1.gif" width="220" height="360">
	<img src="../../../11-27/2.gif" width="220" height="360"> 
	<img src="../../../11-27/3.gif" width="220" height="360">
	<img src="../../../11-27/4.gif" width="220" height="360">
	<img src="../../../11-27/5.gif" width="220" height="360">
	</div>
	<div id=demo2></div>
</div>
<script>
	var speed=10
	var demo=document.getElementById("demo");
	var demo2=document.getElementById("demo2");
	var demo1=document.getElementById("demo1");
	demo2.innerHTML=demo1.innerHTML
	function Marquee(){
		if(demo2.offsetTop-demo.scrollTop<=0)
		demo.scrollTop-=demo1.offsetHeight
		else{
		demo.scrollTop++
	}
	}
	var MyMar=setInterval(Marquee,speed)
	demo.onmouseover=function() {clearInterval(MyMar)}
	demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>

左右图片无间断滚动代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>左右图片滚动</title>
</head>
<style type="text/css">
    #demo {
    background: #FFF;
    overflow:hidden;
    border: 1px dashed #CCC;
    width: 1000px;
    }
    #demo img {
        width: 220px;
        height: 360px;
    border: 3px solid #F2F2F2;
    }
    #indemo {
    float: left;
    width: 800%;
    }
    #demo1 {
    float: left;
    }
    #demo2 {
    float: left;
    }
    </style>
<body>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="../../../11-27/1.gif" border="0" /></a>
<a href="#"><img src="../../../11-27/2.gif" border="0" /></a>
<a href="#"><img src="../../../11-27/3.gif" border="0" /></a>
<a href="#"><img src="../../../11-27/4.gif" border="0" /></a>
<a href="#"><img src="../../../11-27/5.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

</script>
</body>
</html>

努力做一只合格的前端攻城狮

关注

8
点赞
踩
52

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript常见的网页特效（元素样式相关属性）

JavaScript常见的网页特效特效样式1、模态框拖曳效果2、放大镜效果3、固定侧边栏效果4、上下图片无间断滚动5、左右图片无间断滚动如何实现这些效果呢？元素偏移量offset系列元素可视区client系列元素滚动scroll系列如何实现上面那些效果呢模态框拖曳效果代码实现放大镜效果代码实现固定侧边栏效果代码实现上下图片无间断滚动代码实现左右图片无间断滚动代码实现特效样式1、模态框拖曳效果2、放大镜效果3、固定侧边栏效果4、上下图片无间断滚动5、左右图片无间断滚动如何实现这些效果呢
复制链接

扫一扫