手风琴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. py-函数基础

    定义: 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 特性: 1.减少重复代码2.使程序变的可扩展3.使程序变得易维护 函数参数 形参变量 只有在被调 ...

  2. Swift要点：从Objective-C开发者的角度看Swift

    代码环境是Xcode6.3-Beta3. Swift已经极大的改变了开发iOS应用的方式.本文中,我会列出Swift的几个重点,并且和Objective-C一一做出对比. 注意,本文不是Swift的入 ...

  3. Python 运行 Python hello.py 出错，提示： File "<stdin>" , line 1

    写了一个hello.py,仅有一句,print 'hello world', 运行 Python hello.py 出错,提示: File "<stdin>" , li ...

  4. OpenNI体感应用开发实战 （Kinect相机）

    一直以为Kinect是双目摄像机,或者是三目,看到那三个摄像头怎么可能不产生这样的疑惑,实际上它确实是单目摄像机,它三个摄像头分别为:红外发射器,RGB彩色相机,红外接收器.而其中,红外发射器和红外接 ...

  5. 《SLAM for Dummies》中文版《SLAM初学者教程》

    SLAM for Dummies  SLAM初学者教程A Tutorial Approach to Simultaneous Localization and Mapping  一本关于实时定位及绘图 ...

  6. （深搜）Sum It Up -- poj --1564

    链接: http://poj.org/problem?id=1564 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=88230#probl ...

  7. （连通图 ） Redundant Paths --POJ --3177

    链接: http://poj.org/problem?id=3177 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82833#probl ...

  8. Codeforces758B Blown Garland 2017-01-20 10:19 87人阅读 评论(0) 收藏

    B. Blown Garland time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  9. hdu 4998 矩阵表示旋转

    http://acm.hdu.edu.cn/showproblem.php?pid=4998 http://blog.csdn.net/wcyoot/article/details/33310329 ...

  10. Delphi Dll 动态调用例子(1)

    http://blog.sina.com.cn/s/blog_62c46c3701010q7h.html 一.编写dll library TestDllByD2007; uses  SysUtils, ...