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 面向对象思想 附源码
Jul 07 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
Vue触发input选取文件点击事件操作
Aug 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
javascript Object与Function使用
2010/01/11 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
Python回调函数用法实例详解
2015/07/02 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
python 实现有道翻译功能
2021/02/26 Python
八年级数学教学反思
2014/01/31 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
九华山导游词
2015/02/03 职场文书
致运动员赞词
2015/07/22 职场文书
公司出差管理制度范本
2015/08/05 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
导游词之杭州西湖
2019/09/19 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS