<!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. Codeforces 454E. Little Pony and Summer Sun Celebration

    题意:给n个点m条边的无向图,并给出每个点的访问次数奇偶,求构造一条满足条件的路径(点和边都可以走). 解法:这道题还蛮有意思的.首先我们可以发现在一棵树上每个儿子的访问次数的奇偶是可以被它的父亲控制 ...

  2. Fabric.js的使用

    最近项目有一个绘制的功能,搜了一圈发现fabric.js口碑不错,但是文档稀缺,于是东看看西搜搜的把项目的需求都给实现了,想分享一下. 篇幅有点长,但看完后可以轻松驾驭fabric.我的项目是基于VU ...

  3. kubeadm部署k8s集群

    kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具. 这个工具能通过两条指令完成一个kubernetes集群的部署: # 创建一个 Master 节点 kubeadm ini ...

  4. spring boot 四大组件之Actuator

    执行器(Actuator)的定义 执行器是一个制造业术语,指的是用于移动或控制东西的一个机械装置,一个很小的改变就能让执行器产生大量的运动.An actuator is a manufacturing ...

  5. Office应用程序对照表

    任何Office应用程序(包括excel)的类型库都作为Office安装的一部分安装.类型库是特定于版本的(即,安装了哪个版本的Office). 例如,Office 2007版本为12.0,Offic ...

  6. DELPHI常用类型及定义单元

    Controls Application (the variable not a type) Forms Beep SysUtils or Windows (different functions) ...

  7. Delphi 异常处理

    Delphi错误:Stack overflow的解决方法 在编译Delphi程序时,执行一个内存记忆体的时候,提示:Project.exe raised exception class EStackO ...

  8. [NOIP2016]天天爱跑步 题解(树上差分) (码长短跑的快)

    Description 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.<天天爱跑步>是一个养成类游戏,需要 玩家每天按时上线,完成打卡任务.这个游戏的地图 ...

  9. jQuery选择器 (详解)

    1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的名称选择, $(" ...

  10. Java-Class-C：java.util.BigDecimal

    ylbtech-Java-Class-C:java.util.BigDecimal 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部 1. /* * Copyright (c) 19 ...