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>
$(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);
});
});
这里大家迷惑的是为什么要预载入图片呢?因为在网站上不像我们本地调试,图片下载这么快。如果是在互联网上,当鼠标滑过将要切换的图片时,替换的图片还要临时下载,加载图片的过程是比较慢的。所以我们预载入图片可以解决这个问题。
相关推荐
-
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
本文实例为大家展示了图片旋转.鼠标滚轮缩放.镜像.切换图片多重效果,提供了详细的代码,分享给大家供大家参考,具体内容如下 具体代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <title>图片旋转,鼠标滚轮缩放,镜像,切换图片</title> <meta charset="utf-8" /> <!--<script type="
-
JavaScript简单实现鼠标移动切换图片的方法
本文实例讲述了JavaScript简单实现鼠标移动切换图片的方法.分享给大家供大家参考,具体如下: <title>JavaScript切换图片</title> <script> function showDaTu(src){ document.getElementById("defaultImg").src=src; } </script> <img src="images/wall1.jpg" id="
-
使用JavaScript实现点击循环切换图片效果
废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单击循环切换图片</title> <script> var i = 1; function nextImg(){ i++; //步骤2:获取页面元素 var next = document.getElementById("
-
JavaScript实现自动切换图片代码
本文给大家分享一段js代码实现自动切换图片的实例代码,代码如下所示: <!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>
-
js实现使用鼠标拖拽切换图片的方法
本文实例讲述了js实现使用鼠标拖拽切换图片的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} .m-slider{width:600px;margin:0 auto 10px !importan
-
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
今天来分享一下鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码. 最后的效果如下: Html代码部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <met
-
原生JS实现隐藏显示图片 JS实现点击切换图片效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片显示出来,同理,当点击隐藏的时候,按钮文字变成显示,图片隐藏起来 3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来, 4.当图片隐藏的时候,图片不可变换 这就是要求,下面来看代码: <!DOCTYPE html> <html> <head> <
-
js动态切换图片的方法
本文实例讲述了js动态切换图片的方法.分享给大家供大家参考.具体实现方法如下: index.css文件如下: 复制代码 代码如下: * { margin: 0px;padding: 0px; } body { width: 632px; /*background-color: blue;*/ margin: 0 auto; } #imgsCom { background-color: yellow; /*相对定位,为了下
-
鼠标滑过缩略图时放大图片(纯Css)
写着好玩的,并无技术含量,见笑了.没有使用到Js,纯Css控制的.弹出的图片不会把旁边的容器"挤"开. 测试通过IE7 Firefox2.11.(理论兼容IE6) www.jb51.net 我们 鼠标滑过缩略图时放大图片 本例旨在展示鼠标滑到缩略图上时,放大图片. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
Jquery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
这篇文章主要介绍了jQuery实现幻灯片焦点图,可实现非常炫目时尚的幻灯片效果,非常具有实用价值,基本能满足你在网页上使用幻灯片(焦点图)效果,具体如下 幻灯片效果描述:用鼠标滑过右下角数字按钮幻灯片进行左右切换进行切换. 自定义切换参数效果:向下切换.切换时间为8秒.鼠标滑过按钮时切换 运行效果截图如下: 具体代码如下 <head> <title>Jquery幻灯片焦点图插件</title> <script src="js/jquery-1.4a2
-
JS鼠标滑过图片时切换图片实现思路
在很多网站上我们会发现当鼠标滑过一张图片后,这张图片切换为了另外的一张图片.这里小编说说这是怎么实现的. 在写Javascript代码前我们必须要有实验的HTML代码 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Jquery deal images</t
-
js鼠标滑过图片震动特效的方法
本文实例讲述了js鼠标滑过图片震动特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>鼠标滑过 图片震动效果</title> <STYLE>.shakeimage { POSITION: re
-
JS实现点击button按钮切换图片
JS实现点击button按钮切换图片的具体代码,供大家参考,具体内容如下 放暑假在家打算学习html/css/js制作网页,只有html/css的一些基础.实现效果如图: 这个网页很简单,是用Dreamweaver写的,但是是通过自己做的,算是对JS的一个入门案列. 最初的想法是是做一轮播效果,但是刚开始学JS发现有很多问题,所以就做了一个简单的图片切换. body部分: <body> <h1>JS实现图片的切换</h1> <div class="con
-
原生js实现点击轮播切换图片
本文实例为大家分享了js实现点击轮播切换图片的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点击轮播图</title> </head> <style> .container { position: relative; width: 600px; height: 400px; marg
-
jquery实现鼠标滑过小图时显示大图的方法
本文实例讲述了jquery实现鼠标滑过小图时显示大图的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title></title> </head> <style type="text/css&
-
jQuery实现的鼠标滑过弹出放大图片特效
本章节介绍一下一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等, 我们先来看个演示图 下面是代码实例: <link rel="stylesheet" href="../css/common.css" type="text/css" /> <script type="text/javascript" src="../
-
js鼠标经过tab选项卡时实现切换延迟
偶然间在浏览网页时,发现这样的效果.当鼠标不经意间滑过tab时并不会切换,当鼠标停留在上面一段时候后才会切换. 个人觉得用户体验不错,优点是1.当用户只是滑过标签,并不需要切换,而此时如果切换标签需要请求数据时,会避免不必要的异步请求:2.避免页面在用户不需要的时候切换跳动,影响用户体验. 网上查阅了几个方法,发现下面的方法更简洁有效.整理下来,供以后参考. 其中的重点是那段js代码:原理是,通过hover的时候设置定时器,延迟执行切换方法,离开时,清楚计时器.当hover的时间小于延迟时间时,
-
Unity 实现鼠标滑过UI时触发动画的操作
在有些需求中会遇到,当鼠标滑过某个UI物体上方时,为了提醒用户该物体是可以交互时,我们需要添加一个动效和提示音.这样可以提高产品的体验感. 解决方案 1.给需要有动画的物体制作相应的Animation动画.(相同动效可以使用同一动画复用) 2.给需要有动画的物体添加脚本.脚本如下: using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngi
随机推荐
- Vue.js 递归组件实现树形菜单(实例分享)
- Java线程池的几种实现方法和区别介绍实例详解
- 使用Asp.net Mvc3 Razor视图方式扩展JQuery UI Widgets方法介绍
- 一个简单安全的PHP验证码类 附调用方法
- Android动画之逐帧动画(Frame Animation)实例详解
- Docker学习之常用的基础命令总结
- Node.js开启Https的实践详解
- 用javascript实现旋转图片效果的代码
- 金山反病毒20041231_日报
- Android adb.exe程序启动不起来 具体解决方法
- Android 推送原理(Android Push Notification)详解
- Python设计实现的计算器功能完整实例
- 使用mutex实现应用程序单实例运行代码分享
- 深入分析javascript中console命令
- php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
- 浅析C++的特殊工具与技术
- android仿iphone主题效果的主菜单
- Opencv实现视频播放与进度控制
- 详解用Node.js写一个简单的命令行工具
- 深入理解Python爬虫代理池服务