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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>动画</title>

<style>

.img{ width:1000px; height:300px; margin:0 auto; position:relative; margin-top:5px; border-radius:10px; overflow:hidden;}

.img-0{ widt:1000px; height:300px; position:absolute; z-index:21; }

.img-1{ widt:1000px; height:300px; position:absolute; z-index:10; display:none}

.img-2{ width:1000px; height:300px; position:absolute; z-index:15; display:none}

.img-3{ width:1000px; height:300px; position:absolute; z-index:20; display:none}

.img-4{ width:960px; height:70px; position:relative;  z-index:22; border:1px solid #CCC; border-radius:10px;

margin-top:229px; float:left; margin-left:20px; background-color:#000; opacity:0.5; color: azure;}

.img-4v1{ width:275px; height:70px; position:relative; float:left; border-left: 1px solid #CCC; line-height:70px;

 text-align:center; font-size:18px;}

 .img-4v1:hover{ cursor:pointer;}

</style>

</head>

<body>

<div class="img">

         <div class="img-0" id="oo"><img  src="../img/cn-1.jpg"/></div>

         <div class="img-1" id="a" ><img  src="../img/cn-1.jpg"/></div>

        <div class="img-2" id="b" ><img  src="../img/cn-2.jpg"/></div>

        <div class="img-3" id="c" ><img  src="../img/cn-3.jpg"/></div>

        <div class="img-4">

                <div  id="img-a" class="img-4v1" style="margin-left:68px">》移动到我</div>

                <div id="img-b" class="img-4v1" onmouseover="">》移动到我</div>

                <div id="img-c" class="img-4v1" style="border-right:1px solid #CCC">》移动到我</div>

        </div>

 </div>

</body>

</html>

<script type="application/javascript" src="../JS/jquery-3.2.0.js" >

</script>

<script>

$(document).ready(function(){

  $("#img-a").mouseenter(function(){ /* 鼠标移动到DIV上的效果*/

     $("#a").fadeIn();  /*    淡入ID为A的div*/

     $("#oo").hide()   /* 隐藏ID为OO的DIV    */

  });

});

$("#img-a").mouseleave(function(){ /* 鼠标离开DIV上的效果*/

    $("#a").fadeOut();     /*    淡出ID为A的div*/

     $("#oo").show()        /* 显视ID为OO的DIV    */

  });

$(document).ready(function(){

  $("#img-b").mouseenter(function(){

     $("#b").fadeIn();

     $("#oo").hide()

  });

});

$("#img-b").mouseleave(function(){

    $("#b").fadeOut();

    $("#oo").show()

  });

$(document).ready(function(){

  $("#img-c").mouseenter(function(){

     $("#oo").hide()

     $("#c").fadeIn();

  });

});

$("#img-c").mouseleave(function(){

    $("#c").fadeOut();

    $("#oo").show()

  });

</script>

用jQuery实现鼠标移动切换图片动画的更多相关文章

  1. jQuery实现鼠标移入切换图片

    初始效果: 鼠标移入效果: 首先添加jQuery库,我这边直接引用百度CDN地址 <script src="https://apps.bdimg.com/libs/jquery/2.1 ...

  2. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  3. 【方法】jQuery无插件实现 鼠标拖动切换图片/内容 功能

    前言 我就想随便叨逼叨几句,爱看就看几句,不爱看就直接跳过看正文就好啦~ 这个方法是仿写页面时我自己研究出来,可能有比我更简单的方法. 但我不管,因为我没查我不知道,我就觉得我的最好啦,耶耶耶~ 效果 ...

  4. WPF之鼠标滑动切换图片

    在网上找了一会儿也没找到我想要的效果,还是自己动手,丰衣足食吧. 需求:当前面板中只显示一张图片,图片栏的下部有用来显示当前图片处于图片队列中的位置的圆球,并且点击下部栏内的圆球可以快速切换,附动画缓 ...

  5. jQuery实现鼠标滑过图片列表加遮罩层

    这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...

  6. jQuery制作鼠标经过显示图片大图，生成图片tips效果

    一般tips都是文字,这个可以支持图片,很漂亮: 演示   <script type="text/javascript"> // Load this script on ...

  7. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  8. jQuery演示10种不同的切换图片列表动画效果

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

  9. CSS3鼠标移入移出图片生成随机动画

    今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...

随机推荐

  1. qdatatime大小

    QDateTime time1; QDateTime time2; uint stime = time1.toTime_t(); uint etime = time2.toTime_t(); int ...

  2. 3、Python 基础类型 -- List 列表类型

    2.更新列表:list.append() 3.删除列表元素 del 

  3. 转译es6原生原生对象及方法,如Object.assign,Object.keys等，及promise

    下面主要为兼容恶心的ie 1,首先引入‘babel-polyfill’,可写在webpack.dev.js的entry.vendors数组里面 2,在入口文件如app.js里面import 'babe ...

  4. python爬虫学习（3）：使用User-Agent和代理ip

    使用User-Agent方法一,先建立head,作为参数传进去 import urllib.requestimport json content=input("请输入需要翻译的内容:&quo ...

  5. Hive SQL之分区表与分桶表

    Hive sql是Hive 用户使用Hive的主要工具.Hive SQL是类似于ANSI SQL标准的SQL语言,但是两者有不完全相同.Hive SQL和Mysql的SQL方言最为接近,但是两者之间也 ...

  6. PHP中session存储及删除变量的方法

    Session 变量保存的信息是单一用户的,并且可供应用程序中的所有页面使用.但是session会话信息是临时的,在用户离开网站后就会被删除.如果需要永久储存信息,就需要把数据存储在数据库中. < ...

  7. 深入理解Magento – 第十章、十一章（英文原版地址，仅供参考）

    深入理解Magento – 第十章 – Magento系统覆盖和升级 http://alanstorm.com/magento_upgrade_rewrite_override 深入理解MAGENTO ...

  8. SQL LIKE 运算符

    SQL LIKE 运算符 在WHERE子句中使用LIKE运算符来搜索列中的指定模式. SQL LIKE 操作符 LIKE 操作符用于在 WHERE 子句中搜索列中的指定模式. 有两个通配符与LIKE运 ...

  9. SQL SELECT DISTINCT

    SQL SELECT DISTINCT(选择不同) 语法 SELECT DISTINCT语法用于仅返回不同的(different)值. 在一张表内,一列通常包含许多重复的值; 有时你只想列出不同的(d ...

  10. PHP ftp_mdtm() 函数

    ftp_mdtm() 函数返回指定文件的最后修改时间. 该函数将以 Unix 时间戳的形式返回文件的最后修改时间,如果出错则返回 -1. 语法 int ftp_mdtm ( resource $ftp ...