jQuery图片翻转特效代码-插件特效-ICode联盟

相关js代码$(document).ready(function() { //Initiliaze itemShow = 8; indexedItemShow = itemShow - 1 itemList = $('#portfolio-item'); itemWrapper = $('#portfolio'); rotation = ['flipped-vertical-bottom', 'flipped-vertical-top', 'flipped-horizontal-left', 'flipped-horizontal-right']; navigation = $('#navigation a'); //Populate items for( var i = 0; i < itemShow; i++ ) { itemImage = itemList.children('li:eq(' + i + ')').children('img'); itemSrc = itemImage.attr('src'); itemAlt = itemImage.attr('alt'); item = '

' + itemAlt + '

'; itemWrapper.append(item); } navigation.on('click', function(e) { e.preventDefault(); navigation.removeClass('selected'); $(this).addClass('selected'); page = $(this).attr('data-page'); for( var i = 0; i <= indexedItemShow; i++ ) { random = Math.floor( Math.random() * ( 3 - 0 + 1 ) ); animation = rotation[random]; item = itemWrapper.children('div:eq(' + i + ')'); item.addClass('animated ' + animation); window.setTimeout(function (index) { return function () { indexReal = (page == 1) ? index : (index + (page - 1)) ; itemHost = indexReal + (indexedItemShow * (page - 1)); itemImage = itemList.children('li:eq(' + itemHost + ')').children('img'); itemSrc = itemImage.attr('src'); itemAlt = itemImage.attr('alt'); itemCurrent = itemWrapper.children('div:eq(' + index + ')'); itemCurrent.css('background', 'url(' + itemSrc + ')'); itemCurrent.children('span').text(itemAlt); }; } (i), 500); item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() { $(this).removeClass(); }); } });});

jQuery图片翻转特效代码

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

未经允许不得转载： ICode联盟 » 插件特效 » jQuery图片翻转特效代码

猜你喜欢更多»

项目推荐更多»

[开源]基于 Vue、Datav、Echart 框架的数据大屏项目，可自由替换 (1)

[开源]一套企业级微服务框架、微服务能力开放平台，功能强大 (0)

[开源]免费开源的流程设计器，开箱即用，助力流程开发使用更简单 (0)

[开源]MIT开源协议，前后端分离、美观大方后台通配权限管理系统 (1)

[开源]一款终端仿真软件，支持多种后端协议，无依赖跨平台使用 (0)