用jQuery实现鼠标移动切换图片动画
2024-09-06 22:17:14
<!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>
最新文章
- JavaScript 全选函数的实现
- modeler与activiti进行整合
- 理解Python元类(转)
- AJAX安全-Session做Token
- 如何使用cocos2dx-jsbinding 来处理分辨率适配
- ListView的getFirstVisiblePosition等方法返回的是哪个对象
- C语言初学 转义字符举例
- 无法从带有索引像素格式的图像创建graphics对象(转)
- poj 1401---求N!末尾0的个数,2的个数一定比5多,观察得来,0的产生即为2*5,去找这个阶乘一行里面5的个数即可
- CentOS6.5+mysql5.5源码安装
- MySql全文索引
- weighted_cross_entropy_with_logits
- JavaJ2EE相关知识整理
- 深入理解JVM结构
- python基于matplotlib绘图
- Java Nashorn--Part 4
- javascript大神修炼记(6)——OOP思想(继承)
- win10系统80端口被System (PID=4)占用的解决
- mac下的git的安装与简单的配置
- jQuery操作CheckBox的方法(选中,取消,取值)
热门文章
- Codeforces 747F Igor and Interesting Numbers DP 组合数
- list集合获取相同以及不同的对象
- 影响Acorn for Mac图像打印质量的因素有什么?怎样处理这些因素才能得到打印效果最佳的图像?
- python 爬取头条视频
- common配置文件
- Hello cnblog!
- 重新开始学习C++
- NX二次开发-Block UI C++界面Specify Point(指定点)控件的获取(持续补充)
- 假如Kafka集群中一个broker宕机无法恢复,应该如何处理?
- PHP面试 PHP基础知识 十(网络协议)