jQuery做出手风琴效果
今天学到JQuery中的遍历-siblings,便手痒做了个手风琴的动态效果,有一点收获,分享给大家。mouseout的时候一定要记得opacity必须设置,不然li的opacity会保持mousemove时的状态。代码有不足的地方欢迎大家踊跃的提意见。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>siblings遍历</title>
<style type="text/css">
ul{
overflow: hidden;
}
ul li{
text-align: center;
list-style: none;
float: left;
width: 50px;
height: 100px;
margin: 10px auto;
background: #444444;
border: 0.5px solid #ffffff;
}
</style>
<script type="text/javascript" src="../vendor/jquery-1.11.3.min.js"></script>//引入jQuery
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script type="text/javascript">
$("ul li").mouseover(function(){
$(this).animate({
opacity:"0.8",
width:"55px",
height:"110px"})
.siblings().css({
opacity:"0.4",
width:"45px",
height:"90px"});
});
$("ul").mouseout(function(){
$("ul li").css({
background:"#444444",
width: "50px",
height: "100px",
opacity:"1",//一定要记得透明度也得设置,如若不设置,透明度会保持你在mousemove的时候的状态
})
});
</script>
</body>
</html>
jQuery做出手风琴效果的更多相关文章
- 基于jquery横向手风琴效果
基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览 源码下载 效果图如下: <div class="flash&quo ...
- jquery横向手风琴效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery 图片手风琴效果
这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...
- jquery横向手风琴效果2
<!doctype html> <html> <head> <meta charset="utf-8"> <script ty ...
- jquery实现手风琴效果
html----accordion.html <!DOCTYPE html> <html lang="en"> <head> <meta ...
- jquery版手风琴效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jQuery实现手机竖直手风琴效果
效果:http://hovertree.com/texiao/jquery/65/ 效果图: 手机扫描二维码查看效果: 代码: <!doctype html> <html lang= ...
- 使用 jQuery & CSS3 实现优雅的手风琴效果
手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...
- 基于 jQuery 实现垂直滑动的手风琴效果
今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
随机推荐
- Netty 源码(ChannelHandler 死磕)
精进篇:netty源码死磕5 - 揭开 ChannelHandler 的神秘面纱 目录 1. 前言 2. Handler在经典Reactor中的角色 3. Handler在Netty中的坐标位置 4 ...
- height为auto, 滚动条出现时, 使页面不跳动
<style> html { margin-left: calc(100vw - 100%); } </style> ;
- 洛谷2704 [NOI2001]炮兵阵地
题目戳这里 Solution 状压DP很好的入门题,用熟练位运算貌似也没那么难. 首先分析一下题目: 看见n=100,m=10,立马就想到了状压,看起来也像DP,所以我们还是采用行号为阶段的状压DP. ...
- Android系统移植与调试之------->如何修改Android设备添加3G上网功能
1.首先先来看一下修改前后的效果对比图 step1.插上3G设备前 step2.插上3G设备后,获取信号中.... step3.插上3G设备后,获取到信号 step4.使用3G信号浏览网页 2.下面讲 ...
- matlab常用的一些程序和功能
~ 去除误匹配算法(matlab) 1.ransac算法 [tform,matchedPoints1,matchedPoints2] = ... estimateGeometricTransfo ...
- C#练习委托、事件、事件处理
控制台应用程序效果: 代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; ...
- Python基础(3)_可变对象与不可变对象、列表、元祖和字典
可变对象与不可变对象 实例被创建后,身份和类型是不可变的, 如果值是不可以被修改的,则是不可变对象 如果值是可以被修改的,则是可变对象 #在id不动,type也不动,value被修改了,则称为可变 # ...
- php添加或升级扩展模块步骤
php添加或升级扩展模块步骤: 1).下载对应扩展的稳定版源码包2).进入到解压后的源码包执行: sudo /usr/local/php/bin/phpize //对应安装到哪个php版本 sudo ...
- 【FLASK模板】set,with语句
# set with 语句 ###set语句:在模板中, 可以使用 ‘set’语句来定义变量, 实例如下: <body> {% set username='zhiliaoketang' % ...
- 第一篇 css导入方式 及选择器
一 推荐资料 推荐书籍 css Zen Garden 中文(css禅意花园) 二.css样式 1.css样式表特征 继承性 大多数css的样式规则可以被继承 层叠性 1)可以定义 多个样式 2)不冲 ...