Decadeeeee 2020-08-08 15:22 采纳率: 100%
浏览 41
已采纳

请问jq怎么使用变量设置css?

要疯了,容我休息会,大哥们帮帮我吧
图片说明

<!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 type="text/css">
        .scroll{
            position: absolute;
        }
        .one{
            display: flex;
            position: relative;
            overflow: hidden;
            transform:translateX(60px);

        }
        .one:hover{
            cursor: pointer;
        }
        .s{
            width: 404px;
            height: 240px;
            display: flex;
            margin:10px 10px 10px 0px;
            box-shadow:0px 0px 8px rgb(187, 182, 182);
            border-radius: 15px;
            background-color:aqua
        }
    </style>
</head>
<body>

    <div class="scroll">
        <div class="one" style="left:0">
            <div class="s" style="background-color:aqua"></div>
            <div class="s" style="background-color:rgb(19, 150, 84)"></div>
            <div class="s" style="background-color:rgb(255, 251, 0)"></div>
            <div class="s" style="background-color:rgb(17, 0, 255)"></div>
            <div class="s" style="background-color:rgb(255, 0, 212)"></div>
            <div class="s" style="background-color:rgb(255, 0, 34)"></div>
            <div class="s" style="background-color:rgb(204, 207, 212)"></div>
        </div>
    </div>

</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
    var isMoving=false;
    var  position_down;
    function move(){
        $(".one").mousedown(function(e){
            isMoving=true;
            position_dowm=e;

        });
        $(".one").mousemove(function(e){
            if(isMoving){
                $(this).style.Transform=//"translateX("+e.clientX - startX.clientX+"px)";
                $(this).css("transform","translate("+e.clientX - position_down.clientX+",0px)");
            }
        })
    };
    $(document).ready(function(){
        move();
    }); 


</script>


</html>
  • 写回答

1条回答 默认 最新

  • lshen01 2023-03-16 20:52
    关注

    参考GPT和自己的思路:

    可以使用变量来设置CSS属性值,具体方法如下:

    将变量定义在JavaScript代码中,例如:

    var color = "red";
    

    然后在需要设置CSS属性的地方使用该变量,例如:

    $(".s").css("background-color", color);
    

    这样就会将所有类名为"s"的元素的背景色设置为红色。

    在本例中,如果想要使用变量来设置translateX的值,可以先将值定义在JavaScript代码中,例如:

    var translateX = "60px";
    

    然后在需要设置该属性的地方使用相应的变量,例如:

    $(".one").css("transform", "translateX(" + translateX + ")");
    

    这样就会将类名为"one"的元素向右平移60个像素。

    另外,在代码中有一个错误:

    $(this).style.Transform=//"translateX("+e.clientX - startX.clientX+"px)";
    

    应该改为:

    $(this).css("transform", "translateX(" + (e.clientX - position_down.clientX) + "px)");
    

    注意需要使用括号将e.clientX和position_down.clientX的差值括起来。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已采纳回答 3月24日

悬赏问题

  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题!
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像,如何解决?
  • ¥15 求daily translation(DT)偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的?
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示