用Javascript使网页图片产生旋转效果_IT百科

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

作者 lishixinzhi/Article/program/Java/Javascript/201311/25419

css3 的transform属性允许我们旋转、缩放和移动元素。可以通过给它传递一个 rotate(度数) 值来旋转一个元素，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点为元素的中心。

CSS代码如下：

.rotate{

-ms-transform:rotate(90deg)/* IE 9 */

-moz-transform:rotate(90deg)/* Firefox */

-webkit-transform:rotate(90deg)/* Safari and Chrome */

-o-transform:rotate(90deg)/* Opera */

}

浏览器支持：Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+

下面是用css旋转图片，用js换className。

换图片地址后试试。

<html>

<head>

<style>

.css-turn-0{

-moz-transform:matrix(1,0,0,1,0,0)

-o-transform:matrix(1,0,0,1,0,0)

-webkit-transform:matrix(1,0,0,1,0,0)

transform:matrix(1,0,0,1,0,0)

-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')"

}

.css-turn-270{

-moz-transform:matrix(0,-1,1,0,0,0)

-o-transform:matrix(0,-1,1,0,0,0)

-webkit-transform:matrix(0,-1,1,0,0,0)

transform:matrix(0,-1,1,0,0,0)

-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand')"

}

.css-turn-180{

-moz-transform:matrix(-1,0,0,-1,0,0)

-o-transform:matrix(-1,0,0,-1,0,0)

-webkit-transform:matrix(-1,0,0,-1,0,0)

transform:matrix(-1,0,0,-1,0,0)

-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, SizingMethod='auto expand')"

}

.css-turn-90{

-moz-transform:matrix(0,1,-1,0,0,0)

-o-transform:matrix(0,1,-1,0,0,0)

-webkit-transform:matrix(0,1,-1,0,0,0)

transform:matrix(0,1,-1,0,0,0)

-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=-1, M21=1, M22=0, SizingMethod='auto expand')"

}

</style>

</head>

<body>

var img = document.getElementsByTagName('img')[0],

i = 1,

css = ['css-turn-0', 'css-turn-90', 'css-turn-180', 'css-turn-270']

img.onclick = function () {

this.className = css[i++ % 4]

}

</script>

</body>

</html>

转自 zhaoapk 的回答。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11651251.html

用Javascript使网页图片产生旋转效果

发表评论

评论列表（0条）