JavaScript手风琴页面制作

2019-11-19 16:34:39

字体：大中小

来源：转载

供稿：网友

啥都不说了，直接上效果图

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

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

上一篇：原生JS实现层叠轮播图

下一篇：jQuery查找dom的几种方法效率详解