JS实现：盒子随着鼠标点击在页面跳动的效果

HTML：

<div id='box'>
    <img src='图片链接' alt=''>
</div>

CSS：

<style>
    #box{
        width: 100px;
        height: 100px;
        overflow: hidden;
        position: absolute;
        left: 45%;
            /* 因为我们在使用过渡效果时
            第一次执行top值改变没有初始值，所以第一次动画效果失效，
            我们不能使用bottom定位元素到页面最底部 */
        //过渡的效果
        transition: all 1s;
        //旋转的效果    
        transform: rotate(0deg);
    }
    #box img{
        width: 100%
    }
</style>

JS:

通过dom ID选择器选择box。

var box = document.getElementById('box');

定位元素的TOP值，让元素居于页面底部。（为了过渡效果有一个top的初始值）。

innerHeight（页面高度）-box.offsetHeight(盒子高度)；

box.style.top = innerHeight - box.offsetHeight + 'px'

定义一个变量