IT猫扑网 ● 编程开发

分类分类

jQuery手风琴图片相册特效插件

jQuery手风琴图片相册特效插件

正式版

大小：427.00 KB更新：2017/04/11

类别：编程辅助系统：Winll

立即下载
  • jQuery手风琴图片相册特效插件(1)

jQuery手风琴效果插件是一款能够将界面显示成手风琴样式的jQuery插件，安装之后就可以使用啦，大气美观，有需要的就来IT猫扑下载吧！

jQuery手风琴图片相册特效插件介绍

jQuery手风琴图片相册特效插件，这是一款使用纯javascript来制作的带弹性动画的手风琴图片相册特效。

该手风琴图片相册在鼠标滑过时，相应的图片会水平展开，而图片的说明文字则会垂直滑动上来，形成一些视觉差的感觉。

使用方法

在页面中引入样式文件main.css和jquery、jquery.easing.min.js文件，以及轮播图js文件main.js。

css样式

代码如下:

/* CSS Document */

body {

    margin: 0 auto;

    padding: 0 auto;

    font-size: 9pt;

    font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;

}

.accordion {

    padding-left: 0px;

}

.accordion li {

    border-top: 1px solid #000;

    list-style-type: none;

}

.titlemenu {

    width: 100%;

    height: 30px;

    background-color: #F2F2F2;

    padding: 5px 0px;

    text-align: left;

    cursor: pointer;

}

.titlemenu img {

    position: relative;

    left: 20px;

    top: 5px;

}

.titlemenu span {

    display: inline-block;

    position: relative;

    left: 40px;

}

.submenu {

    text-align: left;

    width: 100%;

    padding-left: 0px;

}

.submenu li {

    list-style-type: none;

    width: 100%;

}

.submenu li img {

    position: relative;

    left: 20px;

    top: 5px;

}

.submenu li a {

    position: relative;

    left: 40px;

    top: 5px;

    text-decoration: none;

}

.submenu li span {

    display: inline-block;

    height: 30px;

    padding: 5px 0px;

}

.hover {

    background-color: #4A5B79;

}

自定义js

代码如下:

(function ($) {

    piano = function () {

        _menu ='[{&title&:&一级目录&,&img&:&images/cog.png&,&submenu&:[{&title&:&二级目录&,&img&:&images/monitor_window_3d.png&},{&title&:&二级目录&,&img&:&images/monitor_window_3d.png&},{&title&:&二级目录&,&img&:&images/monitor_window_3d.png&}]},{&title&:&一级目录&,&img&:&images/cog.png&,&submenu&:[{&title&:&二级目录&,&img&:&images/monitor_window_3d.png&},{&title&:&二级目录&,&img&:&images/monitor_window_3d.png&},{&id&:&4&,&title&:&二级目录&,&img&:&images/monitor_window_3d.png&}]}]';

        return ep = {

            init: function (obj) {

                _menu = eval('(' + _menu + ')');

                 var li =&&;

                $.each(_menu, function (index, element) {

                    li += '<li><div class=&titlemenu&><img src=' + element.img + ' width=&16& height=&16&  alt=&&/><span>' + element.title + '</span></div>';

                    if(element.submenu!=null)

                    {

                        li+='<ul class=&submenu&>';

                        $.each(element.submenu, function (ind, ele) {

                            li += '<li><img src=' + ele.img + ' width=&16& height=&16&  alt=&&/><span><a href=&#&>' + ele.title + '</a></span></li>';

                        });

                        li+='</ul>';

                    }

                    li+='</li>';

                });

                obj.append(li);

            }

        }

    }

    $.fn.accordion = function (options) {

        var pia = new piano();

        pia.init($(this));

        return this.each(function () {

            var accs = $(this).children('li');

             accs.each(reset);

            accs.click(onClick);

            var menu_li = $(&.submenu&).children(&li&);

            menu_li.each(function (index, element) {

                $(this).mousemove(function (e) {

                    $(this).siblings().removeClass(&hover&);

                    $(this).find(&a&).css(&color&, &#fff&);

                    $(this).siblings().find(&a&).css(&color&, �&);

                    $(this).addClass(&hover&);

                });

            });

        });

    }

    function onClick() {

        $(this).siblings('li').find(&ul&).each(hide);

        $(this).find(&ul&).slideDown('normal');

        return false;

    }

    function hide() {

        $(this).slideUp('normal');

    }

    function reset() {

        $(this).find(&ul&).hide();

    }

})(jQuery);

html调用方式

代码如下:

<!doctype html>

<html>

<head>

<meta charset=&utf-8&>

<title>无标题文档</title>

<script src=&jquery-1.8.0.min.js&></script>

<link rel=&stylesheet& type=&text/css& href=&style.css&>

<script src=&accordion.js&></script>

<script type=&text/javascript&>            

    $(function(){

        $(&#accordion&).accordion();

    });

</script>

</head>

<body>

<ul id=&accordion&  class=&accordion& style=&width:200px;height:500px;&>

</ul>

</body>

</html>

精品推荐
猜你喜欢
  • jquery特效插件
  • jQuery插件

jquery特效插件更多>>

jquery特效插件是属于jquery插件中其中的一种，适用于jQuery页面，非常方便实用，本专题为大家准备了jquery特效插件大全，为你推荐有jQuery折叠特效插件、QuikQuak音频特效插件、jQuery万花筒动画插件、jQuery鼠标滑过特效插件、jquery轮播图动画特效插件等jquery特效插件效果，喜欢的朋友快来IT猫扑下载吧！

jQuery插件更多>>

jquery插件有哪些?jquery插件有有很多！诸如jquery分页插件、jquery侧边栏插件等都是jquery常用插件，非常实用，IT猫扑小编会长期更新jquery插件库免费下载，有需要的快来看看吧！

相关下载
  • jquery弹出层窗口插件fdialog详情
  • jQuery带缩略图轮播图代码插件详情
  • jQuery手机端带农历万年历插件详情
  • jQuery thickbox js 弹出框详情
  • jQuery form表单提交插件详情
  • jQuery下拉框插件FlexBox详情
  • jQuery UI框架详情
  • 星芒效果PS滤镜StarFilter Pro详情
  • (win10安装apk)Windows 10 Mobile APK Installer详情
  • jquery 1.8.3.min.js详情
  • FireQuery(jQuery开发插件)详情
  • jQuery v2.1.1详情
  • jQuery 1.x和2.x 所有版本大全详情
  • jquery-1.8.2.min.js详情
  • jQuery v1.9.1详情
  • JQuery API 1.8.3 中文参考手册详情
  • .NET版本检测工具(.NET Version Detector)详情
  • jQuery EasyUI详情
  • Bigasoft MKV Converter(MKV播放转换器)详情
  • 密室逃脱23迷失俱乐部游戏详情
    • 最新排行
    • 最热排行
    • 评分最高
    编程开发排行榜

    点击查看更多

    点击查看更多

    点击查看更多

    说两句网友评论
      我要跟贴
      取消
      实时热词
      debug工具visual assist x编码转换器poi jar版本控制HttpClientjar包Android Studio插件jquery手册jQuery插件xml编辑器