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 相关文章推荐
Script标签与访问HTML页面详解
Jan 10 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 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转成EXE文件
2006/10/09 PHP
php str_replace的替换漏洞
2008/03/15 PHP
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
python迭代dict的key和value的方法
2018/07/06 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
Python 使用多属性来进行排序
2019/09/01 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
python开发一款翻译工具
2020/10/10 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
什么是Web Service?
2012/07/25 面试题
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
幼儿园大班评语大全
2014/04/17 职场文书
干部个人考察材料
2014/12/24 职场文书
大雁塔英文导游词
2015/02/10 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python