<!doctype html>
<html>
<head>
<title>image's transition</title>
<script type="text/javascript">
window.onload = function(){
var pic_wrapper = document.getElementById("pic_wrapper");
var ul = document.getElementsByTagName("ul")[0];
var lis= document.getElementsByTagName("li");
var imgs = pic_wrapper.getElementsByTagName("img");
//使用for循环绑定事件处理函数,通过测试
// for (var i = 0; i < lis.length; i++) {
// var img = imgs[i];
// var li = lis[i];
// setOpacity(li,img);
// function setOpacity(li1,img1){
// li1.onmouseover = function(){
// setAllOpacity();
// img1.style.opacity = "1";
// };
// }
// };
function setAllOpacity(){
for(var i = 0; i < imgs.length; i++){
imgs[i].style.opacity = "0";
}
}
//使用事件委托方式,但存在问题
ul.onmouseover = function(event){
event = event || window.event;
var target = event.target || event.srcElement;
switch(target.id){//问题在于target.id,通过正常交互无法获取target.id
case "li1":
setAllOpacity();
imgs[0].style.opacity = "1";alert("li1");
break;
case "li2":
setAllOpacity();
imgs[1].style.opacity = "1";alert("li2");
break;
case "li3":
setAllOpacity();
imgs[2].style.opacity = "1";
break;
case "li4":
setAllOpacity();
imgs[3].style.opacity = "1";
break;
}
};
function fire(elem, type){
var evt;
if(document.createEventObject){
elem.fireEvent('on'+type);
}else{
evt = document.createEvent('MouseEvents');
evt.initEvent(type, true, false);
elem.dispatchEvent(evt);
}
}
fire(lis[0],"mouseover");//通过手动触发事件,可以获取target
};
</script>
<style type="text/css">
*{
padding: 0;
border: 0;
margin: 0;
}
#wrapper{
width: 800px;
height: 600px;
margin: 20px auto;
position: relative;
overflow: hidden;
}
#pic_wrapper{
position: absolute;
}
#pic_wrapper img{
width: 800px;
height: 600px;
position: absolute;
transition: opacity 0.5s ease-in;
opacity: 0;
}
.num{
position: absolute;
bottom: 50px;
left: 390px;
}
li{
display: inline;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="pic_wrapper">
<img src="transition1.jpg">
<img src="transition2.jpg">
<img src="transition3.jpg">
<img src="transition4.jpg">
</div>
<ul class="num">
<li id="li1"><img src="num.jpg"></li>
<li id="li2"><img src="num.jpg"></li>
<li id="li3"><img src="num.jpg"></li>
<li id="li4"><img src="num.jpg"></li>
</ul>
</div>
</body>
</html>
javascript中使用事件委托无法获取到event.target
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答
- Go 旅城通票 2014-11-18 08:27关注
switch (**target.id||target.parentNode.id**) {
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥60 版本过低apk如何修改可以兼容新的安卓系统
- ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
- ¥50 有数据,怎么建立模型求影响全要素生产率的因素
- ¥50 有数据,怎么用matlab求全要素生产率
- ¥15 TI的insta-spin例程
- ¥15 完成下列问题完成下列问题
- ¥15 C#算法问题, 不知道怎么处理这个数据的转换
- ¥15 YoloV5 第三方库的版本对照问题
- ¥15 请完成下列相关问题!
- ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像,如何解决?