<!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. POJ-1639 Picnic Planning 度数限制最小生成树

    解法参考的论文:https://wenku.baidu.com/view/8abefb175f0e7cd1842536aa.html 觉得网上的代码好像都是用邻接矩阵来实现的,觉得可能数据量大了会比较 ...

  2. 【JDK1.8】Java 栈实现方式

    看到一道面试题,问Java中栈的实现方式,记录下一些实现细节. API中有5个方法,分别是: boolean empty() E peek() E pop() E push() int search( ...

  3. JSON对象排序并生成URL参数

    1､for in function jsontourl(param) { let params = {}, data=[]; let arr = Object.keys(param).sort(); ...

  4. Web安全之环境搭建

    一. 工具集:Linux: Kali最新版(A/P:root/toor).Windows7/10. 靶机:OWASP_BWA(A/P:root/owaspbwa).DVWA.Mutillidae.We ...

  5. hbase-2.0.4集群部署

    hbase-2.0.4集群部署 1. 集群节点规划: rzx1 HMaster,HRegionServer rzx2 HRegionServer rzx3 HRegionServer 前提:搭建好ha ...

  6. Vue学习笔记【21】——Vue中的动画（v-for 的列表过渡）

    定义过渡样式:  <style>    .list-enter,    .list-leave-to {      opacity: 0;      transform: translat ...

  7. v-model 双向数据绑定以及修饰符

    <!--v-model 实现双向数据绑定 其中一个值发生改变,另一个值也将实时发生改变--> <div id="app09"> <h1>{{ m ...

  8. ItunesConnect:苹果内购项目元数据缺失

    问题描述: 添加内购的App审核时被拒,原因为:ios内购 元数据丢失 问题原因: 审核信息里的 “审核屏幕快照” 和 “备注” 要填写,不然就失败的. 示例图: 1.屏幕快照和审核备注都需要填写   ...

  9. Likecloud-吃、吃、吃

    题目背景 问世间,青春期为何物? 答曰:"甲亢,甲亢,再甲亢:挨饿,挨饿,再挨饿!" 题目描述 正处在某一特定时期之中的李大水牛由于消化系统比较发达,最近一直处在饥饿的状态中.某日 ...

  10. [NOIP模拟测试10]辣鸡(ljh) 题解

    首先计算块内贡献,很显然是$(x_2-x_1)*(y_2-y_1)*2$. 然后考虑矩形之间的贡献,sort一遍分类讨论$n^2$暴力即可. 注意考虑边界情况是否能多两个,以及角对角的情况. 另外,排 ...