您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

  • jquery垂直下拉多级菜单效果

    jquery垂直下拉多级菜单效果

    jquery垂直下拉多级菜单效果
    20150927104217
    导入js代码

    <script src="jquery.min.js" type="text/javascript"></script><script type="text/javascript" src="menu_min.js"></script><script type="text/javascript">$(document).ready(function (){ $(".menu ul li").menu(); }); </script> 

    下载地址
    预览地址

  • 可调整导航大小的jQuery特效

    可调整导航大小的jQuery特效

    可调整导航大小的jQuery特效
    20150922230949
    引入js代码

    <script type="text/javascript" src="jquery-1.3.2.js"></script><script type="text/javascript"> $(function() { changeWidth(500); $('#buttons input').click(function() { changeWidth($(this).val()); }); function changeWidth(menuWidth) { var menuItems = $('#menu li').size(); var itemWidth = (menuWidth / menuItems) - 2; $('#menu').css({ 'width': menuWidth + 'px' }); $('#menu a').css({ 'width': itemWidth + 'px' }); } });</script>

    下载地址
    预览地址

  • 模仿flash翻转效果的jquery导航菜单代码

    模仿flash翻转效果的jquery导航菜单代码

    模仿flash翻转效果的jquery导航菜单代码
    20150927093730
    引入css js代码文件

    <link href="css/flipmenu.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="js/jquery-1.3.2.min.js"></script><script type="text/javascript" src="js/flipmenu-min.js"></script><script type="text/javascript"> $(document).ready(function() { var menu1 = new Flipmenu("flip_menu1"); var menu2 = new Flipmenu("flip_menu2"); });</script><style type="text/css"> h1 { font-family: arial; font-size: 14pt; color: #318DF2; margin-top: 35px; } #wrap { margin : 0px auto; width : 200px; }</style>

    下载地址
    预览地址

  • jquery展开收缩手风琴菜单特效

    jquery展开收缩手风琴菜单特效

    jquery展开收缩手风琴菜单特效
    20150416223416
    部分jQuery代码

    <script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript"> $(function() { //菜单隐藏展开 var tabs_i = 0 $('.vtitle').click(function() { var _self = $(this); var j = $('.vtitle').index(_self); if (tabs_i == j) return false; tabs_i = j; $('.vtitle em').each(function(e) { if (e == tabs_i) { $('em', _self).removeClass('v01').addClass('v02'); } else { $(this).removeClass('v02').addClass('v01'); } }); $('.vcon').slideUp().eq(tabs_i).slideDown(); }); })</script>

    下载地址
    预览地址

  • jQuery横向手风琴菜单特效

    jQuery横向手风琴菜单特效

    jQuery横向手风琴菜单特效
    20150409164721
    部分jquery代码

    $(document).ready(function() { var $centerwell_first = $('#centerwell li:first'); $centerwell_first.animate({ width: '318px' }, 300); $centerwell_first.find('h3').animate({ backgroundPosition: '-72px' }, 300); $('#centerwell li').click(function() { window.open($(this).find('a').attr('href')); }); $('#centerwell li').mouseenter(function() { if (!$(this).is(':animated')) { $(this).animate({ width: '318px' }, 300).siblings().animate({ width: '72px' }, 300); $(this).find('h3').animate({ backgroundPosition: '-72px' }, 300).parent().siblings().find('h3').animate({ backgroundPosition: '0px' }, 300); } });});

    下载地址
    预览地址

  • jQuery垂直可折叠手风琴菜单特效

    jQuery垂直可折叠手风琴菜单特效

    jQuery垂直可折叠手风琴菜单特效
    20150409164246
    部分jquery代码

    <script type=text/javascript> $(document).ready(function() { $("#firstpane .menu_body:eq(0)").show(); $("#firstpane p.menu_head").click(function() { $(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); $(this).siblings().removeClass("current"); }); $("#secondpane .menu_body:eq(0)").show(); $("#secondpane p.menu_head").mouseover(function() { $(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow"); $(this).siblings().removeClass("current"); }); });</script>

    下载地址
    预览地址

  • jQuery网站右侧楼层锚点带动画跳转特效

    jQuery网站右侧楼层锚点带动画跳转特效

    jQuery网站右侧楼层锚点带动画跳转特效
    20150408133225
    部分jquery代码

    <script type="text/javascript"> jQuery(document).ready(function($) { $(".index_nav li a").click(function(event) { var index = this.title var id = '#' + 'index_' + index $("html,body").animate({ scrollTop: $(id).offset().top }, 1000); }); $(".taoba").click(function(event) { var index = this.title var id = '#' + 'index_' + index $("html,body").animate({ scrollTop: $(id).offset().top }, 1000); }); function a(x, y) { l = $('#main').offset().left; w = $('#main').width(); $('#tbox').css('left', (l + w + x) + 'px'); $('#tbox').css('bottom', y + 'px'); } //获取#tbox的div距浏览器底部和页面内容区域右侧的距离函数#main为页面的可视宽度 $(function() { $(window).scroll(function() { t = $(document).scrollTop(); if (t > 500) { $('#tbox').show(); } else { $('#tbox').hide(); } if (t > 50) { $('#gotop').fadeIn('slow'); } else { $('#gotop').fadeOut('slow'); } }) a(10, 100); //#tbox的div距浏览器底部和页面内容区域右侧的距离 $('#gotop').click(function() { $('body,html').animate({ scrollTop: 0 }, 800); //点击回到顶部按钮,缓懂回到顶部,数字越小越快 return false; }) }); });</script>

    下载地址
    预览地址

  • 鼠标滑过遮罩跟随jQuery导航菜单特效

    鼠标滑过遮罩跟随jQuery导航菜单特效

    鼠标滑过遮罩跟随jQuery导航菜单特效
    20150408132656
    部分jquery代码

    <script type="text/javascript"> $(document).ready(function(e) { var navLi = $("#nav-div ul li"), navUl = $("#nav-div ul"), speed = 200; function OnClick() { n = navUl.find("li.on").index(); navUl.stop().animate({ backgroundPosition: navLi.width() * n }, speed); } OnClick(); navLi.hover(function() { n = $(this).index(); navUl.stop().animate({ backgroundPosition: navLi.width() * n }, speed); }, function() { OnClick(); }) navLi.click(function() { $(this).addClass("on").siblings().removeClass("on") }); $(window).scroll(function() { if ($(window).scrollTop() > $("#nav").height() + 50) { $("#nav").addClass("scoll_nav") } else { $("#nav").removeClass("scoll_nav") } }); })

    下载地址
    预览地址

  • jQuery滑动拉伸导航按钮特效

    jQuery滑动拉伸导航按钮特效

    jQuery滑动拉伸导航按钮特效
    20150408131902
    部分jquery代码

    jQuery.preloadImages = function() { for (var i = 0; i < arguments.length; i++) jQuery("<img>").attr("src", arguments[i]);}jQuery.preloadImages("../images/key.gif", "../images/keyo.gif", "../images/rss.gif", "../images/rsso.gif", "../images/sel.gif", "../images/selo.gif");jQuery(document).ready(function() { $("#iconbar li a").hover(function() { var iconName = $(this).children("img").attr("src"); var origen = iconName.split(".gif")[0]; $(this).children("img").attr({ src: "" + origen + "o.gif" }); $(this).css("cursor", "pointer"); $(this).animate({ width: "140px" }, { queue: false, duration: "normal" }); $(this).children("span").animate({ opacity: "show" }, "fast"); }, function() { var iconName = $(this).children("img").attr("src"); var origen = iconName.split("o.")[0]; $(this).children("img").attr({ src: "" + origen + ".gif" }); $(this).animate({ width: "24px" }, { queue: false, duration: "normal" }); $(this).children("span").animate({ opacity: "hide" }, "fast"); });});

    下载地址
    预览地址

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!