js如何实现鼠标经过图片的切换
想做这样一个类似于中国海油网站的如图模块鼠标经过不同的模块时其背景图片切换背景色改变请问怎么实现的？最好附代码谢谢...
想做这样一个类似于中国海油网站的如图模块 鼠标经过不同的模块时 其背景图片切换 背景色改变 请问怎么实现的？最好附代码 谢谢
展开
展开全部
您好，这样的：
1、<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Jquery deal images</title>
<script src="./js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
//这里是JS代码 ，下面豆芽会写上
//-->
</script>
</head>
<body>
<img src="./images/img02.png" />
</body>
</html>
2、
$(document).ready(function(){
var newImage = new Image(); //预载入图片
var oldImage = $('img').attr('src');
newImage.src = './images/img03.jpg';
$('img').hover(function(){ //鼠标滑过图片切换
$('img').attr('src',newImage.src);
},
function(){
$('img').attr('src',oldImage);
});
});
这里大家迷惑的是为什么要预载入图片呢？因为在网站上不像我们本地调试，图片下载这么快。如果是在互联网上，当鼠标滑过将要切换的图片时，替换的图片还要临时下载，加载图片的过程是比较慢的。所以我们预载入图片可以解决这个问题。
1、<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Jquery deal images</title>
<script src="./js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
//这里是JS代码 ，下面豆芽会写上
//-->
</script>
</head>
<body>
<img src="./images/img02.png" />
</body>
</html>
2、
$(document).ready(function(){
var newImage = new Image(); //预载入图片
var oldImage = $('img').attr('src');
newImage.src = './images/img03.jpg';
$('img').hover(function(){ //鼠标滑过图片切换
$('img').attr('src',newImage.src);
},
function(){
$('img').attr('src',oldImage);
});
});
这里大家迷惑的是为什么要预载入图片呢？因为在网站上不像我们本地调试，图片下载这么快。如果是在互联网上，当鼠标滑过将要切换的图片时，替换的图片还要临时下载，加载图片的过程是比较慢的。所以我们预载入图片可以解决这个问题。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
