WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
网站地图 加入收藏 设为首页
您的位置:本站首页>>前端特效>>Javascript实现鼠标经过图片变换图片的效果

Javascript实现鼠标经过图片变换图片的效果

[ 录入者:91ctc | 时间:2015-06-23 12:33:09 | 作者: 91ctc| 来源:本站原创 | 浏览: 次 ]

本文介绍使用Javascript实现鼠标经过图片变换图片的效果(演示)。直接给代码:

JS部分:

// JavaScript by northStar
function ShowIndexThis(img)
{
	img.src="images/1.jpg";
}
function ShowIndexNext(img)
{
	img.src="images/2.jpg";
}

HTML部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>【www.91ctc.com】javascript鼠标经过图像变换图片效果</title>
<script type="text/javascript" src="js/js.js"></script>
</head>

<body>
<p>鼠标移到图片上看看效果</p>
<a href="index.html"><img src="images/1.jpg" width="249" height="56" border="0" onmouseover="ShowIndexNext(this);" onmouseout="ShowIndexThis(this);"/></a>
</body>
</html>

调用方法为onmouseover="ShowIndexNext(this);" onmouseout="ShowIndexThis(this);"。代码很简单。不再赘述。实在看不懂代码,可以使用Dreamweaver生成这个效果。也可以纯CSS和HTML实现这个效果

PS:如果您对本文有纠错、质疑、转载、举报等问题时,请加入到网站Q&Q&群:86783981(验证信息:91ctc.com)提交您的问题,让大伙一块讨论。谢谢您的支持,计算机教程中心网将会一如既往的提供优秀资源助您一臂之力!
关闭】【返回顶部

下一篇:没有了!
您可能感兴趣的文章
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。网站Q&Q&群:86783981(验证信息:91ctc.com)
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号