JavaScript手风琴页面制作

时间：2021-05-26

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

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; background: rgba(0,0,0,0.5); cursor: pointer;}.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():动画效果

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章