jquery翻转,jq 旋转

jquery如何实现字符翻转镜像效果？

直接使用css的transform即可

即

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

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

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

不兼容低版本IE

相关问答

Q1: jquery实现每点击一次旋转90度

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

titleJS 旋转函数，兼容各个浏览器/title

script id="jscode"

function hy_rotate(obj, rotate){

if(obj){

function rotate_set_style(obj, key, value){

obj.style[key] = value;

}

function rotate_float(n, b){

b = isNaN(parseInt(b)) ? -1 : parseInt(b);

return isNaN(parseFloat(n)) ? 0 : (b == 0) ? parseInt(parseFloat(n)) : (b 0) ? parseFloat(parseFloat(n).toString().replace((new RegExp('^(\\d+)\\.(\\d{'+b+'})\\d*$')), '$1.$2')) : parseFloat(n);

}

rotate = rotate % 360;

if(rotate 0){

rotate = 360 + rotate

}

rotate = rotate_float(rotate, 2);

var rpi = rotate * Math.PI / 180, c = Math.cos(rpi), s = Math.sin(rpi), oh = obj.offsetHeight, ow = obj.offsetWidth, pw = rotate_float((oh * Math.abs(s) + ow * Math.abs(c)), 2), ph = rotate_float((oh * Math.abs(c) + ow * Math.abs(s)), 2), tw = (rotate % 180 == 0) ? 0 : ((pw - ow) / 2), th = (rotate % 180 == 0) ? 0 : ((ph - oh) / 2), css3 = 'translate(' + tw + 'px, ' + th + 'px) rotate(' + rotate + 'deg)', css3key = '', dbstyle = document.body.style, css3keys = ['transform', '-moz-transform', '-webkit-transform', '-o-transform', '-ms-transform'];

for(var i in css3keys){

if(css3keys[i] in dbstyle){

css3key = css3keys[i];

}

}

if(css3key == ''){

rotate_set_style(obj, 'filter', 'progid:DXImageTransform.Microsoft.Matrix(M11=' + c + ', M12=' + (-s) + ', M21=' + s + ', M22=' + c + ', sizingMethod=\'auto expand\')');

}else{

obj.parentNode.style.width = pw + 'px';

obj.parentNode.style.height = ph + 'px';

rotate_set_style(obj, css3key, css3);

}

}

}

/script

style

.list{clear:both; padding:20px;}

.block{background:#FF99FF; padding:5px; float:left;}

.rotate{background:#FF0000; width:200px; padding:5px;}

.txt{background:#3366FF; padding:10px; color:#FFFFFF; font-size:12px; margin-bottom:10px;}

.code{border:#3333FF dotted 1px; padding:10px; background:#FFCCFF; clear:both;}

/style

/head

body

divJS 旋转函数，兼容各个浏览器/div

div class="list"

div class="block"

div

div class="rotate" id="rotate"

div class="txt"

我的角度是 span id="rotate_num"/span°

/div

img src="" /

/div

/div

/div

/div

script

function $id(id){

return document.getElementById(id);

}

var rrr = 0;

var sss = 0;

var iii = 0;

var aaa = $id('rotate');

var bbb = $id('rotate_num');

function zzz(){

rrr = rrr+1;

bbb.innerHTML = rrr;

hy_rotate(aaa, rrr);

}

aaa.onclick = function(){

if(sss == 0){

iii = setInterval(zzz, 20);;

sss = 1;

}else{

clearInterval(iii);

sss = 0;

}

}

/script

/body

/html

Q2: 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 = thisOrder; i = 0; i--) {

//重排项位置

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);

});

});

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

Q3: 如何用jquery实现360度无限旋转

要旋转的话直接用CSS就可以搞定啊~

目标{animation: 2s  rotate linear infinite}

@keyframes rotate {

0%{}

100%{transform:rotate(360deg);}

}