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

请问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日

悬赏问题

  • ¥30 Matlab打开默认名称带有/的光谱数据
  • ¥50 easyExcel模板 动态单元格合并列
  • ¥15 res.rows如何取值使用
  • ¥15 在odoo17开发环境中,怎么实现库存管理系统,或独立模块设计与AGV小车对接?开发方面应如何设计和开发?请详细解释MES或WMS在与AGV小车对接时需完成的设计和开发
  • ¥15 CSP算法实现EEG特征提取,哪一步错了?
  • ¥15 游戏盾如何溯源服务器真实ip?需要30个字。后面的字是凑数的
  • ¥15 vue3前端取消收藏的不会引用collectId
  • ¥15 delphi7 HMAC_SHA256方式加密
  • ¥15 关于#qt#的问题:我想实现qcustomplot完成坐标轴
  • ¥15 下列c语言代码为何输出了多余的空格