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

请问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 Attributeerror:super object has no attribute '__sklearn_tags__'_'
  • ¥15 逆置单链表输出不完整
  • ¥15 宇视vms-B200-A16@R启动不了,如下图所示,在软件工具搜不到,如何解决?(操作系统-linux)
  • ¥500 寻找一名电子工程师完成pcb主板设计(拒绝AI生成式答案)
  • ¥15 关于#mysql#的问题:UNION ALL(相关搜索:sql语句)
  • ¥15 matlab二位可视化能否针对不同数值范围分开分级?
  • ¥15 已经创建了模拟器但是不能用来运行app 怎么办😭自己搞两天了
  • ¥15 关于#极限编程#的问题,请各位专家解答!
  • ¥20 win11账户锁定时间设为0无法登录
  • ¥45 C#学生成绩管理系统