<!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. 笔记65 Spring Boot快速入门（五）

    SpringBoot+JPA 一.什么是JPA? JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期 ...

  2. 【Java学习笔记】Java的垃圾回收机制

    搬以前写的博客[2014-12-30 15:07] 以前很少关注内存的问题,基本没有关注,这方面的小白,原因在于自己都是写的自我娱乐的小程序,不关注性能,不是提供服务.而企业级别的应用在程序稳健性方面 ...

  3. Java中的LinkedList

  4. TCP三次挥手

    tcp:三次握手 client和server之间需要经历三次握手才能建立连接(connnect()方法中封装了三次握手的步骤)syn:同步请求,建立连接的请求ack:对syn请求包的确认 应答syn: ...

  5. 【NOI2011】兔农（循环节）

    我居然没看题解瞎搞出来了? 题解: 不难想到找到每次减1的位置,然后减去它对最终答案的贡献. 假设有一个地方是\(x,1(mod~k)\) 那么减了1后就变成了\(x,0\). 然后可以推到\(x,0 ...

  6. bzoj1066题解

    [解题思路] 考虑拆点,把每根石柱拆成两个点,具体可以理解为石柱底部和石柱顶部,能爬到石柱顶部的蜥蜴只有有限只,而且蜥蜴只有爬到了石柱顶部才能跳到其他石柱的底部. 这样,考虑如下建图: 将每个有蜥蜴的 ...

  7. mysql查询相关的命令解析

    特:不重启mysql 更新配置文件方法(不允许重启mysql实例或连接不上msyql服务器): gdb -p $(pidof mysqld) -ex "set max_connections ...

  8. appium自动化获取app的appPackage与appActivity方法总结

    一,获取apppackage 方法不止一种,我只介绍自己知道的两种. 1,通过APPIUM工具添加APK包后,会自动显示出来. 2,打开UI AUTOMATOR VIEWER 定位工具,随便指向一个定 ...

  9. kmalloc vs vmalloc

    kmalloc分配物理上连续的空间,可以不是整页大小的. vmalloc分配逻辑上连接的空间,可以不是物理上连接的.

  10. 注释类型 XmlType

    @Retention(value=RUNTIME) @Target(value=TYPE) public @interface XmlType 将类或枚举类型映射到 XML 模式类型. 用法 @Xml ...