Jquery实现手风琴
首先准备七张图片,以备后续引用
<!--
声明文档类型:html
作用:符合w3c的统一标准规范
每个浏览器对html css js 都有自己的编译模式(兼容模式)
-->
<!doctype html>
<html><!--根目录节点标签-->
<head><!--头部 规定一些信息 提供给浏览器识别 用户看不到-->
<meta charset="utf-8"><!--字符编码:国际编码-->
<!--网页文档的三要素-->
<title>手风琴特效</title>
<meta name="keywords" content="关键词:提供给搜索引擎搜索网站">
<meta name="description" content="描述:对网页内容的大概的介绍">
<style>/* css样式的存放位置 */
*{/* 通配符:选择到所有的标签元素*/
margin:0;/*外边距*/
padding:0;/*内边距*/
}
#box{/* # id 选择器*/
width: 1006px;/*宽度*/
height: 260px;/*高度*/
background:#963;
margin:100px auto;/*上下为100px 左右自动(居中)*/
overflow:hidden;/*超出隐藏*/
}
#box ul{
width:1050px;
}
#box ul li{/*混合选择器*/
position:relative;/*相对定位元素:参考物 相对于自己原来的位置定位*/
list-style:none;/*去除前面的小黑圆点*/
width:144px;
height:260px;
background:blue;
float:left;/*浮动:与父元素的左端对齐 依次的往右端显示 显示不下换行接着依次显示*/
}
.img{/* . class类选择器*/
width:100%;/*百分比:相对于其父元素计算的*/
height:100%;/*百分比:相对于其父元素计算的*/
background-position:center;/*背景图片定位:居中*/
}
.shadow{
position:absolute;/*绝对定位:相对于拥有定位属性(relative/absolute/fixed)的最近的父元素定位*/
left:0;/*距离参考物左端的距离*/
top:0;/*距离参考物上端的距离*/
width:100%;
height:100%;
background:rgba(0,0,0,0.5);/* red 红色green绿色 blue蓝色 0-255 a透明度0-1*/
}
.shadow h2{
width:30px;
margin:50px auto;
font-family:"微软雅黑";
color:#fff;/*文字颜色*/
text-align:center;/*文本左右对齐:居中*/
}
/*
代码性能优化
文件的大小
向服务器请求的次数
*/
</style>
</head>
<body><!--身体-->
<!--盒子模型标签: 宽度 高度 位置 边框线 css样式来修饰-->
<div id="box"><!--id="自定义的名称" 唯一的(身份证) 命名规范(见名知意：用有语义的英文单词) -->
<ul><!--无序列表标签-->
<li>
<!--class类名 可重复(姓名)-->
<!-- 放置图片-->
<div class="img" style="background-image:url(images/1.jpg)"></div>
<!--透明层-->
<div class="shadow"><h2>XXXX</h2></div>
</li>
<li>
<div class="img" style="background-image:url(images/2.jpg)"></div>
<div class="shadow"><h2>XXXX</h2></div>
</li>
<li>
<div class="img" style="background-image:url(images/3.jpg)"></div>
<div class="shadow"><h2>XXXX</h2></div>
</li>
<li>
<div class="img" style="background-image:url(images/4.jpg)"></div>
<div class="shadow"><h2>XXXX</h2></div>
</li>
<li>
<div class="img" style="background-image:url(images/5.jpg)"></div>
<div class="shadow"><h2>XXXX</h2></div>
</li>
<li>
<div class="img" style="background-image:url(images/6.jpg)"></div>
<div class="shadow"><h2>XXXX</h2></div>
</li>
<li>
<div class="img" style="background-image:url(images/7.jpg)"></div>
<div class="shadow"><h2>XXXX</h2></div>
</li>
</ul>
</div>
<!--引入jq插件 提供了很多方便使用的功能方法-->
<script src="js/jquery-1.11.1.min.js"></script>
<script>
//alert($);//弹出jq的代理函数$
//$("#box ul li")获取每个li盒子
$("#box ul li").hover(function(){//鼠标移上去实现啥效果
//$(this)指代鼠标移上去的li
//animate({属性名:属性值},时间毫秒)在一段时间之内改变宽度
//siblings()获取其他的兄弟元素
//stop()每次动画开始之前先结束上一次动画
$(this).stop().animate({"width":"400px"},500,function(){
$(this).css({
"border-left":"1px solid #fff",
"border-right":"1px solid #fff"
});
}).siblings().stop().animate({"width":"101px"},500);
$(this).find(".shadow").hide();//找到鼠标移上去的li里面的shadow隐藏
},function(){//鼠标移开实现什么效果
$("#box ul li").stop().animate({"width":"144px"},500).css("border",0);
$(this).find(".shadow").show();
});
</script>
</body>
