从一个移动图像<；部门>；另一个<；部门>；将CSS作为Javascript函数的一部分_Javascript_Jquery_Html_Css

从一个移动图像<；部门>；另一个<；部门>；将CSS作为Javascript函数的一部分

javascript jquery html css

从一个移动图像<；部门>；另一个<；部门>；将CSS作为Javascript函数的一部分,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我是一个新手，我正在开发一个简单的纸牌游戏作为我的第一个真正的项目。我需要帮助将img从一个移动到另一个，作为检查分数的函数的一部分（如果分数超过'99'，则运行checkscore（）；函数。作为该函数的一部分，它将“trinkets hold”div中的图像附加到“trinkets lost”div中。我的问题是，我对CSS动画不熟悉，我正在尝试为移动设置动画。我的设置是否有助于实现这一点，还是我试图处理这一切都是错误的以下是html： <body> <div id=

我是一个新手，我正在开发一个简单的纸牌游戏作为我的第一个真正的项目。我需要帮助将img从一个移动到另一个，作为检查分数的函数的一部分（如果分数超过'99'，则运行

checkscore（）；

函数。作为该函数的一部分，它将“trinkets hold”div中的图像附加到“trinkets lost”div中。我的问题是，我对CSS动画不熟悉，我正在尝试为移动设置动画。我的设置是否有助于实现这一点，还是我试图处理这一切都是错误的

以下是html：

<body>
  <div id="trinkets-held-text">
    Trinkets Held
  </div>
  <div id="trinkets-held" style="text-align: center">
    <img alt="trinket1" id="trinket1" src="graphics/trinket1.png" style="width:100px;height:100px">
    <img alt="trinket2" id="trinket2" src="graphics/trinket2.png" style="width:100px;height:100px">
    <img alt="trinket3" id="trinket3" src="graphics/trinket3.png" style="width:100px;height:100px">
  </div>

  <br>

  <div id="trinkets-lost-text">
    Trinkets Lost
  </div>
  <div id="trinkets-lost" style="text-align: center"></div>
</body>

如何设置该动作的动画？

如果您仅限于纯JavaScript，请尝试以下操作：

HTML:

<body>
    <div id="trinkets-held-text">
        Trinkets Held
    </div>
    <div id="trinkets-held" style="text-align: center">
        <div style="width:100px;height:100px; display: inline-block;">
            <img alt="trinket1" id="trinket1" src="graphics/trinket1.png" style="width:100px;height:100px">
        </div>
        <div style="width:100px;height:100px; display:inline-block;">
            <img alt="trinket2" id="trinket2" src="graphics/trinket2.png" style="width:100px;height:100px">
        </div>
        <div style="width:100px;height:100px; display:inline-block;">
            <img alt="trinket3" id="trinket3" src="graphics/trinket3.png" style="width:100px;height:100px">
        </div>


    </div>

    <br>

    <div id="trinkets-lost-text">
        Trinkets Lost
    </div>
    <div id="trinkets-lost" style="text-align: center"></div>



    <button onclick="checkscore('trinket1')">MOVE THE IMAGE</button>
    <button onclick="checkscore('trinket2')">MOVE THE IMAGE</button>
    <button onclick="checkscore('trinket3')">MOVE THE IMAGE</button>

</body>

<script>
        function checkscore(id) {
            var elem = document.getElementById(id);
            var style = "margin-top";
            var unit = "px";
            var from = 0;
            var to = 200;
            var time = 1000;

            elem.style['position'] = "absolute";
            elem.style['margin-left'] = "-50px";
            var start = new Date().getTime(),
                    timer = setInterval(function() {
                        var step = Math.min(1, (new Date().getTime() - start) / time);
                        var thestyle = (from + step * (to - from)) + unit;
                        elem.style[style] = thestyle;
                        if (step == 1)
                            clearInterval(timer);
                    }, 25);
            elem.style[style] = from + unit;
        }
    </script>


持有的小饰品


丢失的小饰物
移动图像
移动图像
移动图像

JS:

<body>
    <div id="trinkets-held-text">
        Trinkets Held
    </div>
    <div id="trinkets-held" style="text-align: center">
        <div style="width:100px;height:100px; display: inline-block;">
            <img alt="trinket1" id="trinket1" src="graphics/trinket1.png" style="width:100px;height:100px">
        </div>
        <div style="width:100px;height:100px; display:inline-block;">
            <img alt="trinket2" id="trinket2" src="graphics/trinket2.png" style="width:100px;height:100px">
        </div>
        <div style="width:100px;height:100px; display:inline-block;">
            <img alt="trinket3" id="trinket3" src="graphics/trinket3.png" style="width:100px;height:100px">
        </div>


    </div>

    <br>

    <div id="trinkets-lost-text">
        Trinkets Lost
    </div>
    <div id="trinkets-lost" style="text-align: center"></div>



    <button onclick="checkscore('trinket1')">MOVE THE IMAGE</button>
    <button onclick="checkscore('trinket2')">MOVE THE IMAGE</button>
    <button onclick="checkscore('trinket3')">MOVE THE IMAGE</button>

</body>

<script>
        function checkscore(id) {
            var elem = document.getElementById(id);
            var style = "margin-top";
            var unit = "px";
            var from = 0;
            var to = 200;
            var time = 1000;

            elem.style['position'] = "absolute";
            elem.style['margin-left'] = "-50px";
            var start = new Date().getTime(),
                    timer = setInterval(function() {
                        var step = Math.min(1, (new Date().getTime() - start) / time);
                        var thestyle = (from + step * (to - from)) + unit;
                        elem.style[style] = thestyle;
                        if (step == 1)
                            clearInterval(timer);
                    }, 25);
            elem.style[style] = from + unit;
        }
    </script>


功能检查分数（id）{
var elem=document.getElementById（id）；
var style=“保证金顶部”；
var unit=“px”；
var-from=0；
var-to=200；
var时间=1000；
元素样式['position']=“绝对”；
元素样式['margin-left']=“-50px”；
var start=new Date（）.getTime（），
计时器=设置间隔（函数（）{
var step=Math.min（1，（new Date（）.getTime（）-start）/time）；
变量类型=（从+步骤*（到-从））+单位；
元素样式[样式]=样式；
如果（步骤==1）
清除间隔（计时器）；
}, 25);
元素样式[样式]=来自+单位；
}

这里有一个

你可以通过一个回调函数来运行你想要的动画，这个回调函数交换

img src

此示例使用

slideToggle

删除图像，交换

src

，并再次使用

slideToggle

使图像再次可见：

HTML:

Javascript:

这里是一个

这里是使用JQUERY和CSS的另一种方法

<!DOCTYPE html>

<html>
    <head>
        <title>Test</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <style>
            #trinkets-held, #trinkets-lost {
                height: 100px;
            }
            #trinkets-held img, #trinkets-lost img{
                width:100px;
                height:100px;
            }
            #trinkets-held img.move{
                -webkit-transition: 2s;
                -moz-transition: 2s;
                -ms-transition: 2s;
                -o-transition: 2s;
                transition: 2s;
                margin-top: 135px !important;
                position:absolute;
            }
        </style>
    </head>
    <body>
        <div id="trinkets-held-text">Trinkets Held</div>
        <div id="trinkets-held">
            <img alt="trinket1" id="trinket1" src="graphics/trinket1.png">
            <img alt="trinket2" id="trinket2" src="graphics/trinket2.png">
            <img alt="trinket3" id="trinket3" src="graphics/trinket3.png">
        </div>

        <br>

        <div id="trinkets-lost-text">Trinkets Lost</div>
        <div id="trinkets-lost">

        </div>



        <button id="doTheMove1" class="move_btns" value="trinket1">Score of Trinket1</button>
        <button id="doTheMove2" class="move_btns" value="trinket2">Score of Trinket2</button>
        <button id="doTheMove3" class="move_btns" value="trinket3">Score of Trinket3</button>


        <script>
            $(document).ready(function() {
                var score = 100;
                function checkscore(img_id) {
                    if (score > 99) {
                        $("#" + img_id).addClass("move"); //will slide it down

                        setTimeout(function() {//will wait for SECONDS then run function
                            $("#" + img_id).appendTo("#trinkets-lost");
                        }, 2000);//SECONDS
                    }
                }

                $(".move_btns").click(function() {
                    var img_id = $(this).val();
                    checkscore(img_id);
                });
            });
        </script>
    </body>

</html>


试验
#小饰物拿着，#小饰物丢了{
高度：100px；
}
#小饰物保持img，#小饰物失去img{
宽度：100px；
高度：100px；
}
#随身携带的小饰物{
-webkit转换：2s；
-moz跃迁：2s；
-ms转换：2s；
-o-转变：2s；
过渡：2s；
利润率顶部：135px！重要；
位置：绝对位置；
}
持有的小饰品


丢失的小饰物
小饰物得分1
小饰物得分2
小饰物的分数3
$（文档）.ready（函数（）{
var得分=100；
功能检查分数（img\U id）{
如果（分数>99）{
$（“#”+img_id）.addClass（“move”）；//将向下滑动它
setTimeout（function（）{//将等待秒，然后运行函数
$（“#”+img_id）.appendTo（“#小饰品丢失”）；
}，2000）；//秒
}
}
$（“.move_btns”）。单击（函数（）{
var img_id=$（this.val（）；
检查分数（img_id）；
});
});

好的，这里有另一种方法。它有点复杂，但它使用CSS3转换、克隆和占位符来居中定位和正确的动画。此外，原始元素在DOM中移动，因此您的DOM实际上代表游戏的数据模型，而小饰物不仅以光学方式移动

您可以在中测试它

HTML:

JS:

Css动画/转换将使您更改的样式属性生效。但是更改DOM元素的结构将立即应用，并且不适用于动画…您必须仔细考虑这一点。您真的在使用jQuery吗？

$(function() {
    $('.move').click(function() {
        var img1 = $('#kittens-1').attr('src'),
            img2 = $('#kittens-2').attr('src');
        $('.kittens').slideToggle('slow', function() {
            $('#kittens-1').attr('src', img2);
            $('#kittens-2').attr('src', img1);
        }).slideToggle('slow');        
    });
});

<!DOCTYPE html>

<html>
    <head>
        <title>Test</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <style>
            #trinkets-held, #trinkets-lost {
                height: 100px;
            }
            #trinkets-held img, #trinkets-lost img{
                width:100px;
                height:100px;
            }
            #trinkets-held img.move{
                -webkit-transition: 2s;
                -moz-transition: 2s;
                -ms-transition: 2s;
                -o-transition: 2s;
                transition: 2s;
                margin-top: 135px !important;
                position:absolute;
            }
        </style>
    </head>
    <body>
        <div id="trinkets-held-text">Trinkets Held</div>
        <div id="trinkets-held">
            <img alt="trinket1" id="trinket1" src="graphics/trinket1.png">
            <img alt="trinket2" id="trinket2" src="graphics/trinket2.png">
            <img alt="trinket3" id="trinket3" src="graphics/trinket3.png">
        </div>

        <br>

        <div id="trinkets-lost-text">Trinkets Lost</div>
        <div id="trinkets-lost">

        </div>



        <button id="doTheMove1" class="move_btns" value="trinket1">Score of Trinket1</button>
        <button id="doTheMove2" class="move_btns" value="trinket2">Score of Trinket2</button>
        <button id="doTheMove3" class="move_btns" value="trinket3">Score of Trinket3</button>


        <script>
            $(document).ready(function() {
                var score = 100;
                function checkscore(img_id) {
                    if (score > 99) {
                        $("#" + img_id).addClass("move"); //will slide it down

                        setTimeout(function() {//will wait for SECONDS then run function
                            $("#" + img_id).appendTo("#trinkets-lost");
                        }, 2000);//SECONDS
                    }
                }

                $(".move_btns").click(function() {
                    var img_id = $(this).val();
                    checkscore(img_id);
                });
            });
        </script>
    </body>

</html>

<div id="trinkets-held-text">
  Trinkets Held
</div>
<div id="trinkets-held" style="text-align: center">
  <img alt="trinket1" id="trinket1" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Disc_Plain_red.svg/100px-Disc_Plain_red.svg.png" class="trinket">
  <img alt="trinket2" id="trinket2" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Disc_Plain_green_dark.svg/100px-Disc_Plain_green_dark.svg.png" class="trinket">
  <img alt="trinket3" id="trinket3" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Disc_Plain_blue.svg/100px-Disc_Plain_blue.svg.png" class="trinket">
</div>

<br>

<div id="trinkets-lost-text">
  Trinkets Lost
</div>
<div id="trinkets-lost" style="text-align: center"></div>

<input type="button" onclick="checkscore(1)" value="Check Score (red)">
<input type="button" onclick="checkscore(2)" value="Check Score (green)">
<input type="button" onclick="checkscore(3)" value="Check Score (blue)">

.trinket, .trinket-placeholder {
    width: 100px;
    height: 100px;

    /* the animation */
    transition: all 1.5s;

    /* we need relative positions for the position transitions */
    position: relative;
}

.trinket-placeholder {
    display: inline-block;
    /* the negative margin adjusts the original trinket */
    margin-left: -100px;
    /* only keep transitions for the width, so we can remove the margin without transitions */
    transition: width 1.5s;
}

.trinket {
    top: 0;
    left: 0;
}

#trinkets-lost {
    /* add a height to the wrapper, so there is no flickering after moving the element */
    min-height: 110px
}

function checkscore(i) {
    if (confirm("GAME OVER") === true) {
        moveTrinket(i);
    } else {
        reset();
    }
}

function moveTrinket(i) {
    var trinketsLost = document.getElementById('trinkets-lost');
    var trinketsHeld = document.getElementById('trinkets-held');
    var trinketOrig = document.getElementById('trinket' + i);

    // clone the element (wee need the clone for positioning)
    var trinketClone = trinketOrig.cloneNode();
    trinketClone.style.visibility = 'hidden';
    trinketsLost.appendChild(trinketClone);

    // calculate the new position, relative to the current position
    var trinketOrigTop = trinketOrig.getBoundingClientRect().top;
    var trinketOrigLeft = trinketOrig.getBoundingClientRect().left;
    var trinketCloneTop = trinketClone.getBoundingClientRect().top;
    var trinketCloneLeft = trinketClone.getBoundingClientRect().left;
    var newPositionTop = (trinketCloneTop - trinketOrigTop);
    var newPositionLeft = (trinketCloneLeft - trinketOrigLeft);

    // remove the clone (we do not need it anymore)
    trinketClone.parentNode.removeChild(trinketClone);

    // create a placeholder to prevent other elements from changing their position
    var placeholder = document.createElement('div');
    placeholder.classList.add('trinket-placeholder');
    trinketOrig.parentNode.insertBefore(placeholder, trinketOrig.nextSibling);

    // position the original at the clone's position (this triggers the transition)
    trinketOrig.style.zIndex = 1000;
    trinketOrig.style.top = newPositionTop + 'px';
    trinketOrig.style.left = newPositionLeft + 'px';

    // this will be triggered after the transition finished
    trinketOrig.addEventListener('transitionend', function() {
        // reset the positioning
        this.style.position = 'scroll';
        this.style.top = 0;
        this.style.left = 0;

        // shrink the placeholder to re-center the held trinkets
        placeholder.style.width = 0;
        placeholder.style.marginLeft = 0;

        // when the placeholder transition has finished, remove the placeholder
        placeholder.addEventListener('transitionend', function (){
            this.parentnode.removeChild(this);

            // removing the placeholder is the last action,
            // after that you can do any following actions
            roundreset();
        });

        // move the trinket element in the DOM (from held to lost)
        trinketsLost.appendChild(this);
    });
}