javascript - 求教大神们，关于JS同一特效在同一个网页多次调用的问题..
本文介绍了javascript - 求教大神们，关于JS同一特效在同一个网页多次调用的问题..的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
1、我要的效果是，鼠标移到DIV或DIV中span标签后，文字与DIV同时变大；鼠标移开时恢复原状并且这个特效可以在同一页面进行多次调用；
2、我现在写的特效只能指定某个ID用；好像不能多次调用；同时浏览器总是报错：
Uncaught TypeError: Cannot read property '0' of undefined
求大神帮我指证，我哪里写错了，需要怎么修改。最好能有案例，谢谢大神们哈；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>基础运动 - 文字放大缩小</title>
<style>
div{
width: 300px;
height: 300px;
background-color: #118833;
color: #FFFFFF;
line-height: 300px;
text-align: center;
}
div span{
display: block;
font-size: 14px;
}
</style>
<script>
var Font_Size = 14;
var Width_da = 300;
var tmier = null;
function fontSize_da(iTerget, iWidth){
//var odiv_1 = document.getElementById('ods');
//var odiv_1 = document.getElementsByTagName('div');
//var span_1 = odiv_1.getElementsByTagName('span');
clearInterval(tmier);
tmier = setInterval(function(){
var seepa = 0;
if(Font_Size < iTerget){
seepa = 2;
}
else{
seepa = -2;
}
//
var seepax =0;
if(Width_da < iWidth){
seepax =50;
}
else{
seepax = -50;
}
//
if(Font_Size == iTerget){
//alert('测试');
clearInterval(tmier);
}
else{
//alert('测试');
Font_Size+= seepa;
Width_da+=seepax;
this.children[0].style.fontSize = Font_Size + 'px';
this.style.width = Width_da +'px';
}
}, 30);
}
</script>
</head>
<body>
<div id="ods" onmouseenter="fontSize_da(24, 604);" onmouseout="fontSize_da(14, 300);">
<span>基础运动 - 文字放大缩小</span>
</div>
<div onmouseenter="fontSize_da(24, 604);" onmouseout="fontSize_da(14, 300);">
<span>这是什么</span>
</div>
</body>
</html>解决方案
主要有两个问题：
-
这里不是
this：this.children[0].style.fontSize = Font_Size + 'px'; this.style.width = Width_da +'px';某元素绑定的事件函数中，this并不指代当前元素，只有
event.currentTarget表示当前事件元素。 -
你使用了异步函数
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'; ...... }
这篇关于javascript - 求教大神们，关于JS同一特效在同一个网页多次调用的问题..的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
