js实现图片旋转效果

JavaScript018

js实现图片旋转效果,第1张

1、首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转。

2、然后对HTML中的内容定义一些样式，如下图所示，主要是标题以及ul的样式。

3、接下来就给图片所在的li定义宽高，如下图所示。

4、然后给图片设置过渡效果，过渡使用transition属性，如下图所示。

5、当鼠标悬停在图片上时，通过rotate给其设置变形，如下图所示，正数代表的是顺时针，负数代表的是逆时针。

6、最后运行程序，会看到如下图所示的效果，鼠标放在图片上会顺时针或者逆时针旋转。

你的代码中的第二个按钮显然和第一个按钮一样都是顺时针旋转的，我修改了一下，代码如下：

<html>

<title>按钮控制图片360度翻转效果的JS代码丨芯晴网页特效丨CsrCode.Cn</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(176, 0)

context.rotate(Math.PI*0.5)

context.drawImage(image,0,0)

}

}catch(e){}

}

}

function rotate2(image)

{

var object = image.parentNode

if(isIE){

image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")"

i=i+3

if(i>4) {i=i-4}

}

else{

try{

var canvas = document.createElement('canvas')

if(canvas.getContext("2d")) {

object.replaceChild(canvas,image)

var context = canvas.getContext("2d")

context.translate(176, 0)

context.rotate2(Math.PI*0.5)

context.drawImage(image,0,0)

}

}catch(e){}

}

}

</script>

<input type="button" value="顺时针转" onClick="rotate(document.getElementById('myimg'))" />

<input type="button" value="逆时针转" onClick="rotate2(document.getElementById('myimg'))" /><br />

<img id="myimg" src="http://www.CsrCode.cn/images/m03.jpg"/>

</body>

</html>

//关键就是这几句：

//image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")"

//i=i+3

// if(i>4) {i=i-4}

//i为1 2 3 4时分别对应着图像的角度为90 180 270 360 ,所以你要让I每次加3，每次调整270°，也就是逆时针的90°了

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