javascript - 求教大神们,关于JS同一特效在同一个网页多次调用的问题..
大家讲道理
大家讲道理 2017-04-11 11:19:03
[JavaScript讨论组]

1、我要的效果是,鼠标移到p或p中span标签后,文字与p同时变大;鼠标移开时恢复原状并且这个特效可以在同一页面进行多次调用;
2、我现在写的特效只能指定某个ID用;好像不能多次调用;同时浏览器总是报错:
Uncaught TypeError: Cannot read property '0' of undefined
求大神帮我指证,我哪里写错了,需要怎么修改。最好能有案例,谢谢大神们哈;



    
        
        基础运动 - 文字放大缩小
        
        
    
    
        

基础运动 - 文字放大缩小

这是什么

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(3)
PHP中文网

主要有两个问题:

  1. 这里不是this

    this.children[0].style.fontSize = Font_Size + 'px';
    this.style.width = Width_da +'px';

    某元素绑定的事件函数中,this并不指代当前元素,只有event.currentTarget表示当前事件元素。

  2. 你使用了异步函数setInterval,异步函数必须要等待主进程完成之后才会运行,所以当此异步函数内部的函数运行时,主进程已经结束,此时的event值早已改变不可能指代主进程还在运行时候的事件,那么就需要使用一个变量来储存主进程运行时候的事件,这也算是闭包的一种应用,所以代码还需要这么改:

    function fontSize_da(iTerget, iWidth){
        var eventCurrentTarget = event.currentTarget;
        
        clearInterval(tmier);
        tmier = setInterval(function(){
        
        ......
        
        eventCurrentTarget.children[0].style.fontSize = Font_Size + 'px';
        eventCurrentTarget.style.width = Width_da +'px';
        
        ......
        
    }
PHPz

this在setInterval里面指向了window, window对象肯定是没有children ,style 属性的。所以报错。
你在setInterval外面,fontSize_da里面 定义一个 var _this = this;
然后改为
_this.children[0].style.fontSize = Font_Size + 'px';
_this.style.width = Width_da +'px';

这样试试。。

PHP中文网

你代码里的this实际引用的是window

在一开始的时候传递this,或者 event

<p onmouseenter="fontSize(this,24,604)" ...>...</p>

function fontSize(element,targetFontSize,targetWidth){
    ...
}

ps:这种效果建议用css来实现

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

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