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 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
js自定义瀑布流布局插件
May 16 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
php多层数组与对象的转换实例代码
2013/08/05 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
php判断当前操作系统类型
2015/10/28 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
CSS常用网站布局实例
2008/04/03 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
一分钟理解js闭包
2016/05/04 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
Python ini文件常用操作方法解析
2020/04/26 Python
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
韩国11街:11STREET
2018/03/27 全球购物
保安自我鉴定范文
2013/12/08 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
预备党员综合考察材料
2014/05/31 职场文书
婚前财产协议书范本
2014/10/19 职场文书
蓬莱阁导游词
2015/02/04 职场文书
放假通知
2015/04/14 职场文书
小学运动会加油稿
2015/07/22 职场文书