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

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

  • jQuery旋转预览画廊效果

    jQuery旋转预览画廊效果

    jQuery旋转预览画廊效果
    20150913105025
    HTML代码结构

    <div class="wrapper"> <div class="gallery"> <ul class="reset"> <li><img src="img/img1.jpg" alt="" /></li> <li><img src="img/img2.jpg" alt="" /></li> <li><img src="img/img3.jpg" alt="" /></li> <li><img src="img/img4.jpg" alt="" /></li> <li><img src="img/img5.jpg" alt="" /></li> <li><img src="img/img6.jpg" alt="" /></li> <li><img src="img/img7.jpg" alt="" /></li> <li><img src="img/img8.jpg" alt="" /></li> </ul> </div> </div>

    导入js代码文件

    <script src="js/jquery.js" type="text/javascript"></script><script src="js/raphael.js" type="text/javascript"></script><script src="js/init.js" type="text/javascript"></script>

    下载地址
    预览地址

  • 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> 

    下载地址
    预览地址

  • 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>

    下载地址
    预览地址

  • Zoomhover简易的jQuery放大镜效果

    Zoomhover简易的jQuery放大镜效果

    Zoomhover简易的jQuery放大镜效果
    20150927101634
    引入js代码

    <script type="text/javascript" src="js/jquery.min.js"></script><script> /* imgbox 当前图片区域 hoverbox 鼠标移入区域 l 当前图片左距离 t 当前图片上距离 x 鼠标距离X轴 y 鼠标距离Y轴 h_w 鼠标移入图片块宽度 h_h 鼠标移入图片块高度 showbox 展示大图区域*/ function Zoom(imgbox, hoverbox, l, t, x, y, h_w, h_h, showbox) { var moveX = x - l - (h_w / 2); //鼠标区域距离 var moveY = y - t - (h_h / 2); //鼠标区域距离 if (moveX < 0) { moveX = 0 } if (moveY < 0) { moveY = 0 } if (moveX > imgbox.width() - h_w) { moveX = imgbox.width() - h_w } if (moveY > imgbox.height() - h_h) { moveY = imgbox.height() - h_h } //判断鼠标使其不跑出图片框 var zoomX = showbox.width() / imgbox.width() //求图片比例 var zoomY = showbox.height() / imgbox.height() showbox.css({ left: -(moveX * zoomX), top: -(moveY * zoomY) }) hoverbox.css({ left: moveX, top: moveY }) //确定位置 } function Zoomhover(imgbox, hoverbox, showbox) { var l = imgbox.offset().left; var t = imgbox.offset().top; var w = hoverbox.width(); var h = hoverbox.height(); var time; $(".probox img,.hoverbox").mouseover(function(e) { var x = e.pageX; var y = e.pageY; $(".hoverbox,.showbox").show(); hoverbox.css("opacity", "0.3") time = setTimeout(function() { Zoom(imgbox, hoverbox, l, t, x, y, w, h, showbox) }, 1) }).mousemove(function(e) { var x = e.pageX; var y = e.pageY; time = setTimeout(function() { Zoom(imgbox, hoverbox, l, t, x, y, w, h, showbox) }, 1) }).mouseout(function() { showbox.parent().hide() hoverbox.hide(); }) } $(function() { Zoomhover($(".probox img"), $(".hoverbox"), $(".showbox img")); })</script>

    下载地址
    预览地址

  • jQuery背景图片墙聚光灯效果

    jQuery背景图片墙聚光灯效果

    jQuery背景图片墙聚光灯效果
    20150927100722
    导入js代码

    <script type="text/javascript" charset="utf-8" src='js/jquery.js'></script><script type="text/javascript" charset="utf-8"> $(window).load(function() { var spotlight = { // the opacity of the "transparent" images - change it if you like opacity: 0.2, /*the vars bellow are for width and height of the images so we can make the &lt;li&gt; same size */ imgWidth: $('.spotlightWrapper ul li').find('img').width(), imgHeight: $('.spotlightWrapper ul li').find('img').height() }; //set the width and height of the list items same as the images $('.spotlightWrapper ul li').css({ 'width': spotlight.imgWidth, 'height': spotlight.imgHeight }); //when mouse over the list item... $('.spotlightWrapper ul li').hover(function() { //...find the image inside of it and add active class to it and change opacity to 1 (no transparency) $(this).find('img').addClass('active').css({ 'opacity': 1 }); //get the other list items and change the opacity of the images inside it to the one we have set in the spotlight array $(this).siblings('li').find('img').css({ 'opacity': spotlight.opacity }); //when mouse leave... }, function() { //... find the image inside of the list item we just left and remove the active class $(this).find('img').removeClass('active'); }); //when mouse leaves the unordered list... $('.spotlightWrapper ul').bind('mouseleave', function() { //find the images and change the opacity to 1 (fully visible) $(this).find('img').css('opacity', 1); }); });</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图像菜单特效
    20150922230201
    引入js代码

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.5.1/jquery.js"></script><script type="text/javascript" src="js/jquery.easing.1.3.js"></script><script type="text/javascript"> $(function() { var $menu = $('#ei_menu > ul'), $menuItems = $menu.children('li'), $menuItemsImgWrapper = $menuItems.children('a'), $menuItemsPreview = $menuItemsImgWrapper.children('.ei_preview'), totalMenuItems = $menuItems.length, ExpandingMenu = (function() { /* @current set it to the index of the element you want to be opened by default, or -1 if you want the menu to be closed initially */ var current = -1, /* @anim if we want the default opened item to animate initialy set this to true */ anim = true, /* checks if the current value is valid - between 0 and the number of items */ validCurrent = function() { return (current >= 0 && current < totalMenuItems); }, init = function() { /* show default item if current is set to a valid index */ if (validCurrent()) configureMenu(); initEventsHandler(); }, configureMenu = function() { /* get the item for the current */ var $item = $menuItems.eq(current); /* if anim is true slide out the item */ if (anim) slideOutItem($item, true, 900, 'easeInQuint'); else { /* if not just show it */ $item.css({ width: '400px' }).find('.ei_image').css({ left: '0px', opacity: 1 }); /* decrease the opacity of the others */ $menuItems.not($item).children('.ei_preview').css({ opacity: 0.2 }); } }, initEventsHandler = function() { /* when we click an item the following can happen: 1) The item is already opened - close it! 2) The item is closed - open it! (if another one is opened, close it!) */ $menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) { var $this = $(this).parent(), idx = $this.index(); if (current === idx) { slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true); current = -1; } else { if (validCurrent() && current !== idx) slideOutItem($menuItems.eq(current), false, 250, 'jswing'); current = idx; slideOutItem($this, true, 250, 'jswing'); } return false; }); }, /* if you want to trigger the action to open a specific item */ openItem = function(idx) { $menuItemsImgWrapper.eq(idx).click(); }, /* opens or closes an item note that "mLeave" is just true when all the items close, in which case we want that all of them get opacity 1 again. "dir" tells us if we are opening or closing an item (true | false) */ slideOutItem = function($item, dir, speed, easing, mLeave) { var $ei_image = $item.find('.ei_image'), itemParam = (dir) ? { width: '400px' }: { width: '75px' }, imageParam = (dir) ? { left: '0px' }: { left: '75px' }; /* if opening, we animate the opacity of all the elements to 0.1. this is to give focus on the opened item.. */ if (dir) /* alternative: $menuItemsPreview.not($menuItemsPreview.eq(current)) .stop() .animate({opacity:0.1}, 500); */ $menuItemsPreview.stop().animate({ opacity: 0.1 }, 1000); else if (mLeave) $menuItemsPreview.stop().animate({ opacity: 1 }, 1500); /* the <li> expands or collapses */ $item.stop().animate(itemParam, speed, easing); /* the image (color) slides in or out */ $ei_image.stop().animate(imageParam, speed, easing, function() { /* if opening, we animate the opacity to 1, otherwise we reset it. */ if (dir) $ei_image.animate({ opacity: 1 }, 2000); else $ei_image.css('opacity', 0.2); }); }; return { init: init, openItem: openItem }; })(); /* call the init method of ExpandingMenu */ ExpandingMenu.init(); /* if later on you want to open / close a specific item you could do it like so: ExpandingMenu.openItem(3); // toggles item 3 (zero-based indexing) */ });</script>

    下载地址
    预览地址

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

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

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

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

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