手风琴JQ滑动特效

1.效果预览:

2.相关代码:
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .out {

            width: 1700px;

            height: 240px;

            overflow: hidden;

            margin: 0 auto;

        }

        .clear {

            clear: both;

        }

        img {

            width: 600px;

            height: 240px;

        }

        .first {

            margin-left: 0px;

        }

        .out2 {

            width: 1200px;

            height: 240px;

            margin: 0 auto;

            overflow: hidden;

            border: 1px solid red;

        }

        ul li{

            width: 240px;

            height: 240px;

            list-style: none;

            float: left;

        }

    </style>

</head>

<body>

<div class="out2">

    <div class="out">

        <ul>

            <li>  <img class="first" src="xiaomi/1.jpg"/></li>

            <li><img src="image/2.jpg"></li>

            <li><img src="image/3.jpg"></li>

            <li> <img src="image/4.jpg"></li>

            <li> <img src="image/5.jpg"></li>

        </ul>

    </div>

</div>

<script>

    var $lis = $("ul li");

    $lis.mouseenter(function () {

        $(this).stop().animate({width: 600},200).siblings().stop().animate({width:150},200);

    })

    $("div.out2").mouseleave(function () {

        $lis.stop().animate({width: 240},200);

    })

</script>

</body>

</html>

钢琴导航栏

1.演示效果

2.相关代码
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>

    <style>

        ul {

            height: 80px;

            overflow: hidden;

        }

        ul > li {

            width: 200px;

            height: 160px;

            /*background-color: black;*/

            color: white;

            float: left;

            list-style: none;

            text-align: center;

            line-height: 80px;

            border: 0.5px solid red;

        }

        ul > li .inner {

            width: 200px;

            height: 80px;

            background-color: black;

        }

        span.huang {

            width: 200px;

            height: 80px;

            display: block;

            background-color: orange;

            float: left;

            position: relative;

        }

        .out {

            margin-top: -80px;

            background-color: black;

            z-index: -2;

        }

        .wenzi {

            display: block;

            position: relative;

            color: white;

            z-index: 999;

            cursor: pointer;

        }

    </style>

</head>

<body>

<ul>

    <li><span class="wenzi">所有手机</span><div class="out"><div class="inner"></div><span class="huang"></span></div></li>

    <li><span class="wenzi">所有配件</span><div class="out"><div class="inner"></div><span class="huang"></span></div></li>

    <li><span class="wenzi">电视机</span><div class="out"><div class="inner"></div><span class="huang"></span></div></li>

    <li><span class="wenzi">笔记本</span><div class="out"><div class="inner"></div><span class="huang"></span></div></li>

    <li><span class="wenzi">路由器</span><div class="out"><div class="inner"></div><span class="huang"></span></div></li>

    <li><span class="wenzi">智能硬件</span><div class="out"><div class="inner"></div><span class="huang"></span></div></li>

</ul>

<script>

    $(function () {

        $("ul li").mouseenter(function () {

            $(this).children(".out").children(".inner").stop().slideUp();

        })

        $("ul li").mouseleave(function () {

            $(this).children(".out").children(".inner").slideDown();

        })

    })

</script>

</body>

</html>

手风琴图片和钢琴导航栏JQ滑动特效的更多相关文章

  1. 双击导航栏自动滑动ListView到顶部

    有些app都实现了双击导航栏让页面的list自动滑动到顶部的feature. 先实现一个继承于OnTouchListener的监听多次点击事件的监听器,通过callback把连续点击的次数返回给客户代 ...

  2. 微信小程序导航栏，下面内容滑动，上册导航栏跟着滑动，内容随着导航栏滑动

    16.类似微信导航栏滑动.png 今日头条导航栏,下面滑动上面跟着滑动 index.wxml <swiper class="content" style="heig ...

  3. Android底部导航栏(可滑动)----TabLayout+viewPager

    [TabLayout] ①TabLayout是选项卡,在屏幕空间有限的情况下,对不同的空间进行分组.属于android support design,更多的用于新闻上,如果放在底部也可做底部导航栏 ② ...

  4. 【前端】javascript实现导航栏筋斗云效果特效

    实现效果: 实现效果如下图所示 实现原理: 什么是筋斗云效果: 这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: 鼠标经过的时候,利用offsetLeft获 ...

  5. Android——Fragment实例精讲——底部导航栏+ViewPager滑动切换页面

    说明: 实现效果: 1- 用ViewPager实现Fragmen之间的切换 2- 底部用RadioGroup实现,更方便的实现图片和字体颜色的改变,更方便的通过RadioButton的点击事件来控制页 ...

  6. css实现手机端导航栏左右滑动

    <html> <head> <meta charset="utf-8"> <meta name="viewport" ...

  7. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  8. React实现顶部固定滑动式导航栏（导航条下拉一定像素时显示原导航栏样式）

    摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏,当导航栏置顶时,导航栏沉浸在背景图片里:当鼠标滑动滚轮时,导航栏固定滑动并展示下拉样式. JS部分 相关技术栈:react.antd.re ...

  9. iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

    当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动 ...

随机推荐

  1. trmd_b1_ok

    # -*- coding:utf-8 -*- ''' 从11c开始提取 ''' import re import numpy as np import os year = '17A' ss=" ...

  2. linux上安装maven

    解压安装: tar -zxvf apache-maven-3.3.9-bin.tar.gz 配置环境变量 cd /etc/ vi profile 在最后面加上M2_HOME=/usr/local/my ...

  3. button设置边宽和圆角

       UIButton *meifuButton = [UIButton buttonWithType:UIButtonTypeSystem];         [meifuButton setTit ...

  4. 关于iOS的自动弹出键盘问题

    -(void)viewWillAppear:(BOOL)animated {     [super viewWillAppear:animated];     [self.textField beco ...

  5. centos7 磁盘管理—— lvm的使用

    Linux用户安装Linux操作系统时遇到的一个常见的难以决定的问题就是如何正确地评估各分区大小,以分配合适的硬盘空间.普通的磁盘分区管理方式在逻辑分区划分好之后就无法改变其大小,当一个逻辑分区存放不 ...

  6. 集合（四）HashMap

    之前的List,讲了ArrayList.LinkedList,最后讲到了CopyOnWriteArrayList,就前两者而言,反映的是两种思想: (1)ArrayList以数组形式实现,顺序插入.查 ...

  7. JavaOperator小框架制作【精品博客】

    以下是运算小框架的制作过程,以及核心代码,完成(计算,监听,回馈等): package com.demo2.operator; /** * 运算标准接口 * @author Liudeli */ pu ...

  8. 摘抄-----java codeReview要做的事

    整洁的代码 清单项目 分类 使用可以表达实际意图(Intention-Revealing)的名称 有意义的名称 每一个概念只用一个词 有意义的名称 使用方案/问题领域名称 有意义的名称 类应该是比较小 ...

  9. WPF/Silverlight开发的15个最佳实践(转发)

    英文出处:http://www.kunal-chowdhury.com/2010/08/some-best-practices-for-silverlight.html 作者:Kunal Chowdh ...

  10. C#判断本地文件，网络文件是否存在是否存在

    File.Exists 方法 (String) 确定指定的文件是否存在. 命名空间:   System.IO程序集:  mscorlib(位于 mscorlib.dll) 参数 path Type:  ...