jquery 图片翻转原理？

大致原理如下:

//初始化界面

var itemList, item, className, thisItem, newOrder, itemDesc, desc

itemList = $('#itemlist')

item = itemList.children('img')

itemDesc = $('#itemdescription')

desc = itemDesc.children('span')

//为每个项目添加类名称

item.each(function(index) {

className = 'item-' + index

$(this).addClass(className).attr('data-order', index)

})

//显示第一个项目描述

desc.filter(':first-child').fadeIn()

//在点击时激活动画

item.on('click', function() {

thisItem = $(this)

thisOrder = parseInt(thisItem.attr('data-order')) - 1

thisItem.addClass('show')

//重排项的位置

item.on('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function() {

thisItem.removeClass().addClass('item-0').attr('data-order', '0')

//显示选定的项目描述

desc.hide()

desc.filter('[data-for=' + thisItem.attr('id') + ']' ).fadeIn('fast')

})

//兄弟项目向后移动

window.setTimeout(function () {

for(var i = thisOrderi >= 0i--) {

//重排项位置

movedItem = item.filter('[data-order=' + i + ']')

newOrder = parseInt(movedItem.attr('data-order')) + 1

className = 'item-' + newOrder

//动态过渡

movedItem.removeClass().addClass('transition ' + className).attr('data-order', newOrder)

//删除他们的过渡

item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() {

item.removeClass('transition')

})

}

}, 500)

})

})

如果你希望它更智能，那么你就需要多下点功夫了。其实，道理都是一样的，只不过做成什么样的效果更好看而已。

直接使用css的transform即可

即

$Target.css('transform','scaleX(-1)')

为了兼容旧版本的webkit浏览器可以

$Target.css('webkitTransform','scaleX(-1)')

不兼容低版本IE

---