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 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
随机推荐
- mac上好用的软件
1 newfile menu for Mac 右键创建文件.
- 最简单的php验证码
<?php session_start(); // Settings: You can customize the captcha here $image_width = 120; $image ...
- centos7 mysql允许远程连接设置
Mysql为了安全性,在默认情况下用户只允许在本地登录,可是在有此情况下,还是需要使用用户进行远程连接,因此为了使其可以远程需要进行如下操作: 一.允许root用户在任何地方进行远程登录,并具有所有库 ...
- 网络端口的作用及分类(转发:http://blog.csdn.net/dream_1996/article/details/73481201)
一.什么是端口? 在开始讲什么是端口(port)之前,我们先来聊一聊什么是 port 呢?常常在网络上听说『我的主机开了多少的 port ,会不会被入侵呀!?』或者是说『开那个 port 会比较安全? ...
- 阿里云修改centos7主机名
为了玩Docker,买个阿里云主机也是够拼的了. [root@iZ284olvkmjZ ~]# 不过主机名中怎么好DT,无奈,修改. 我们需要的是永久生效,阿里云提供了两种方法: 方法(1). 输入h ...
- sql语句 字段的赋值
将同一个表中的一个字段2的所有值赋值给另一个字段1 UPDATE 表名 SET 字段1 = 字段2 也可以把字段所有的值赋为null UPDATE 表名 SET 字段1 = null
- MD5加密“破解”在.NET平台实现最基本的理解
MD5作为一种散列算法,广泛用于密码传输过程中的“加密”(引号的意思是这并不是真正的加密,而是形成密码的散列值)过程.MD顾名思义Message Digest(报文摘要),可以将输入的密码,一般来说为 ...
- 【Flask】模板继承
# 模版继承笔记: ### 为什么需要模版继承:模版继承可以把一些公用的代码单独抽取出来放到一个父模板中.以后子模板直接继承就可以使用了.这样可以重复性的代码,并且以后修改起来也比较方便. ### 模 ...
- shell 定义变量
注意定义变量的语法: var="ABC" 等号之间不能有空格,否则会报错
- POJ 之 1002 :487-3279
487-3279 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 242418 Accepted: 42978 Descr ...