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

鼠标滑过图片切换图片 2022-11-15 22:11:39 783人浏览安东尼

摘要

在很多网站上我们会发现当鼠标滑过一张图片后，这张图片切换为了另外的一张图片。这里小编说说这是怎么实现的。在写javascript代码前我们必须要有实验的html代码 <ht

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

在写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">

</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);
});
});

这里大家迷惑的是为什么要预载入图片呢？因为在网站上不像我们本地调试，图片下载这么快。如果是在互联网上，当鼠标滑过将要切换的图片时，替换的图片还要临时下载，加载图片的过程是比较慢的。所以我们预载入图片可以解决这个问题。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JS鼠标滑过图片时切换图片实现思路

本文链接: https://www.lsjlt.com/news/172509.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

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

在很多网站上我们会发现当鼠标滑过一张图片后，这张图片切换为了另外的一张图片。这里小编说说这是怎么实现的。在写Javascript代码前我们必须要有实验的HTML代码复制代码代码...

99+

2022-11-15

鼠标滑过图片切换图片
Vue实现鼠标悬浮切换图片src

本文实例为大家分享了Vue实现鼠标悬浮切换图片src的具体代码，供大家参考，具体内容如下需求： 1. 鼠标悬浮到图示按钮上面，图片切换成灰色按钮2. 鼠标离开图示按钮，图片切换成回...

99+

2024-04-02
Vue 图片监听鼠标滑轮滚动实现图片缩小放大功能(实现思路)

目录前言效果：实现思路全页面代码：相关知识点分享前言其实想要实现功能很简单，就是在一张图片上监听鼠标滑轮滚动的事件，然后根据上滚还是下滚实现图片的缩放。效果：注：该配图使用《...

99+

2023-05-13

vue图片缩小放大 vue鼠标滑轮滚动
Vue如何实现鼠标悬浮切换图片

这篇“Vue如何实现鼠标悬浮切换图片”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue如何实现鼠标悬浮切换图片”文章吧。需...

99+

2023-06-29
js实现图片数组中图片切换效果

写一个图片切换的小案例，巩固一下setAttribute的用法。setAttribute()方法能够给dom元素添加属性并指定属性值，如果属性已经存在则更改属性值。方法：将图片放入...

99+

2024-04-02
js实现简单图片切换

本文实例为大家分享了JavaScript实现图片间切换的具体代码，供大家参考，具体内容如下代码的主要思路： 1、先给“下一张”和“上一张&rdq...

99+

2024-04-02
JS实现图片上下切换

本文实例为大家分享了JS实现图片上下切换的具体代码，供大家参考，具体内容如下源代码： <!DOCTYPE html> <html lang="en"&...

99+

2024-04-02
jQuery如何实现鼠标滑过预览图片大图效果

这篇文章将为大家详细讲解有关jQuery如何实现鼠标滑过预览图片大图效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。需求是这样的：鼠标移动的图片上，同时显...

99+

2024-04-02
CSS中怎么实现鼠标移动切换图片

本篇文章为大家展示了CSS中怎么实现鼠标移动切换图片，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。<!DOCTYPE html PUBLI...

99+

2024-04-02
Androidstudio实现左右滑动切换图片

本文实例为大家分享了Android studio实现左右滑动切换图片的具体代码，供大家参考，具体内容如下切换图片首先要使用到图片切换器ImageSwitcher 先了解一下Imag...

99+

2024-04-02
css如何实现鼠标滑过改变图片效果

这篇文章主要介绍“css如何实现鼠标滑过改变图片效果”，在日常操作中，相信很多人在css如何实现鼠标滑过改变图片效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css如何实...

99+

2024-04-02
Android实现左右滑动切换图片

简要说明本文采用ImageSwitcher实现左右滑动切换图片。首先调用setFactory方法，设置视图工厂；然后设置手指触碰监听，判断左滑右滑进而切换图片。本地图片 xml ...

99+

2024-04-02
AndroidFlutter实现图片滑动切换效果

目录前言SlideTransition 介绍示例效果实现总结前言我们开始来介绍转换类的动画组件，实际上这类转换动画组件也可以自己通过 AnimatedBuilder&nb...

99+

2024-04-02
css如何让鼠标滑过图片旋转

小编给大家分享一下css如何让鼠标滑过图片旋转，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！在css中，可以使用“:hover”伪类选择器和transform...

99+

2024-04-02
纯CSS3怎么实现鼠标滑过图片动画效果

本篇内容介绍了“纯CSS3怎么实现鼠标滑过图片动画效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！这些鼠...

99+

2024-04-02
js实现图片轮播切换效果

最近在b站上学习的时候，学到了一个用原生js实现图片轮播切换效果的实战，码下来收藏上图是这个小实战的效果图，整个小实战所实现的功能是图片自动轮播切换、点击上下键图片切换上下图片、...

99+

2024-04-02
css怎么实现滑动鼠标到img后切换图片移开恢复默认

这篇文章主要讲解了“css怎么实现滑动鼠标到img后切换图片移开恢复默认”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css怎么实现滑动鼠标到img后切换图...

99+

2024-04-02
Android怎么实现左右滑动切换图片

这篇文章主要介绍“Android怎么实现左右滑动切换图片”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Android怎么实现左右滑动切换图片”文章能帮助大家解决问题。简要说明本文采用ImageSwi...

99+

2023-06-30
css如何实现鼠标经过图片超链接时改变图片的大小

小编给大家分享一下css如何实现鼠标经过图片超链接时改变图片的大小，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！鼠标经过时图片超链接改变的办法：代码如下:a:hover img{ height:&nbs...

99+

2023-06-08
android怎么实现点击图片切换图片

在 Android 中，可以通过给 ImageView 添加点击事件来实现点击图片切换图片的功能。下面是一个示例代码：1. 在 XM...

99+

2023-08-18

android