javascript - 纯JS实现JQUERY里animate效果(效果实现整理后)
高洛峰
高洛峰 2017-04-11 12:44:25
[JavaScript讨论组]

如题,自己试着用纯JS写了下面代码,实现鼠标一上去p宽和高的值增大的动画效果。但是一直报错,特意来向各位大神请教,和希望给点思路,如何才能更好的实现。。。。。(现在效果实现了,但是还是有些问题,就是不能随意的移开鼠标开始缩回,鼠标放回开始放大,求大神,给个思路和建议,还有就是感觉我这样写特别笨,有没更简洁的方式。。。。。)





    纯JS实现animate
    
    


   

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(4)
怪我咯

setInterval 是一个 timer,不停止会一直跑下去,至少在动画完成之后应该 clearInterval 吧

巴扎黑
    function animateself(){

        var p = document.getElementById("change");
        p.addEventListener("mouseover",function(){
           var wid = p.offsetWidth;
           p.style.width =wid+5+'px';
     });
    }

你的SetInterval用意是什么,我不清楚欸,如果用了,你记得清除时间不然会一直循环下去

PHPz
var wid = window.getComputedStyle(p,null).getPropertyValue("width");
wid = wid.replace('px','');
wid = parseInt(wid);

如果你要用getComputedStyle的话

PHP中文网
function animateself() {
        var p = document.getElementById("change");
        p.addEventListener("mouseover", function() {
            setTimeout(function() {
                var wid = window.getComputedStyle(p, null).getPropertyValue("width");
                alert("1111");
                p.style.width = (parseInt(wid.toString()) + 5).toString() + 'px';
            }, 50)
        })
    }

照你的写法改的。定时器勿乱用,基本功要扎实。
更重要的是,这样的功能为什么不用CSS?

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号