手风琴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. Dbutils学习（介绍和入门）

    一:Dbutils是什么?(当我们很难理解一个东西的官方解释的时候,就让我们记住它的作用)      Dbutils:主要是封装了JDBC的代码,简化dao层的操作.      作用:帮助java程序 ...

  2. 1) Spring_HelloWorld

    1. Spring Tool Suite™ 方式一:下载对应eclipse版本的文件,离线安装 4.4.2 springsource-tool-suite-3.6.4.RELEASE-e4.4.2-u ...

  3. netty 原理

    netty 实现 1. 各组件之间的关系 每个ServerBootstrap与一个事件循环对象(一个线程)都会与一个Channel绑定,如NioServerSocketChannel 2. 如何绑定 ...

  4. Andfix热修复原理

    一.前言 最近腾讯弄出一个Tinker热修复框架,那么本文先不介绍这个框架,先来介绍一下阿里的一个热修复框架AndFix,这个框架出来已经很长时间了,但是看网上没有太多非常详细的讲解,这里就来做一次分 ...

  5. html5 录制/保存视频/录音

    国内这方面的资料真少的可怜,翻出去一搜一大把,推荐一个github的插件库,非常强大,支持各种各样的录制方式. 下载完成之后,引用对应的js立即可以使用. <script src="R ...

  6. Python中通过open()操作文件时的文件中文名乱码问题

    最近在用Python进行文件操作的时候,遇到创建中文文件名的乱码问题. Python默认是不支持中文的,一般我们在程序的开头加上#-*-coding:utf-8-*-来解决这个问题,但是在我用open ...

  7. easyui-combobox url绑定后台json数据问题

    <input id="line" name="line" style="max-width:120px;" class="e ...

  8. 利用backtrace和backtrace_symbols函数打印调用栈信息

    在头文件"execinfo.h"中声明了三个函数用于获取当前线程的函数调用堆栈. #include <execinfo.h>  int backtrace(void * ...

  9. NET 下载共享文件

    执行 public static void Run() { "); if (state) { // 共享文件夹的目录 TransportRemoteToLocal(@"\\192. ...

  10. jquery.cookie.js 删除cookie

    简单交代一下背景:asp.net页面的上的切换登录按钮的点击事件实现cookie的删除. 但是好像没办法直接删除,通过网上提供的方法,可以使用jquery.cookie.js 来操作cookie的创建 ...