jQuery滑动调节盒子阴影案例-jquery案例-前端日记簿

首页 jquery案例正文

jQuery滑动调节盒子阴影案例

2023-11-14 68

效果图：

从上面的效果中可以看出当鼠标移动滑块时图片的box-shadow会随之进行改变并且下面的box-shadow会显示其更改的值

html：

当滑块移动时我们给其绑定oninput事件获取到其改变的value值

然后使用value进行阴影参数的计算分为俩边进行计算

将计算出来的值按css设置的样式合并到一起

在赋值之前要进行一个判断当滑块滑动的值除以50 小于0.5时 shadow变量只进行largeShadow赋值

然后分别通过css()方法以及text()方法给对应的demo进行更改

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        background: #eef2f6;
        border: none;
        padding: 0 20px;
        font-size: 15px;
        color: #1b2b33;
      }
      .box {
        display: flex;
        width: 100%;
        height: 100vh;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      .img {
        max-width: 400px;
        width: 100%;
        height: 200px;
        min-height: 200px;
        background: white;
        border-radius: 9px;
        margin-bottom: 25px;
        box-sizing: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.46);
      }
      .sliding {
        max-width: 600px;
        width: 100%;
        text-align: center;
      }
      .sliding p {
        font-weight: bold;
        padding: 8% 3%;
        background: #1b2b33;
        border-radius: 6pc;
        color: #eb6069;
      }
      .sliding p span {
        color: #e9b669;
      }
      .slide {
        -webkit-appearance: none;
        appearance: none;
        max-width: 350px;
        width: 100%;
        height: 10px;
        border-radius: 5px;
        background: #1b2b33;
        outline: none;
        margin-top: 50px;
        margin-bottom: 30px;
      }

      .slide::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="img"><img src="./img/image.jpg" alt="" /></div>
      <div class="sliding">
        <input type="range" min="1" max="100" value="1" class="slide" />
        <p>
          box-shadow <span>:</span
          ><span id="shadow-info"
            >0 1px 2px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.46)</span
          ><span style="color: #fff"> ;</span>
        </p>
      </div>
    </div>
  </body>
</html>
<script src="./js/jquery.js"></script>
<script>
  $(".slide").on("input", function () {
    var v = this.value;

    var largeShadow = `0 ${(v / 3).toFixed(0)}px ${v}px rgba(0, 0, 0, ${(
      0.5 -
      v / 500
    ).toFixed(2)})`;
    var smallShadow = `0 ${(v / 1.5).toFixed(0)}px ${(v * 1.5).toFixed(
      0
    )}px rgba(0, 0, 0, ${(0.5 - v / 50).toFixed(2)})`;
    var shadow = largeShadow + "," + smallShadow;
    if (0.5 - (v / 50).toFixed(2) <= 0) {
      shadow = largeShadow;
    }
    $(".img").css("boxShadow", shadow);
    $("#shadow-info").text(shadow);
  });
</script>

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=203

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。