javascript关于鼠标的移入移除事件的问题
就是一个商品图片，然后自己会循环的滚动图片的内容！当鼠标放在图片上时要是图片的内容禁止继续循环变化！！这个已经实现了，但是就是找不到鼠标的移除事件！！！求解！！！！onm...
就是一个商品图片 ，然后自己会循环的滚动图片的内容！
当鼠标放在图片上时要是图片的内容禁止继续循环变化！！这个已经实现了，但是 就是找不到鼠标的移除事件！！！求解！！！！
onmouseleave事件，img 标签没有
onmouseout，onmousemove都不行！！！求解！！急在线等 展开
当鼠标放在图片上时要是图片的内容禁止继续循环变化！！这个已经实现了，但是 就是找不到鼠标的移除事件！！！求解！！！！
onmouseleave事件，img 标签没有
onmouseout，onmousemove都不行！！！求解！！急在线等 展开
2个回答
展开全部
下面是我以前写的一个测试的。你自己建立一个html文件拷贝进去，修改下图片地址。对了我用了jquery。这个你应该知道吧。
<html>
<head>
<style>
*{
margin:0px;
padding:0px;
}
#adv_div{
border : 1px solid #aaaaaa;
margin-left:200px;
margin-top:40px;
width:548px;
height:177px;
overflow:hidden;
position:relative;
}
#adv,#index{
position:absolute;
}
ul li{
list-style:none;
display:inline;
}
ul adv{
width:548px;
height:177px;
display:block;
}
#index{
right:5px;
bottom:5px;
}
#index li{
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
}
.on{
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color:red;
font-weight: bold;
}
</style>
<script type="text/javascript" src="F:\Workspaces\_MyStudy\js\jquery-1.4.3.js"></script>
<script>
var adv_height = 177;
var adv_index = 0;
var adv_task;
$(function(){
$('#index li').mouseenter(function(){
var index = $('#index li').index(this);
showAdv(index);
});
showAdv(0);
$('#adv_div').hover(function(){
clearInterval(adv_task);
},function(){
adv_task = setInterval(function(){
showAdv(adv_index);
},2000);
}).mouseleave();
});
function showAdv(index){
$('#adv').stop(true).animate({'top':-1*adv_height*index},1000);
$('#index li').removeClass('on');
$('#index li').eq(index).addClass('on');
adv_index = index+1;
if(adv_index==5)adv_index=0;
}
</script>
</head>
<body>
<div id="adv_div">
<ul id="adv">
<li><img src="F:\Workspaces\_MyStudy\image\02_1.jpg"/></li>
<li><img src="F:\Workspaces\_MyStudy\image\02_2.jpg"/></li>
<li><img src="F:\Workspaces\_MyStudy\image\02_3.jpg"/></li>
<li><img src="F:\Workspaces\_MyStudy\image\02_4.jpg"/></li>
<li><img src="F:\Workspaces\_MyStudy\image\02_5.jpg"/></li>
</ul>
<ul id="index">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<style>
*{
margin:0px;
padding:0px;
}
#adv_div{
border : 1px solid #aaaaaa;
margin-left:200px;
margin-top:40px;
width:548px;
height:177px;
overflow:hidden;
position:relative;
}
#adv,#index{
position:absolute;
}
ul li{
list-style:none;
display:inline;
}
ul adv{
width:548px;
height:177px;
display:block;
}
#index{
right:5px;
bottom:5px;
}
#index li{
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
}
.on{
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color:red;
font-weight: bold;
}
</style>
<script type="text/javascript" src="F:\Workspaces\_MyStudy\js\jquery-1.4.3.js"></script>
<script>
var adv_height = 177;
var adv_index = 0;
var adv_task;
$(function(){
$('#index li').mouseenter(function(){
var index = $('#index li').index(this);
showAdv(index);
});
showAdv(0);
$('#adv_div').hover(function(){
clearInterval(adv_task);
},function(){
adv_task = setInterval(function(){
showAdv(adv_index);
},2000);
}).mouseleave();
});
function showAdv(index){
$('#adv').stop(true).animate({'top':-1*adv_height*index},1000);
$('#index li').removeClass('on');
$('#index li').eq(index).addClass('on');
adv_index = index+1;
if(adv_index==5)adv_index=0;
}
</script>
</head>
<body>
<div id="adv_div">
<ul id="adv">
<li><img src="F:\Workspaces\_MyStudy\image\02_1.jpg"/></li>
<li><img src="F:\Workspaces\_MyStudy\image\02_2.jpg"/></li>
<li><img src="F:\Workspaces\_MyStudy\image\02_3.jpg"/></li>
<li><img src="F:\Workspaces\_MyStudy\image\02_4.jpg"/></li>
<li><img src="F:\Workspaces\_MyStudy\image\02_5.jpg"/></li>
</ul>
<ul id="index">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
更多追问追答
追问
十分抱歉 还没学jquery ！！我不用这么多，实现鼠标移出图片范围后触发一个事件就可以了！！
追答
吧我的jquery该成了js的应该，看的懂吧 我实验没问题啊！！！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
onmouseout就是鼠标移出事件（out就是外面的意思），如果你觉得不行，那就是你的代码有问题。
你试试下面的代码就知道了：
<div style="width:100px; height:100px; border:1px solid #00" onmouseover="this.innerText='鼠标移入';" onmouseout="this.innerText='鼠标移出';"></div>
你试试下面的代码就知道了：
<div style="width:100px; height:100px; border:1px solid #00" onmouseover="this.innerText='鼠标移入';" onmouseout="this.innerText='鼠标移出';"></div>
更多追问追答
追问
<img>标签的onmouseout的属性不行，为甚么？？？你的这个代码没问题！！
但是我这里不行！！贴代码！
这是div
追答
onmouseout="two=setTimeout('showtwo()',1000);"
试试看行不
另外能看看cleartwo的代码么？
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
