jq手风琴效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color:#333;
}
.box{
width: 900px;
height: 300px;
border: 1px solid #000;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.box ul li{
position: absolute;
left:0px;
width: 560px;
height: 300px;
}
.box ul li.no1{
left:180px;
}
.box ul li.no2{
left:360px;
}
.box ul li.no3{
left:540px;
}
.box ul li.no4{
left:720px;
}
.box ul li .mask{
position: absolute;
width: 560px;
height: 300px;
left:0;
top:0;
background-color: rgba(0,0,0,.6);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="no0">
<div class="mask"></div>
<a href=""><img src="data:images/0.jpg" alt=""></a>
</li>
<li class="no1">
<div class="mask"></div>
<a href=""><img src="data:images/1.jpg" alt=""></a>
</li>
<li class="no2">
<div class="mask"></div>
<a href=""><img src="data:images/2.jpg" alt=""></a>
</li>
<li class="no3">
<div class="mask"></div>
<a href=""><img src="data:images/3.jpg" alt=""></a>
</li>
<li class="no4">
<div class="mask"></div>
<a href=""><img src="data:images/4.jpg" alt=""></a>
</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$("li").mouseenter(function(){
// 将触发事件的对象序号保存
var idx = $(this).index();
// 小于等于序号往左移动85
$("li:lt(" + (idx + 1) + ")").each(function(i){
$(this).animate({"left": 85 * i},400);
}); // 大于信号序号往右移动
$("li:gt(" + idx + ")").each(function(i){
// console.log(i);
$(this).animate({"left": 560 + 85 * (idx + i)},400);
}); // 鼠标进入图片去掉蒙版
$(this).children(".mask").fadeOut();
// 其他兄弟加上蒙版
$(this).siblings().children(".mask").fadeIn();
}); // 鼠标离开恢复原状
$(".box").mouseleave(function(){
$("li").stop(true);
$("li").each(function(i){
// console.log(i);
$(this).animate({"left": 180 * i},400);
});
$("li").children(".mask").fadeIn();
}); </script>
</body>
</html>
jq手风琴效果的更多相关文章
- JS+JQ手风琴效果
最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...
- 基于css3实现手风琴效果
终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...
- 使用 jQuery & CSS3 实现优雅的手风琴效果
手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...
- 基于 jQuery 实现垂直滑动的手风琴效果
今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
- 纯CSS手风琴效果
CSS手风琴效果 主体代码如下: ...
- jquery 图片手风琴效果
这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...
- 一步步教你css3手风琴效果的实现
什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...
- 使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
- 超简单jQuary链式操作代码实现手风琴效果
超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...
随机推荐
- Django的Form(二)
上一篇已经简单介绍了Django的Form,现在开始进阶操作了 ..... 创建Form类的时候,主要涉及到Form字段和Form的插件,字段用于做form验证,插件用来生成HTML DjiangoF ...
- 迭代var()内置函数的时候出现RuntimeError: dictionary changed size during iteration的解决办法
下午看了Mr Seven的教学视频,其中有一段讲全局变量的视频,迭代输出全局变量的时候报错了. 视频中的做法: for k,v in vars().items(): print(k) 打印结果 for ...
- Intellij IDEA更新SVN没有提示语
更新SVN时IDE下方没有提示语句 解决方法: 点击编辑器右下方的 Event Log 按钮 打开 Show balloons 就可以显示了.
- .NET 对 XML 进行创建,增加,删除,修改操作整理
前言: 最近做了一个项目,程序A在一个服务器程序B在另一台服务器,然而主程序A需要访问程序B的图片集文件夹下载到本服务器上,为了防止多次对Web Services进行调用,在主程序A中创建一个XML文 ...
- iOS 数据加密方案
iOS安全攻防(二十三):Objective-C代码混淆 提交用户的隐私数据 一定要使用POST请求提交用户的隐私数据GET请求的所有参数都直接暴露在URL中请求的URL一般会记录在服务器的访问日志中 ...
- 查看windows、linux的SN
gwmi win32_bios [root@live-al-ops-pxe-2 ~]# dmidecode | grep Number | sed -n '1p' Serial Number: ...
- Wincc flexable的局势视图的组态
1.趋势视图介绍 2.实时趋势视图的组态 1)创建连接和变量 2)开始组态局势视图 3)设置趋势视图的属性,添加一个趋势 3.模拟运行HMI,观察局势图
- sed 命令替换字符串
sed -i 's/13/15/g' `grep 13 -rl 目录` -i 表示替换 -r 表示搜索子目录 -l 显示替换名
- bzoj 4012: [HNOI2015]开店 主席树
Description 风见幽香有一个好朋友叫八云紫,她们经常一起看星星看月亮从诗词歌赋谈到 人生哲学.最近她们灵机一动,打算在幻想乡开一家小店来做生意赚点钱.这样的 想法当然非常好啦,但是她们也发现 ...
- c#全宇宙最牛的编程软件
c#走的道路!PC,PD,电脑一体,一个账户就可以三合一,可以跨平台的编程,在未来的道路如果微软能一直走下去,那么c#将成为宇宙最牛B的编程软件.