用jquery实现鼠标经过,点击图片样式。 补充一下使用场景:如果鼠标点击了A,当时的情况A显示为 A3.JPG,其它均为B1.JPG,C1.JPG........同时,鼠标移动到B,C,D...时,A3.JPG不变,移动到B显示B2.jpg,移动到C显示C2.jpg,..同时,当鼠标点击C时,C显示为C3.JPG, A3.jpg马上换回a1.jpg 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!DOCTYP><html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script type="text/javascript" src="http://cloud.xing-xing.com/jquery.js"></script><style> html, body{height: 100%}</style> </head><body><div><img src="a1.png" id="a" style="width: 48px;height:48px;" onmouseout = "mouseOut(this)" onmouseover="mouseOver(this)" onclick="mouseclick(this)"/><img src="b1.png" id="b" style="width: 48px;height:48px;" onmouseout = "mouseOut(this)" onmouseover="mouseOver(this)" onclick="mouseclick(this)"/><img src="c1.png" id="c" style="width: 48px;height:48px;" onmouseout = "mouseOut(this)" onmouseover="mouseOver(this)" onclick="mouseclick(this)"/></div></body> <script>function mouseOver(obj){ var name = $(obj).attr("id"); $("#"+name).attr("src", name+"2.png");}function mouseOut(obj){ var name = $(obj).attr("id"); $("#"+name).attr("src", name+"1.png");}function mouseclick(obj){ var name = $(obj).attr("id"); var borthers = $(obj).siblings(); for(var i = 0; i < borthers.length; i++){ var _other = borthers[i]; var _otherName = $(_other).attr("id"); $(_other).attr("src", _otherName+"1.png").attr("onmouseover","mouseOver(this)").attr("onmouseout","mouseOut(this)"); } $("#"+name).attr("src", name+"3.png").attr("onmouseover","").attr("onmouseout","");}</script></html> <!DOCTYP><html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script type="text/javascript" src="http://cloud.xing-xing.com/jquery.js"></script><style> html, body{height: 100%}</style> </head><body><div><img src="a1.png" id="a" style="width: 48px;height:48px;" onmouseout = "mouseOut(this)" onmouseover="mouseOver(this)" onclick="mouseclick(this)"/><img src="b1.png" id="b" style="width: 48px;height:48px;" onmouseout = "mouseOut(this)" onmouseover="mouseOver(this)" onclick="mouseclick(this)"/><img src="c1.png" id="c" style="width: 48px;height:48px;" onmouseout = "mouseOut(this)" onmouseover="mouseOver(this)" onclick="mouseclick(this)"/></div></body> <script>function mouseOver(obj){ var name = $(obj).attr("id"); $("#"+name).attr("src", name+"2.png");}function mouseOut(obj){ var name = $(obj).attr("id"); $("#"+name).attr("src", name+"1.png");}function mouseclick(obj){ var name = $(obj).attr("id"); var borthers = $(obj).siblings(); for(var i = 0; i < borthers.length; i++){ var _other = borthers[i]; var _otherName = $(_other).attr("id"); $(_other).attr("src", _otherName+"1.png").attr("onmouseover","mouseOver(this)").attr("onmouseout","mouseOut(this)"); } if($("#"+name).attr("onmouseout") == ""){ $("#"+name).attr("src", name+"1.png").attr("onmouseover","mouseOver(this)").attr("onmouseout","mouseOut(this)"); }else{ $("#"+name).attr("src", name+"3.png").attr("onmouseover","").attr("onmouseout",""); }}</script></html>修改一下 可以在原图上面连续点击 谢谢Ragin,现在还有一个小问题,再改下就完全跟我预想的一样。问题:当鼠标已经选中一个按钮的状态时,鼠标移动到其它按钮上时要有 mouseOver的效果,现在是没选中的时候有mouseOver效果,其中一个选中了就没了。 选中A图片以后 A图片还要有mouseover的效果 是这个意思吗 选中A图后,B,C,D....那些要有mouseover效果。现在测试,还发现一个问题,如果按钮不加链接,选中A后,再按B,A能回到初始状态,如果加了链接,按A完了再按B,都是选中状态,你可以加个<a href="#">看看效果。 选中A图后,B,C,D....那些要有mouseover效果。现在测试,还发现一个问题,如果按钮不加链接,选中A后,再按B,A能回到初始状态,如果加了链接,按A完了再按B,都是选中状态,你可以加个<a href="#">看看效果。发下代码,还有你用什么浏览器测的。 我这边IE11 10 9 8 , google , firefox测试是没问题的 <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script type="text/javascript" src="include/JSdate/js/jquery.min.js"></script><style> html, body{height: 100%}</style> </head><body><div><a href="#"><img src="images/an_1_1.gif" name="an_1_" border="0" id="an_1_" onClick="mouseclick(this)" onmouseover="mouseOver(this)" onmouseout = "mouseOut(this)"/></a><a href="#"><img src="images/an_2_1.gif" name="an_2_" border="0" id="an_2_" onClick="mouseclick(this)" onmouseover="mouseOver(this)" onmouseout = "mouseOut(this)"/></a><a href="#"><img src="images/an_3_1.gif" name="an_3_" border="0" id="an_3_" onClick="mouseclick(this)" onmouseover="mouseOver(this)" onmouseout = "mouseOut(this)"/></a></div></body> <script>function mouseOver(obj){ var name = $(obj).attr("id"); $("#"+name).attr("src", "images/"+name+"2.gif");}function mouseOut(obj){ var name = $(obj).attr("id"); $("#"+name).attr("src", "images/"+name+"1.gif");}function mouseclick(obj){ var name = $(obj).attr("id"); var borthers = $(obj).siblings(); for(var i = 0; i < borthers.length; i++){ var _other = borthers[i]; var _otherName = $(_other).attr("id"); $(_other).attr("src","images/"+ _otherName+"1.gif").attr("onmouseover","mouseOver(this)").attr("onmouseout","mouseOut(this)"); } $("#"+name).attr("src", "images/"+name+"3.gif").attr("onmouseover","").attr("onmouseout","");}</script></html>就是在你的代码上稍微修改了下图片名称和路径,然后加了个链接。 加<a>标签以后var borthers = $(obj).siblings(); //获取img标签的兄弟节点这句话就失效了 所以都是选中状态。你说的问题 我在ie7测出来了 这个能力不足 对不起了。 把3种状态的图片合成一张图 ,css设置为按钮的背景图片,通过事件来改变背景图片定位 个人觉得比上面用img的src来控制比较好,然后设置一个点击的class名的背景定位。当哪个按钮点击时,事件触发添加这个class其他按钮移除。 html 关于用js实现模拟搜索框的功能 jquery IE正常 火狐不正常运行 一个特殊字符转义的问题 象这种选中的效果用js怎么写 执行很多for循环的时候浏览器像死机,怎样能让它同时可响应浏览器事件? js 按纽问题,在线等! JS操作REAL播放控件 关于超链接的问题 求助! meizz(梅花雨)请进 求教jquery问题-----asyncbox 与后台交互的等待时间的动画如何实现
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://cloud.xing-xing.com/jquery.js"></script>
<style>
html, body{height: 100%}
</style>
</head>
<body>
<div>
<img src="a1.png" id="a" style="width: 48px;height:48px;" onmouseout = "mouseOut(this)" onmouseover="mouseOver(this)" onclick="mouseclick(this)"/>
<img src="b1.png" id="b" style="width: 48px;height:48px;" onmouseout = "mouseOut(this)" onmouseover="mouseOver(this)" onclick="mouseclick(this)"/>
<img src="c1.png" id="c" style="width: 48px;height:48px;" onmouseout = "mouseOut(this)" onmouseover="mouseOver(this)" onclick="mouseclick(this)"/>
</div>
</body>
<script>
function mouseOver(obj){
var name = $(obj).attr("id");
$("#"+name).attr("src", name+"2.png");
}
function mouseOut(obj){
var name = $(obj).attr("id");
$("#"+name).attr("src", name+"1.png");
}
function mouseclick(obj){
var name = $(obj).attr("id");
var borthers = $(obj).siblings();
for(var i = 0; i < borthers.length; i++){
var _other = borthers[i];
var _otherName = $(_other).attr("id");
$(_other).attr("src", _otherName+"1.png").attr("onmouseover","mouseOver(this)").attr("onmouseout","mouseOut(this)");
}
$("#"+name).attr("src", name+"3.png").attr("onmouseover","").attr("onmouseout","");
}
</script>
</html>
<!DOCTYP>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://cloud.xing-xing.com/jquery.js"></script>
<style>
html, body{height: 100%}
</style>
</head>
<body>
<div>
<img src="a1.png" id="a" style="width: 48px;height:48px;" onmouseout = "mouseOut(this)" onmouseover="mouseOver(this)" onclick="mouseclick(this)"/>
<img src="b1.png" id="b" style="width: 48px;height:48px;" onmouseout = "mouseOut(this)" onmouseover="mouseOver(this)" onclick="mouseclick(this)"/>
<img src="c1.png" id="c" style="width: 48px;height:48px;" onmouseout = "mouseOut(this)" onmouseover="mouseOver(this)" onclick="mouseclick(this)"/>
</div>
</body>
<script>
function mouseOver(obj){
var name = $(obj).attr("id");
$("#"+name).attr("src", name+"2.png");
}
function mouseOut(obj){
var name = $(obj).attr("id");
$("#"+name).attr("src", name+"1.png");
}
function mouseclick(obj){
var name = $(obj).attr("id");
var borthers = $(obj).siblings();
for(var i = 0; i < borthers.length; i++){
var _other = borthers[i];
var _otherName = $(_other).attr("id");
$(_other).attr("src", _otherName+"1.png").attr("onmouseover","mouseOver(this)").attr("onmouseout","mouseOut(this)");
}
if($("#"+name).attr("onmouseout") == ""){
$("#"+name).attr("src", name+"1.png").attr("onmouseover","mouseOver(this)").attr("onmouseout","mouseOut(this)");
}else{
$("#"+name).attr("src", name+"3.png").attr("onmouseover","").attr("onmouseout","");
}
}
</script>
</html>
修改一下 可以在原图上面连续点击
谢谢Ragin,现在还有一个小问题,再改下就完全跟我预想的一样。问题:当鼠标已经选中一个按钮的状态时,鼠标移动到其它按钮上时要有 mouseOver的效果,现在是没选中的时候有mouseOver效果,其中一个选中了就没了。
选中A图后,B,C,D....那些要有mouseover效果。现在测试,还发现一个问题,如果按钮不加链接,选中A后,再按B,A能回到初始状态,如果加了链接,按A完了再按B,都是选中状态,你可以加个<a href="#">看看效果。
选中A图后,B,C,D....那些要有mouseover效果。现在测试,还发现一个问题,如果按钮不加链接,选中A后,再按B,A能回到初始状态,如果加了链接,按A完了再按B,都是选中状态,你可以加个<a href="#">看看效果。发下代码,还有你用什么浏览器测的。 我这边IE11 10 9 8 , google , firefox测试是没问题的
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="include/JSdate/js/jquery.min.js"></script>
<style>
html, body{height: 100%}
</style>
</head>
<body>
<div>
<a href="#"><img src="images/an_1_1.gif" name="an_1_" border="0" id="an_1_" onClick="mouseclick(this)" onmouseover="mouseOver(this)" onmouseout = "mouseOut(this)"/></a>
<a href="#"><img src="images/an_2_1.gif" name="an_2_" border="0" id="an_2_" onClick="mouseclick(this)" onmouseover="mouseOver(this)" onmouseout = "mouseOut(this)"/></a>
<a href="#"><img src="images/an_3_1.gif" name="an_3_" border="0" id="an_3_" onClick="mouseclick(this)" onmouseover="mouseOver(this)" onmouseout = "mouseOut(this)"/></a>
</div>
</body>
<script>
function mouseOver(obj){
var name = $(obj).attr("id");
$("#"+name).attr("src", "images/"+name+"2.gif");
}
function mouseOut(obj){
var name = $(obj).attr("id");
$("#"+name).attr("src", "images/"+name+"1.gif");
}
function mouseclick(obj){
var name = $(obj).attr("id");
var borthers = $(obj).siblings();
for(var i = 0; i < borthers.length; i++){
var _other = borthers[i];
var _otherName = $(_other).attr("id");
$(_other).attr("src","images/"+ _otherName+"1.gif").attr("onmouseover","mouseOver(this)").attr("onmouseout","mouseOut(this)");
}
$("#"+name).attr("src", "images/"+name+"3.gif").attr("onmouseover","").attr("onmouseout","");
}
</script></html>
就是在你的代码上稍微修改了下图片名称和路径,然后加了个链接。
var borthers = $(obj).siblings(); //获取img标签的兄弟节点
这句话就失效了 所以都是选中状态。你说的问题 我在ie7测出来了 这个能力不足 对不起了。
个人觉得比上面用img的src来控制比较好,然后设置一个点击的class名的背景定位。当哪个按钮点击时,事件触发添加这个class其他按钮移除。