JavaScript手风琴页面制作


Posted in Javascript onMay 17, 2017

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

JavaScript手风琴页面制作

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 相关文章推荐
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
html实现随机点名器的示例代码
Apr 02 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 Javascript
jQuery查找dom的几种方法效率详解
May 17 #jQuery
bootstrap的工具提示实例代码
May 17 #Javascript
js字符串与Unicode编码互相转换
May 17 #Javascript
JavaScript实现省市县三级级联特效
May 16 #Javascript
原生js简单实现放大镜特效
May 16 #Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 #Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 #Javascript
You might like
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
浅析is_writable的php实现
2013/06/18 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
PHP里的单例类写法实例
2015/06/25 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
开学典礼主持词
2014/03/19 职场文书
党员承诺书格式
2014/05/21 职场文书
社会实践活动总结范文
2014/07/03 职场文书
代领毕业证委托书
2014/08/02 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
校长新学期致辞
2015/07/30 职场文书