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日

悬赏问题

  • ¥15 php环境如何实现国密SM2相关功能
  • ¥15 关于#单片机#的问题:K210 例程里面提示我iomem.h: No such file or directory
  • ¥15 LSPI算法的大问题
  • ¥15 java导出word 动态填充数据
  • ¥20 扑克的算牌公式及软件制作
  • ¥20 如何通过云图中RPG去计算云图上不同位置的值?
  • ¥15 请问不小心下载到了钓鱼软件怎么办?
  • ¥15 求国博抢票 求国博抢票 有的私
  • ¥50 swiftui @query 报错
  • ¥50 怎么解决刷卡或扫码后,点击软件输入框,win10屏幕键盘不会自动弹出的问题