JavaScript手风琴页面制作
啥都不说了，直接上效果图
1.Html结构代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>手风琴2</title>
<link rel="stylesheet" type="text/css" href="css/new_file.css" rel="external nofollow" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/new_file.js"></script>
</head>
<body>
<div id="gs">
<div class="gs gs1">
<div class="txt">
<p class="p1">我的旅行记1我的旅行记3</p>
<p class="p2">空山之旅我的旅行记3</p>
</div>
</div>
<div class="gs gs2">
<div class="txt">
<p class="p1">我的旅行记2我的旅行记3</p>
<p class="p2">沙漠之旅我的旅行记3</p>
</div>
</div>
<div class="gs gs3">
<div class="txt">
<p class="p1">我的旅行记3我的旅行记3</p>
<p class="p2">拉沙之旅我的旅行记3</p>
</div>
</div>
<div class="gs gs4">
<div class="txt">
<p class="p1">我的旅行记4我的旅行记3</p>
<p class="p2">雪山之旅我的旅行记3</p>
</div>
</div>
</div>
</body>
</html>
2.css样式代码
*{
padding: 0px;
margin: 0px;
font-family: "微软雅黑";
}
#gs {
width: 1100px;
height: 429px;
}
.gs {
width: 100px;
height: 429px;
float: left;
}
.gs4 {
width: 789px;
height: 429px;
}
.gs1 {
background: url(../img/img/1.jpg) repeat scroll top left;
}
.gs2 {
background-image: url(../img/img/2.jpg);
}
.gs3 {
background-image: url(../img/img/3.jpg);
}
.gs4 {
background-image: url(../img/img/4.jpg);
}
.txt {
width: 100px;
height: 429px;
/*margin: 15px;*/
background: rgba(0,0,0,0.5);
cursor: pointer;
}
/*.txt p {
float: left;
width: 20px;
height: 429px;
color: #fff;
font-size: 20px;
margin: 14px;
}*/
.txt p {
color: #fff;
float: left;
margin: 15px;
}
.txt .p1 {
font-size: 14px;
width: 14px;
}
.txt .p2 {
font-size: 12px;
width: 12px;
}
3.javascript代码
$(function(){
$(".txt").mouseover(function(){
$(this).parent().stop(true).animate({"width":"789px"},500).siblings().stop(true).animate({"width":"100px"},500);
});
});
4.主要：
a.字体竖排垂直：字体大小font-size = 包含字体标签宽度width
b.js中stop()方法：stop()表示结束动画有过渡
stop(true)表示暂停动画，
stop(true,true)表示立即结束动画，无过渡
c.parent():找到上一级元素
siblings():除了本元素外，其他的。。。
animate():动画效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript经典特效分享 手风琴、轮播图、图片滑动
最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 纯css的手风琴: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴css</title> <style> .showBox{ width: 660px; overflow: hidden; } ul{ list-style:
-
纯js实现手风琴效果代码
我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型项目中就会显现出来,下面我用原生js实现一个简单的手风琴效果效果. HTML代码如下 结构非常简单就5个li盒子,js代码会渲染图片上去 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&
-
纯js+html和纯css+html制作手风琴效果
本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下 一.纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> <head> <style> body{background: url('bg.gif') repeat;} ul,li,p{margin: 0px;padding: 0px;lis
-
javascript手风琴下拉菜单实现代码
手风琴下拉菜单实现的效果更灵活,不同与传统的下拉菜单,本文就为大家分享一段javascript手风琴下拉菜单实现代码,先看一看效果图: 具体的javascript手风琴下拉菜单代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手风琴下拉菜单效果</title> <script src="js/jquery-1.11.1.j
-
JS实现的另类手风琴效果网页内容切换代码
本文实例讲述了JS实现的另类手风琴效果网页内容切换代码.分享给大家供大家参考.具体如下: 这是一款以海贼王为题材的另类手风琴效果,用到三张背景图片,请顺着代码自已下载吧,多看看类似特效的编写思路,对于提高你的Js编程水平有不少帮助的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sfq-web-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
-
js实现可折叠展开的手风琴菜单效果
本文实例讲述了js实现可折叠展开的手风琴菜单效果.分享给大家供大家参考.具体如下: 这是一款可折叠展开的菜单,手风琴菜单,运用CSS与JavaScript技术实现的合拢与伸展的网页菜单,代码简洁,来自老外的代码作品,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hidden-show-sfq-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH
-
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
ReactJS是Facebook推出的产品.在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS. ReactJS可以看做就是用来Render的.ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上. 前沿 对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学
-
原生js做的手风琴效果的导航菜单
做好的手风琴效果如下,具体看代码: html代码 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Accordion</title> <style> #accordion{ width:200px; } #accordion ul{ list-style: none; display:none; } .fir
-
Angular.js与Bootstrap相结合实现手风琴菜单代码
标题定的是angularjs与bootstrap相结合实现手风琴菜单,其实也就是用的bootstrap的样式. 在上篇文章给大家介绍了Angular.js与Bootstrap相结合实现表格分页代码.接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先上效果图: <my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page
-
JS实现仿QQ面板的手风琴效果折叠菜单代码
本文实例讲述了JS实现仿QQ面板的手风琴效果折叠菜单代码.分享给大家供大家参考.具体如下: 这是一款简单实用的垂直导航菜单,有人把这种风格称为"手风琴"菜单,类似仿QQ面板的折叠菜单,鼠标放在任意一个菜单上,它会展开所属的二级菜单,很不错的选择,以前就分享过此类菜单,这次经过了代码优化升级,更人性化了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-qq-sfq-style-menu-codes/ 具体代码如下: <!