JS鼠标滑过图片时切换图片实现思路_鼠标经过切换图片 - CSDN文库

鼠标滑过图片

9 浏览量更新于2023-03-03 评论收藏 33KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

JS鼠标滑过图片时切换图片实现思路鼠标滑过图片时切换图片实现思路

在浏览网页时会看到这样的效果：当鼠标滑过一张图片后，这张图片切换为了另外的一张图片，下面为大家介

绍下具体是如何实现的，感兴趣的朋友不要错过

在很多网站上我们会发现当鼠标滑过一张图片后，这张图片切换为了另外的一张图片。这里小编说说这是怎么实现的。

在写Javascript代码前我们必须要有实验的HTML代码

复制代码代码如下:

<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>

下面来重点分析JS代码

复制代码代码如下:

$(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);

});

});

这里大家迷惑的是为什么要预载入图片呢？因为在网站上不像我们本地调试，图片下载这么快。如果是在互联网上，当鼠标滑

过将要切换的图片时，替换的图片还要临时下载，加载图片的过程是比较慢的。所以我们预载入图片可以解决这个问题。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论0

weixin_38738511

粉丝: 3
资源: 898

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈