JavaScript手风琴页面制作

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

1.超文本标记语言结构代码

！DOCTYPE html html head meta charset=' utf-8 '/title手风琴2/title link rel='样式表type=' text/CSS ' href=' CSS/new _ file。CSS ' rel='外部no follow '/script src=' http : js/jquery-1。10 .2 .量滴js '/script script src=' http : js/new _ file。js '/脚本/头体div id=' GS ' div class=' GS gs1 ' div class=' txt ' p class=' P1 '我的旅行记一我的旅行记3/p p类='p2 '空山之旅我的旅行记3/p/div/div class=' GS gs2 ' div class=' txt ' p class=' P1 '我的旅行记2我的旅行记3/p p类='p2 '沙漠之旅我的旅行记3/p/div/div class=' GS gs3 ' div class=' txt ' p class=' P1 '我的旅行记3我的旅行记3/p p类='p2 '拉沙之旅我的旅行记3/p/div/div class=' GS gs4 ' div class=' txt ' p class=' P1 '我的旅行记四我的旅行记3/p p类='p2 '雪山之旅我的旅行记3/p/div/div/body/html 2半铸钢钢性铸铁(Cast Semi-Steel)样式代码

* { padding: 0pxmargin: 0px字体系列： '微软雅黑；} # gs { width: 1100px高度： 429像素；}.gs { width: 100px高度： 429像素；向左浮动：} .gs4 { width: 789px高度： 429像素；}.gs1 { background: url(./img/img/1.jpg)重复向左上方滚动；}.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高度： 429像素；/*边距： 15px*/background: rgba(0，0，0，0.5)；光标：指针；}/*.txt p {左侧浮动：宽度： 20px高度： 429像素；color : # ffffont-size : 20px；margin: 14px}*/。txt p { color: # fff向左浮动：margin: 15px}。txt。P1 { font-size : 14px；宽度： 14px}.txt。p2 { font-size : 12px宽度： 12px}3.javascript代码

$(function(){ $(').txt ').mouseover(函数(){ $(this)).父项()。停止（真)。动画({'width':'789px'}，500).兄弟姐妹()。停止（真)。动画({'width':'100px'}，500)；});});4.主要：

a.字体竖排垂直：字体大小字体大小=包含字体标签宽度宽度

b.js中停止()方法：停止()表示结束动画有过渡

停止（真)表示暂停动画，

停止（真，真)表示立即结束动画，无过渡

c.parent():找到上一级元素

兄弟姐妹():除了本元素外，其他的。

动画(:)动画效果

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