JS鼠标滑过图片时切换图片

http://www.aichengxu.com/article/Javascript/277_7.html
在很多网站上我们会发现当鼠标滑过一张图片后，这张图片切换为了另外的一张图片。这里豆芽说说这是怎么实现的。

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

下面来重点分析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);
    });
});

这里大家迷惑的是为什么要预载入图片呢？因为在网站上不像我们本地调试，图片下载这么快。如果是在互联网上，当鼠标滑过将要切换的图片时，替换的图片还要临时下载，加载图片的过程是比较慢的。所以我们预载入图片可以解决这个问题。
来源：豆芽博客,地址：http://www.aichengxu.com/article/Javascript/277_7.html保留原文链接,是开源分享的开始.

JS鼠标滑过图片时切换图片相关推荐

JS实现点击button按钮切换图片
JS实现点击button按钮切换图片放暑假在家打算学习html/css/js制作网页,只有html/css的一些基础.实现效果如图: 这个网页很简单,是用Dreamweaver写的,但是是通过自己做 ...
百度地图鼠标滑过marker时打开自定义信息窗口
在百度地图上实现鼠标滑过marker时打开自定义的信息窗口,当鼠标滑出marker时关闭已打开的信息窗口. 首先,需要在地图上添加一个marker,具体如下所示: $.ajax({async:fals ...
网页中通过js修改img的src属性刷新图片时，图片缓存问题现象表述及问题解决
问题:上传一张图片,通过js更新src属性刷新图片使其即时显示时, 当img的src当前的url与上次地址无变化时(只更改图片,名称不变,不同图片名称相同)图片不变化(仍显示原来的图片) 但通过fir ...
java 图片刷新页面_js修改img的src属性刷新图片时的图片缓存问题
问题:上传一张图片,通过js更新src属性刷新图片使其即时显示时, 当img的src当前的url与上次地址无变化时(只更改图片,名称不变,不同图片名称相同)图片不变化(仍显示原来的图片) 但通过fir ...
毕设时，在word中插入图片时，图片的格式改成嵌入式后图片藏于文字下方怎么办？
在写毕业论文时,插入的图片可以正常显示,但是当更改了论文的格式,将段落间距改为固定值20磅时,图片就出现问题,遇到这种问题的怎么办? 原理:word中图片的格式和文字段落的格式有密切的联系在使用wo ...
html怎么给图片加鼠标滑过效果,jquery给图片添加鼠标经过时的边框效果
一哥们儿要给图片添加鼠标经过时的边框效果,可惜出发点错了,直接加在了IMG外的A标签上致使鼠标经过时图片产生塌陷,实则应该将边框控制直接加在IMG标签上即可错误代码如下:注意红色部分设置 (出发点 ...
【HTML】- 鼠标悬停图片时切换查看器
1.效果 2.代码实现 2.1 HTML: <div id="box"><img id="showImg" src="../imag ...
html图片浮空但占位置,求助：鼠标经过图片时，图片悬浮出现变大
该楼层疑似违规已被系统折叠隐藏此楼查看此楼鼠标悬停图片变大 body{text-align:center; background:#72C2E7;} h1{font-size:20px; colo ...
JS点击事件---点击切换图片
一.先上主图二.源码 <!DOCTYPE html> <html lang="zh"> <head><meta charset=&quo ...

JS鼠标滑过图片时切换图片

JS鼠标滑过图片时切换图片相关推荐

最新文章

热门文章