手风琴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. MongoDB安装为Windows服务方法与注意事项

    MongoDB作为一个基于分布式文件存储的数据库,近两年大受追捧.数据灵活的存取方式和高效的处理使得它广泛用于互联网应用. 最近本人开始在Windows 32位平台下研究MongoDB的使用,为了方便 ...

  2. AugularJS, Responsive, phonegap, BAE, SAE,GAE, Paas

    http://freewind.me/blog/20121226/1167.html http://88250.b3log.org/bae-sae-gae http://www.ruanyifeng. ...

  3. RepositionBars的用法和参数的意义（引用别人的）

    MFC窗口位置管理详细分析及实例 在一般用MFC编写的程序的窗口客户区中,可能有好几个子窗口(具有WM_CHILD风格的窗口).上边是工具栏,中间是视图窗口,下边是状态栏.三个窗 口在框架的客户区里和 ...

  4. 使用Xcode 7 beta免费真机调试iOS应用程序

    使用Xcode 7 beta免费真机调试iOS应用程序 六月 9, 2015  |   K-Res 发布   今天凌晨的WWDC15虽然没有熬夜守候吧,但也还是早起第一时间翻看了twitter的相关标 ...

  5. Android Sqlite 简单SQL语句

    --- 创建表 create table student(_id integer primary key autoincrement, name text); --- 查询全部 select _id, ...

  6. Jersey Client Post Bean参数

    代码: public static void main(String[] args) { Student st = new Student("Adriana", "Bar ...

  7. CSS/CSS3

    CSS/CSS3 选择器. 选择器 例子 例子描述 CSS 说明 .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 ...

  8. [ASP.NET]ASP.NET中常用的26个优化性能方法

    1. 数据库访问性能优化 数据库的连接和关闭 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比较耗费服务器资源.ASP.NET中提供了连接池( ...

  9. Oracle数据库中 to_date()与24小时制表示法及mm分钟的显示

      一.在使用Oracle的to_date函数来做日期转换时,时候也许会直接的采用“yyyy-MM-dd HH:mm:ss”的格式作为格式进行转换,但是在Oracle中会引起错误:“ORA 01810 ...

  10. MessageBox实现自动延时关闭

    1,首先新建一个winform窗体:MessageForm,设置StartPosition属性为Manual,Location属性值-500, -500 主要是为了让MessageForm窗体不显示在 ...