您好,欢迎来到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背景图片墙聚光灯效果
    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图像菜单特效
    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模拟CSS3图片放大效果对比

    jQuery模拟CSS3图片放大效果对比

    jQuery模拟CSS3图片放大效果对比
    20150913105638
    HTML结构代码

    <p align="center">ZoomIn Jquery+CSS2 </p> <div id="zoom0"> <div id="pic1"><img src="images/test1.jpg" /></div> <div id="pic2"><img src="images/test2.jpg" /></div> <div id="pic3"><img src="images/test0.jpg" /></div> </div><p align="center">ZoomIn CSS3</p> <div id="zoom1"> <div id="pic1"><img src="images/test1.jpg" /></div> <div id="pic2"><img src="images/test2.jpg" /></div> <div id="pic3"><img src="images/test0.jpg" /></div> </div>

    导入jQuery代码

    <script src="jquery-1.6.1.min.js"></script><script language="javascript"><!--//直接加载:hover 图片放大过度不流畅$(document).ready(function(){ $("#zoom0 img").hover(function(){$(this).addClass("hover")}, function(){$(this).removeClass("hover")} ) })//--></script>

    下载地址
    预览地址

  • jQuery鼠标响应式手风琴特效

    jQuery鼠标响应式手风琴特效

    jQuery鼠标响应式手风琴特效
    20150416225448
    部分 jQuery代码

    <script> $(document).ready(function() {}) var Main = Main || {}; jQuery(window).load(function() { window.responsiveFlag = jQuery('#responsiveFlag').css('display'); Main.gallery = new Gallery(); jQuery(window).resize(function() { Main.gallery.update() }) }); function Gallery() { var self = this, container = jQuery('.flexslider'), clone = container.clone(false); this.init = function() { if (responsiveFlag == 'block') { var slides = container.find('.slides'); slides.kwicks({ max: 500, spacing: 0 }).find('li > a').click(function() { return false }) } } this.update = function() { var currentState = jQuery('#responsiveFlag').css('display'); if (responsiveFlag != currentState) { responsiveFlag = currentState; container.replaceWith(clone); container = clone; clone = container.clone(false); this.init() } } this.init() }</script>

    下载地址
    预览地址

  • jQuery鼠标悬停自动替换大图特效

    jQuery鼠标悬停自动替换大图特效

    jQuery鼠标悬停自动替换大图特效
    20150416221813
    部分jQuery代码

    <script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript"> $(document).ready(function() { // 判断img轮转,实现a跳转 // 推荐品牌滑动翻转效果 brandPicTurn(); }); function brandPicTurn() { $(".brand_detail").hide(); $(".brand_item").hover(function() { $(this).children(".brand_name").hide(); $(this).children(".brand_detail").show(); }, function() { $(this).children(".brand_detail").hide(); $(this).children(".brand_name").show(); }); }</script>

    下载地址
    预览地址

  • 网站jQuery产品图片展示切换特效

    网站jQuery产品图片展示切换特效

    网站jQuery产品图片展示切换特效
    20150409155607
    部分jquery代码

    $('.photo_ctrl.clear ul li a').each(function() { $(this).click(function() { var idname = $(this).attr('id'); clicknow = idname; var idl = $(this).attr('name') - 1; //给箭头赋值左 if (idl == 0) { $("#go_per").fadeOut(0); } else { $("#go_per").fadeIn(0); } var idr = parseInt($(this).attr('name')) + 1; //给箭头赋值右 if (idr == photonum + 1) { $("#go_nex").fadeOut(0); } else { $("#go_nex").fadeIn(0); } $("#go_per").attr('title', idl); $("#go_nex").attr('title', idr); for (i = 1; i <= photonum; i++) { $("#p_" + i).fadeOut(0); $("#_" + i + " " + "span").removeClass("nomask"); $("#l_" + i).removeClass("photo_border2"); } $("#p" + idname).fadeIn(300); $("#" + idname + " " + "span").addClass("nomask"); $("#l" + idname).addClass("photo_border2"); });});

    下载地址
    预览地址

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

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

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

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

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