JS或Jquery高手请进关于img鼠标按下换图片,松开后恢复原来图片的疑惑
如图我现在用JS实现的,主要代码如下imgs[i].onmousedown=function(){varme=this;//保存this实例//如果不是大小写按钮,为了有...
如图
我现在用JS实现的,主要代码如下
imgs[i].onmousedown=function(){
var me =this;//保存this实例
//如果不是大小写按钮,为了有闪一下的效果,先将图片换成背景色为黄色的按钮,然后在设置超时器,100秒后,再回复原来的图片
changeSrc(me,false);
setTimeout(function(){changeSrc(me,true)},100);
}
var changeSrc=function(obj,flag){
//未点击图片如A按钮dlan_03.jpg,点击时的图片为dlan_03_01.jpg
var src=obj.src;
src=src.substr(0,src.lastIndexOf("."));//把".jpg"去掉
var pos=src.lastIndexOf("_");//查看最后一个_后面的两位是不是01
if(src.substr(pos+1,2)==01&&flag){//如果是点击过的,则将后面的_01去掉
obj.src=src.substr(0,pos)+".jpg";
}else{
obj.src=src+"_01.jpg";//如果是刚点击,则将src加上_01
}
}
一开始也是用onmousedown和onmouseup实现的,但是,如果你单击的太快的话,会来不及执行函数,从而导致与想要的结果不一样,所以就改成用 setTimeout(function(){changeSrc(me,true)},100);,100毫秒后就自动恢复
我想问的是,有没有简单点的实现?就是鼠标按下变换图片,并且一直保持到鼠标松开后恢复原来图片,不会出现点击太快来不及执行的情况(变换css也行) 展开
我现在用JS实现的,主要代码如下
imgs[i].onmousedown=function(){
var me =this;//保存this实例
//如果不是大小写按钮,为了有闪一下的效果,先将图片换成背景色为黄色的按钮,然后在设置超时器,100秒后,再回复原来的图片
changeSrc(me,false);
setTimeout(function(){changeSrc(me,true)},100);
}
var changeSrc=function(obj,flag){
//未点击图片如A按钮dlan_03.jpg,点击时的图片为dlan_03_01.jpg
var src=obj.src;
src=src.substr(0,src.lastIndexOf("."));//把".jpg"去掉
var pos=src.lastIndexOf("_");//查看最后一个_后面的两位是不是01
if(src.substr(pos+1,2)==01&&flag){//如果是点击过的,则将后面的_01去掉
obj.src=src.substr(0,pos)+".jpg";
}else{
obj.src=src+"_01.jpg";//如果是刚点击,则将src加上_01
}
}
一开始也是用onmousedown和onmouseup实现的,但是,如果你单击的太快的话,会来不及执行函数,从而导致与想要的结果不一样,所以就改成用 setTimeout(function(){changeSrc(me,true)},100);,100毫秒后就自动恢复
我想问的是,有没有简单点的实现?就是鼠标按下变换图片,并且一直保持到鼠标松开后恢复原来图片,不会出现点击太快来不及执行的情况(变换css也行) 展开
2个回答
展开全部
其实你可以实现鼠标移上去变换图片，鼠标移走再恢复、、这样就不会出现那种瞬间的情况、
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
function btnClick(){
document.getElementById("aa").value="鼠标点击";
//你可以选择鼠标点击时候的图片 更换css什么的
}
function btnUp(){
document.getElementById("aa").value="鼠标松开";
//你可以选择鼠标松开时候的图片 更换css什么的}
</script>
</HEAD>
<BODY>
<input type="button" value="1" id="aa" onmousedown="btnClick()" onmouseup="btnUp()"/>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
function btnClick(){
document.getElementById("aa").value="鼠标点击";
//你可以选择鼠标点击时候的图片 更换css什么的
}
function btnUp(){
document.getElementById("aa").value="鼠标松开";
//你可以选择鼠标松开时候的图片 更换css什么的}
</script>
</HEAD>
<BODY>
<input type="button" value="1" id="aa" onmousedown="btnClick()" onmouseup="btnUp()"/>
</BODY>
</HTML>
追问
firebug打印的如下,是先执行的是mouseup,再执行的click,网上的解释是click相当于先mousedown+mouseclick
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
