<!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. HDU-4568 TSP+最短路

    题意:给一个n行m列的矩阵,矩阵上的数字代表经过代价(这里要注意每经过一次都要付出代价),矩阵上有几个宝藏,猎人可以从任意边界进去矩阵取完所有宝藏后从任意边界出来. 解法:一看到宝藏数量小于等于13且 ...

  2. Java类的成员之四：代码块.

    3.2类的成员之四:代码块 ①初始化块(代码块)作用:对Java对象进行初始化 ②程序的执行顺序: ③一个类中初始化块若有修饰符,则只能被static修饰,称为静态代码块(static block ) ...

  3. PHP ftp_mkdir() 函数

    定义和用法 ftp_mkdir() 函数在 FTP 服务器上创建一个新目录. 如果成功,该函数返回新目录的名称和路径.如果失败,则返回 FALSE. 语法 ftp_mkdir(ftp_connecti ...

  4. Linux 软硬链接区别

    一.“硬链接“和“软链接“ 链接的概念:链接简单说实际上是一种文件共享的方式,是 POSIX 中的概念,主流文件系统都支持链接文件. 链接的作用:可以将链接简单地理解为 Windows 中常见的快捷方 ...

  5. table标签详解

    1.table标签中没有 tbody标签,浏览器会自动加上去的 2.一般表格的布局可以不使用  thead.tfoot 以及 tbody 元素.这样浏览器解析时会自动给一个 tbody标签的. 完整的 ...

  6. 微信中location.reload失效

    var len = window.location.href.indexOf("?"); if(len>0){     window.location.href=window ...

  7. ASP.NET Core学习——2

    Application Startup ASP.NET Core为应用程序提供了处理每个请求的完整控制.Startup类是应用程程的入口(entry point),这个类可以设置配置(configur ...

  8. 4. Python数据类型之数字、字符串、列表

    开发过程中,我们需要处理文本.图形.音频.视频.网页等各种各样的数据,不同的数据,需要定义不同的数据类型.在Python中,能够直接处理的数据类型主要有以下几种:数字.字符串.列表.元组.字典.集合等 ...

  9. 详解Telecom

    学习目标: 掌握Telecom入口和分析方法 总结和演进Telecom交互模型 掌握Listener消息回调机制 学习CallsManager 为什么选择Telecom分析? 这是由于在Android ...

  10. JDK8之新特性扩展篇

    之前分篇章讲了一些JKD8中添加的新特性,还有一些新特性这里也一并讲下. BASE64 base64编码解码已经被加入到了jdk8中了. import java.nio.charset.Standar ...