首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

请问一个简单的JS图片变换效果

2012-03-23 
请教一个简单的JS图片变换效果img srchttp://www.baidu.com/img/baidu_logo.gif altonmouseovert

请教一个简单的JS图片变换效果
<img src="http://www.baidu.com/img/baidu_logo.gif" alt="" onmouseover="this.src='http://www.google.com.hk/logos/hubble10-hp-bg.png'" onmouseout="this.src='http://www.baidu.com/img/baidu_logo.gif'"/>

这个代码可以实行一个简单的图片变换效果,如果要把这写JS应该什么样的,如何去思考,请教了,刚学JS好多东西不知道如何去思考,请大家多多帮忙。

[解决办法]

HTML code
<script>function alterImg(o,flag){  var img1="http://www.google.com.hk/logos/hubble10-hp-bg.png"  var img2="http://www.baidu.com/img/baidu_logo.gif"  o.src=flag==0?img1:img2}</script><img src="http://www.baidu.com/img/baidu_logo.gif" alt="" onmouseover="alterImg(this,0)" onmouseout="alterImg(this,1)" />
[解决办法]
你的就是JS写的啊,要拿到外面就这样。

<img src="http://www.baidu.com/img/baidu_logo.gif" alt="" id="showimg" />
<script type="text/javascript">
//先获取图片标签对象
var imgobj = document.getElementById("showimg");

//鼠标进入标签对象事件
imgobj.onmouseover = function(){
//这里的this就是img标签,this.src赋值改变图片路径
this.src = "http://www.google.com.hk/logos/hubble10-hp-bg.png";
}

//鼠标离开对象事件
imgobj.onmouseout = function(){
this.src = "http://www.baidu.com/img/baidu_logo.gif";
}
</script>
[解决办法]
"?"是三元操作符
o.src=flag==0?img1:img2就相当于
if(flag==0){
o.src = img1;
}
else{
o.src = img2;
}
[解决办法]
4L解释很清楚了,呵呵。


o.src = flag==0? img1 : img2 就相当于
flag为0吗? 如果是src=img1 否则 src=img2
===============================================================
大家都是从小白阶段走过来的:)

找本书,先把基础部分看看就可以动手写了;边写边提高。
另外,多找些经典的js代码看看;看不懂的去翻书。很快就可以上手了。

加油~!

热点排行
Bad Request.