1. 关于要怎么点击一张图片实现有反转效果，点击正面反转成另一张图片，用javascript 和css应
<html>
<title>js实现按钮控制图片90度翻转特效</title>
<body>
<script language="javascript">
var isIE = (document.uniqueID)?1:0;
var i=1;
function rotate(image)
{
var object = image.parentNode;
if(isIE){
image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")";
i++;
if(i>4) {i=1};
}
else{
try{
var canvas = document.createElement('canvas');
if(canvas.getContext("2d")) {
object.replaceChild(canvas,image);
var context = canvas.getContext("2d");
context.translate(300, 0);
context.rotate(Math.PI*0.5);
context.drawImage(image,0,0);
}
}catch(e){}
}
}
</script>
<input type="button" value="点击旋转图片" onclick="rotate(document.getElementById('myimg'))" /><br />
<img id="myimg" src="1.jpg"/>
<!-- 图片路径你自己替换 -->
</body>
</html>
2. javascript用鼠标实现图片旋转
下面这段代码放在最底槐腔并部可以看到效果,其他自己改吧
<script language='javascript'>
R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}
setInterval('圆伍A()'铅迹,5); void(0);
</script>
3. 给定一个 n × n 的二维矩阵表示一个图像, 将图像顺时针旋转 90 度js实现
题目:
给定一个 n × n 的二维矩阵表示一个顷高旁图像。念唤
将图像顺时针旋转 90 度。
说明：
你必须在[原地]旋转雀橡图像，这意味着你需要直接修改输入的二维矩阵。请不要使用另一个矩阵来旋转图像。
刚开始我大概看了下，就是把矩阵中第n列反序后作为n行，那这就很简单了，我是这么写的：
最后返回的矩阵排序是正确的，不过最后去校验的时候发现是在原来的矩阵里调整，那也简单，我把久的矩阵的值改成和新矩阵相同就可以了：
我这种解法只是发现了这个规律，如果不让用新矩阵作为桥梁，不知还会有那些解法
4. js设置图片随机旋转角度
代码应该是：
imgcss[i].style.transform="rotate(" + j + ")";
首先 j是变量 双引号里面套单引号 还是字符串， 不是变量
其次 字符串拼接要写加号
5. JS，图片旋转设定
SORRY 看错内容了~ 这里有一个~ 你可以看下~网页链接
6. 求教js实现图片的旋转
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Test</title>
<script>
varcurrent=0;
functiontranImg(trun){
varimgObj=document.getElementById('imgTest');
current=(current+trun)%360;
imgObj.style.transform='rotate('+current+'deg)';
}
</script>
</head>
<body>
<imgid="imgTest"src="https://timgsa..com/timg?image&quality=80&size=b9999_10000&sec=1487259339574&di=&imgtype=0&src=http%3A%2F%2Fc.hiphotos..com%2Fimage%2Fpic%2Fitem%.jpg"target="_blank"class="-highlight">
<br>
<inputtype="button"id="leftTran"onclick="tranImg(-90)"value="左">
<inputtype="button"id="rightTran"onclick="tranImg(90)"value="右">
</body>
</html>
7. 用Javascript使网页图片产生旋转效果
Rotation滤镜可以使图片产生旋转效果 注意必须是IE 及IE 才能看到！
<><head><meta equiv= Content Type content= text/; charset=gb ><style>body img{border: gold ridge}</style>//给图片加上边框的CS代码<title>用Javascript使网页图片产生旋转效果</title><script language= javascript >var i= ;function playImg(){image style filter= progid:DXImageTransform Microsoft BasicImage( Rotation= +i+ ) ;i++;if (i> ){i= }; mytimeout=setTimeout( playImg() );毁纳 }</script>//以上是使图片实现四个方向转换的代码</head> <body bgcolor= #FFFFFF text= # onload= playImg() >//修改body为加载就显示效果<img src= /img/ jpg width= height= name= image ></body></body></>
<><head><meta <fp class='fp-dciy0'></fp>equiv=<fp class='fp-amv49'></fp>Content<fp class='fp-f5w9g'></fp>Type<fp class='fp-w9plq'></fp> content=<fp class='fp-amv49'></fp>text/; charset=gb<fp class='fp-ehg6a'></fp><fp class='fp-n7ug1'></fp><fp class='fp-btu1b'></fp><fp class='fp-iotbu'></fp><fp class='fp-xx6ow'></fp>><style>body img{border:<fp class='fp-n7ug1'></fp> gold ridge}</style> <title>用Javascript使网页图片产生旋转效果</title><script language=<fp class='fp-xx6ow'></fp>javascript<fp class='fp-mjedv'></fp>>var i=<fp class='fp-hok65'></fp>;function playImg(){image<fp class='fp-dtz44'></fp>style<fp class='fp-jc9e0'></fp>filter=<fp class='fp-w9plq'></fp>progid:DXImageTransform<fp class='fp-koyen'></fp>Microsoft<fp class='fp-gcw6i'></fp>BasicImage( Rotation=<fp class='fp-mjedv'></fp>+i+<fp class='fp-mjedv'></fp>)<fp class='fp-xx6ow'></fp>;i++;if (i><fp class='fp-fof3c'></fp>){i=<fp class='fp-t2lmv'></fp>}; mytimeout=setTimeout(<fp class='fp-w9plq'></fp>playImg()<fp class='fp-xx6ow'></fp><fp class='fp-kvp60'></fp><fp class='fp-ywetk'></fp><fp class='fp-1rrrx'></fp><fp class='fp-7y9ya'></fp><fp class='fp-ylmr2'></fp>); }</script></head> <body bgcolor=<fp class='fp-w9plq'></fp>#FFFFFF<fp class='fp-xx6ow'></fp> text=<fp class='fp-xx6ow'></fp>#<fp class='fp-ylmr2'>败缺</fp><fp class='fp-4gdww'></fp><fp class='fp-4gdww'></fp><纤枯没fp class='fp-4gdww'></fp><fp class='fp-hok65'></fp><fp class='fp-ylmr2'></fp><fp class='fp-amv49'></fp> onload=<fp class='fp-w9plq'></fp>playImg()<fp class='fp-xx6ow'></fp>><img src=<fp class='fp-xx6ow'></fp>/img/<fp class='fp-ehg6a'></fp><fp class='fp-ylmr2'></fp><fp class='fp-4gdww'></fp><fp class='fp-fof3c'></fp><fp class='fp-7y9ya'></fp><fp class='fp-uq1o1'></fp><fp class='fp-n7ug1'></fp><fp class='fp-hok65'></fp><fp class='fp-ywetk'></fp><fp class='fp-gcw6i'></fp>jpg<fp class='fp-amv49'></fp> width=<fp class='fp-xx6ow'></fp><fp class='fp-btu1b'></fp><fp class='fp-h0c8o'></fp><fp class='fp-4gdww'></fp><fp class='fp-w9plq'></fp> height=<fp class='fp-amv49'></fp><fp class='fp-ywetk'></fp><fp class='fp-ehg6a'></fp><fp class='fp-ylmr2'></fp><fp class='fp-mjedv'></fp> name=<fp class='fp-amv49'></fp>image<fp class='fp-mjedv'></fp>></body></body></>
作者 lishixin/Article/program/Java/Javascript/201311/25419
8. javascript如何实现图片任意角度的旋转
可以用JAvascript改变这个图片的css来旋转他：
这个是css代码：
img {
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}
在JAvascript里面可以先获取到这张图片 设置图片id = "box"
var img = document.getElementById('box'); 获取到这个图片并用变量记住
img.style.transform = "rotate(90deg)"; 改变这个图片的css，旋转90度
完毕！！！
9. jquery实现每点击一次旋转90度
<!DOCTYPE html PUBLIC "-/圆亮桥/W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS 旋转函数，兼容各个浏览器</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>
<div>JS 旋转函数，兼容各个浏览器</div>
<div class="list">
<div class="block">
<div>
<div class="rotate" id="rotate">
<div class="txt">
我的角度是 <span id="rotate_num"></span>°
</div>
<img src="http://www.fjsen.com/images/attachement/jpg/site2/20130513/001b77b4c2f212fa86172f.jpg" />
</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>