JavaScript（十二）常见js特效

最新推荐文章于 2024-08-14 17:24:57 发布

左耳说你很傻

最新推荐文章于 2024-08-14 17:24:57 发布

阅读量4.1k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43933148/article/details/108563349

版权

本文介绍了JavaScript实现的常见特效，包括拖拽效果及其边界问题的解决方案，碰撞检测的实现，各种运动效果如匀速、减速、多物体运动和透明度变化，以及回调函数在特效中的应用。

摘要由CSDN通过智能技术生成

一、拖拽效果

1.拖拽效果的思路

1）鼠标按下，不能松开
2）鼠标在页面中移动，物体随着鼠标移动
3）鼠标松开（抬起），停止移动

var o = document.getElementsByTagName('div')[0];
        //鼠标按下事件
        o.onmousedown = function (e) {
   
            e = e || window.event;
            //计算鼠标相对于div的位置
            var disLeft = e.clientX - this.offsetLeft;//
            var disTop = e.clientY - this.offsetTop;//

            //鼠标移动
            o.onmousemove = function (e) {
   
                e = e || window.event;
                //修改物体的位置
                // console.log(e.clientX,e.clientY);//鼠标位置
                //鼠标的位置-鼠标相对于物体位置
                this