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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 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
自己前几天写的无限分类类
2007/02/14 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
php输出xml属性的方法
2015/03/19 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
js玩一玩WSH吧
2007/02/23 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
Vue.js用法详解
2017/11/13 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
linux下python抓屏实现方法
2015/05/22 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
建筑横幅标语
2014/10/09 职场文书
校园新闻稿范文
2015/07/18 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL