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

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

  • Tab标签选项卡360度内容翻转jquery特效

    Tab标签选项卡360度内容翻转jquery特效

    Tab标签选项卡360度内容翻转jquery特效
    20150927103604
    引入js代码

    <script src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.quickflip.js" ></script><script type="text/javascript" > $('document').ready(function(){ $('#flip-container').quickFlip(); $('#flip-navigation li a').each(function(){ $(this).click(function(){ $('#flip-navigation li').each(function(){ $(this).removeClass('selected'); }); $(this).parent().addClass('selected'); var flipid=$(this).attr('id').substr(4); $('#flip-container').quickFlipper({ }, flipid, 1); return false; }); }); });</script>

    下载地址
    预览地址

  • jQuery Tab标签自动切换特效

    jQuery Tab标签自动切换特效

    jQuery Tab标签自动切换特效
    20150409161848
    部分jquery代码

    $(document).ready(function() { $('#list_mark em:first').addClass('emon'); $('.list1:first').css('display', 'block'); autoroll(); hookThumb();}) var i = -1; //第i+1个tab开始var offset = 3000; //轮换时间var timer = null;function autoroll() { n = $('#list_mark em').length - 1; i++; if (i > n) { i = 0; } slide(i); timer = window.setTimeout(autoroll, offset);}function slide(i) { $('#list_mark em').eq(i).addClass('emon').siblings().removeClass('emon'); $('.list1').eq(i).css('display', 'block').siblings('.list1').css('display', 'none');}function hookThumb() { $('#list_mark em').hover(function() { if (timer) { clearTimeout(timer); i = $(this).prevAll().length; slide(i); } }, function() { timer = window.setTimeout(autoroll, offset); this.blur(); return false; });}

    下载地址
    预览地址

  • 导航网站谷歌浏览器初始页jQuery滑动切换特效

    导航网站谷歌浏览器初始页jQuery滑动切换特效

    导航网站谷歌浏览器初始页jQuery滑动切换特效
    20150409161245
    部分jquery代码

    <script type="text/javascript"> $(function() { var w = 100 + "%"; var n = $('.roll_ul li').size(); $('.roll_ul').width(100 * n + "%"); $('.roll_ul li').width(100 / n + "%"); var t = 0; $('#banner_next').bind('click', function() { t++; $('#banner_prev').show(); var f = $('.roll_ul').css('left'); $('.roll_ul').animate({ 'left': '-=100%' }, 300); if (t == n - 1) { $('#banner_next').hide() } $('.scroll_nav b').eq(t).siblings().removeClass('current'); $('.scroll_nav b').eq(t).addClass('current'); }) $('#banner_prev').click(function() { t--; $('#banner_next').show(); var l = $('.roll_ul').css('left'); $('.roll_ul').animate({ 'left': '+=100%' }, 300) if (t == 0) { $('#banner_prev').hide() } $('.scroll_nav b').eq(t).siblings().removeClass('current'); $('.scroll_nav b').eq(t).addClass('current'); }) $('.scroll_nav b').each(function(i) { $(this).click(function() { i = $(this).index(); $('#banner_prev').show(); if (i == 0) { $('#banner_prev').hide(); $('#banner_next').show(); } if (i == n - 1) { $('#banner_next').hide(); } var cd = -100 * i + "%"; $('.roll_ul').animate({ 'left': cd }, 500); $(this).siblings().removeClass('current'); $(this).addClass('current') }) }) })</script>

    下载地址
    预览地址

  • 鼠标悬停内容移动切换jQuery特效

    鼠标悬停内容移动切换jQuery特效

    鼠标悬停内容移动切换jQuery特效
    20150408134714
    部分jquery代码

    function createBoxes(container) { container.data('coordinates', new Array()); container.data('complete', 0); var w = frameHeight / rows; var h = frameWidth / cols; if (w % 10 > 0) { w = parseInt(w); w++; } if (h % 10 > 0) { h = parseInt(h); h++; } var totalBoxes = cols * rows; timeFactor = animationSpeed / totalBoxes; for (var i = 0; i < rows; i++) { for (var j = 0; j < cols; j++) { var box = $('<div/>').css({ 'width': w + 'px', 'height': h + 'px', 'top': (i * h) + 'px', 'left': (j * w) + 'px', 'position': 'absolute' }).addClass('boxy-el').addClass('piece').hide(); container.append(box); } } $(".boxy-el", container).each(function(index) { var pos = { left: $(this).css('left'), top: $(this).css('top') }; container.data('coordinates').push(pos); }); var randomElements = $(".boxy-el", container).get().sort(function() { return Math.round(Math.random()) - 0.5 }); container.data('elements', randomElements);}

    下载地址
    预览地址

  • jQuery TAB文字列表自动切换特效

    jQuery TAB文字列表自动切换特效

    jQuery TAB文字列表自动切换特效
    20150408133600
    部分jquery代码

    $(document).ready(function() { //所有的标签都存储在数组中 $(".tab").map(function() { tabs[ind++] = $(this).attr("id"); }) //设置索引的下一个元素 ind = 1; //初始化标签,显示当前选项卡 $(".tab:not(:first)").hide(); $(".tab:first").show(); //突出当前选项卡标题 $('#' + tabs[0] + 't').addClass('select'); //处理程序点击选项卡 $(".htabs a").click(function() { //如果点击选项卡,停止旋转 clearInterval(inter); //点击存储引用选项卡 stringref = $(this).attr("href").split('#')[1]; //显示引用选项卡 change(stringref); return false; }); //开始旋转选项卡 inter = setInterval("next()", 4000);});

    下载地址
    预览地址

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

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

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

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

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