手风琴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. Vue组件通信父传方法给子组件调用

    // 父组件中将 :meth='changeCom1' 传入入子组件 , 子组件运行 meth(i) 方法 并给他传参数 ,在父组件可以获取这个参数,并做相应的操作   // 父组件 <temp ...

  2. （匹配）Courses -- hdu --1083

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1083 http://acm.hust.edu.cn/vjudge/contest/view.action ...

  3. 射线和三角形的相交检测（ray triangle intersection test）【转】

    本文以Fast, Minimum Storage Ray Triangle Intersection为参考,在此感谢原作者,大家也可以直接阅读原版. 概述 射线和三角形的相交检测是游戏程序设计中一个常 ...

  4. NavigationViewController页面间通信及传值

    使用进行页面跳转时,应该使用方法来跳转至下一页面,这样的话,下一页面同样在容器中. 1AloneSetPrizeViewController *setPrize = [[AloneSetPrizeVi ...

  5. OC 数组以及字符串拼接与分割

    //@""空的字符串对象-------分割 NSString * ptr = @"I am a man"; NSArray * array = [ptr com ...

  6. 阿里云ECS服务器windows环境下配置redis

    一.下载解压redis github下载地址:https://github.com/MSOpenTech/redis/tags 下载的是Redis-x64-3.2.100版本,Redis-x64-3. ...

  7. WPF CompositionTarget

    CompositionTarget 是一个类,表示其绘制你的应用程序的显示图面. WPF 动画引擎提供了许多用于创建基于帧的动画的功能. 但是,有应用程序方案中,您需要通过基于每个帧来呈现控件. Co ...

  8. 企业项目开发--本地缓存guava cache（1）

    此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1.在实际项目开发中,会使用到很多缓存技术,而且数据库的设计一般也会依赖于有缓存的情况下设计. 常用的缓存分 ...

  9. 深入学习c++--左值引用和右值引用

    #include <iostream> #include <string> #include <vector> using namespace std; int m ...

  10. Mysql分析-profile详解

    一.前言当我们要对某一条sql的性能进行分析时,可以使用它. Profiling是从 mysql5.0.3版本以后才开放的.启动profile之后,所有查询包括错误的语句都会记录在内.关闭会话或者se ...