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():动画效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript经典特效分享 手风琴、轮播图、图片滑动

    javascript经典特效分享 手风琴、轮播图、图片滑动

    最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 纯css的手风琴: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴css</title> <style> .showBox{ width: 660px; overflow: hidden; } ul{ list-style:

  • 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    ReactJS是Facebook推出的产品.在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS. ReactJS可以看做就是用来Render的.ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上. 前沿 对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学

  • 纯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手风琴下拉菜单实现代码,先看一看效果图: 具体的javascript手风琴下拉菜单代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手风琴下拉菜单效果</title> <script src="js/jquery-1.11.1.j

  • 原生js做的手风琴效果的导航菜单

    原生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相结合实现手风琴菜单代码

    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实现的另类手风琴效果网页内容切换代码

    JS实现的另类手风琴效果网页内容切换代码

    本文实例讲述了JS实现的另类手风琴效果网页内容切换代码.分享给大家供大家参考.具体如下: 这是一款以海贼王为题材的另类手风琴效果,用到三张背景图片,请顺着代码自已下载吧,多看看类似特效的编写思路,对于提高你的Js编程水平有不少帮助的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sfq-web-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

  • 纯js实现手风琴效果代码

    我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型项目中就会显现出来,下面我用原生js实现一个简单的手风琴效果效果. HTML代码如下 结构非常简单就5个li盒子,js代码会渲染图片上去 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&

  • js实现可折叠展开的手风琴菜单效果

    js实现可折叠展开的手风琴菜单效果

    本文实例讲述了js实现可折叠展开的手风琴菜单效果.分享给大家供大家参考.具体如下: 这是一款可折叠展开的菜单,手风琴菜单,运用CSS与JavaScript技术实现的合拢与伸展的网页菜单,代码简洁,来自老外的代码作品,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hidden-show-sfq-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH

  • JS实现仿QQ面板的手风琴效果折叠菜单代码

    JS实现仿QQ面板的手风琴效果折叠菜单代码

    本文实例讲述了JS实现仿QQ面板的手风琴效果折叠菜单代码.分享给大家供大家参考.具体如下: 这是一款简单实用的垂直导航菜单,有人把这种风格称为"手风琴"菜单,类似仿QQ面板的折叠菜单,鼠标放在任意一个菜单上,它会展开所属的二级菜单,很不错的选择,以前就分享过此类菜单,这次经过了代码优化升级,更人性化了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-qq-sfq-style-menu-codes/ 具体代码如下: <!

随机推荐