javascript关于鼠标的移入移除事件的问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript关于鼠标的移入移除事件的问题相关的知识,希望对你有一定的参考价值。

就是一个商品图片 ,然后自己会循环的滚动图片的内容!

当鼠标放在图片上时要是图片的内容禁止继续循环变化!!这个已经实现了,但是 就是找不到鼠标的移除事件!!!求解!!!!
onmouseleave事件,img 标签没有
onmouseout,onmousemove都不行!!!求解!!急在线等

下面是我以前写的一个测试的。你自己建立一个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>追问

十分抱歉 还没学jquery !!我不用这么多,实现鼠标移出图片范围后触发一个事件就可以了!!

追答

吧我的jquery该成了js的应该,看的懂吧  我实验没问题啊!!!

追问

为什么 IE10 和 谷歌最新版 都没反应???不懂!

汗!!!你JavaScript没带过来!!难怪没反应!

追答

你把11111的那个div改成图片啊,我没有图片就用div模拟图片- -! 会动,会停,会再动吧。我测试没问题~~~~~~~

sorry,我的动画是用jquery,这个应该不影响吧。你把我注释的那个改成你动画的代码就行了。

这个我把jquery的js也给你应该可以运行了。试试

追问

抱歉 还是不行 !!!!

参考技术A onmouseout就是鼠标移出事件(out就是外面的意思),如果你觉得不行,那就是你的代码有问题。

你试试下面的代码就知道了:

<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的代码么?

追问

厉害 果然不愧是十五级的大神!!为甚么我再次重新调用哪个之前的方法就不行勒??
直接onmouseout="javascript:showtwo();"不行, 这样也不行onmouseout=“javascript:showtwo();”
这两中写法,停止后,鼠标离开了都不会调用这个方法,为啥??求解!!谢谢!!

追答

因为two必须是全局变量才行

追问

是我错了,写反了.粗心啊!!哎!!!十分感谢你!!!

追答

呵呵,我说嘛,这个two必须得是全局变量啊,原来如此

本回答被提问者采纳

jQuery的鼠标事件总结

jQuery的鼠标事件总结


1、click()事件。

2、dbclick()鼠标双击事件

3、mousedown()鼠标按下事件

4、mouseup()鼠标松开事件

5、mouseover()从一个元素移入另一个元素时触发

6、mouseout()鼠标移出元素时触发

7、mouseenter()鼠标移入元素时触发

8、mouseleave()鼠标移除元素触发

9、hover()鼠标移入元素上面

10、toggle()鼠标切换事件

 

以上是关于javascript关于鼠标的移入移除事件的问题的主要内容,如果未能解决你的问题,请参考以下文章

javascript鼠标移入移出事件

jQuery的鼠标事件总结

javascript --- 鼠标事件

javascript父级鼠标移入移出事件中的子集影响父级的处理方法

javascript的基础知识

javascript的基础知识