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 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
js实现特别简单的钟表效果
Sep 14 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
用PHP制作静态网站的模板框架(四)
2006/10/09 PHP
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
PHP序列化操作方法分析
2016/09/28 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
nodejs开发——express路由与中间件
2017/03/24 NodeJs
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
JavaScript对象原型链原理详解
2020/02/05 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
django框架创建应用操作示例
2019/09/26 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
新领导上任欢迎词
2014/01/13 职场文书
什么是就业协议书
2014/04/17 职场文书
节水口号标语
2014/06/19 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
python基础之错误和异常处理
2021/10/24 Python