jquery - jquery动态改变css样式

Question

    <style type="text/css">
        .style1
        {
            width: 50%; //must to be dynamically change == e.pageX
            height: 100%;
        }
    </style>

<script type="text/javascript">
    jQuery(document).ready(function () {
        $(document).mousemove(function (e) {
            $('.changes').val(e.pageX);
        });
    });
</script>

<asp:Image ID="Image1" runat="server" cssClass="changes style1"  ImageUrl="~/8.jpg"/>

我如何改变 jquery 宽度：**%; 在 style1 == e.pageX

图像宽度跟随鼠标，无需任何点击和页面重新加载。

Answer 1

jQuery(document).ready(function () {
    $(document).mousemove(function (e) {
        $('.changes').width(e.pageX);
    });
});

Answer 2

您不需要更改样式 val 您只需要使用更改样式宽度属性值$("element").width()

你可以这样做：

<style type="text/css">
.style1
  {
    width: 50%; //must to be dynamically change == e.pageX
    height: 100%;
  }
</style>

<script type="text/javascript">
    jQuery(document).ready(function () {
        $(document).mousemove(function (e) {
            $('.changes').width(e.pageX);   // See the jQuery width [here][1]
        });
    });
</script>

<asp:Image ID="Image1" runat="server" cssClass="changes style1"  ImageUrl="~/8.jpg"/>

Answer 3

我想这就是你想要的：

jQuery(document).ready(function() {
    $(this).mousemove(function(e) {
        $('.style1').width(e.pageX);
    });
});

这是一个小提琴