JavaScript常见的网页特效

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


特效样式

1、模态框拖曳效果

JavaScript项目操作特效实现收获 javascript特效大全_javascript

2、放大镜效果

JavaScript项目操作特效实现收获 javascript特效大全_javascript_02

3、固定侧边栏效果

JavaScript项目操作特效实现收获 javascript特效大全_css3_03

4、上下图片无间断滚动

JavaScript项目操作特效实现收获 javascript特效大全_代码实现_04

5、左右图片无间断滚动

JavaScript项目操作特效实现收获 javascript特效大全_代码实现_05

如何实现这些效果呢？

我想介绍一下元素偏移量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项目操作特效实现收获 javascript特效大全_javascript_06


效果展示

JavaScript项目操作特效实现收获 javascript特效大全_javascript_07


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项目操作特效实现收获 javascript特效大全_代码实现_08

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项目操作特效实现收获 javascript特效大全_代码实现_09

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>

如何实现上面那些效果呢

模态框拖曳效果代码实现

JavaScript项目操作特效实现收获 javascript特效大全_前端_10

<!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>

放大镜效果代码实现

JavaScript项目操作特效实现收获 javascript特效大全_css3_11

<!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>

固定侧边栏效果代码实现

JavaScript项目操作特效实现收获 javascript特效大全_代码实现_12

<!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>