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 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
jQuery 入门讲解1
Apr 15 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 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下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
自动完成的搜索框javascript实现
2016/02/26 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
学习Vue组件实例
2018/04/28 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
Python pickle模块用法实例
2015/04/14 Python
实例Python处理XML文件的方法
2015/08/31 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
python ssh 执行shell命令的示例
2020/09/29 Python
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
大学生演讲稿范文
2014/01/11 职场文书
《灯光》教学反思
2014/02/08 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python