图片旋转切换效果代码（照片旋转代码）

本篇文章给大家谈谈图片旋转切换效果代码，以及照片旋转代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、求简单的图片切换代码
• 2、哪位帮忙解释一下图片九十度旋转的代码啊，怎么让它可以逆时针旋转，下面是代码
• 3、HTML中如何做图片切换效果，跪求代码
• 4、js实现图片旋转效果
• 5、html图片旋转代码
• 6、请指教使用vb对图片进行旋转的代码

求简单的图片切换代码

第一种：

把如下代码加入body区域中

body onclick=Clicked()

SCRIPT

!--

transeffect = 0;

theeffects = new Array(24);

theeffects[0] = “盒状收缩“;

theeffects[1] = “盒状向外“;

theeffects[2] = “圆形收缩“;

theeffects[3] = “圆形向内“;

theeffects[4] = “从下向上“;

theeffects[5] = “从上向下“;

theeffects[6] = “从左向右“;

theeffects[7] = “从右向左“;

theeffects[8] = “百页窗形向右“;

theeffects[9] = “百页窗形向下“;

theeffects[10] = “棋盘形交叉向右“;

theeffects[11] = “棋盘形交叉向下“;

theeffects[12] = “随意溶解形“;

theeffects[13] = “左右向内“;

theeffects[14] = “左右向外“;

theeffects[15] = “上下向内“;

theeffects[16] = “上下向外“;

theeffects[17] = “条纹状向左下“;

theeffects[18] = “条纹状向左上“;

theeffects[19] = “条纹状向右下“;

theeffects[20] = “条纹状向右上“;

theeffects[21] = “溶解水平状“;

theeffects[22] = “溶解上下状“;

theeffects[23] = “随着溶解“;

current_image = “image1“;

function Clicked() {

var the_image, the_other;

text2.style.visiblity=“hidden“;

if (image1.style.visibility==“inherit“) {

the_image = image2;

the_other = image1;

}

else {

the_image = image1;

the_other = image2;

}

the_other.style.visibility=“hidden“;

the_image.filters.item(0).Apply();

the_image.filters.item(0).Transition = transeffect;

the_image.filters.item(0).Play(2.0);

the_image.style.visibility=“inherit“;

text2.innerText=theeffects[transeffect];

transeffect++;

if (transeffect == 24)

transeffect = 0;

text2.style.visibility=“visible“;

}

//--

/SCRIPT

DIV id=image

DIV id=text1/DIVIMG id=image1

src=“Upfiles/200422684962.gif“

style=“FILTER: revealTrans(Duration=3.0,Transition=1); VISIBILITY: hidden“ IMG id=image2 src=“Upfiles/200422684962.gif“

style=“FILTER: revealTrans(Duration=3.0,Transition=1); VISIBILITY: hidden“ /DIV

DIV id=text2/DIV

第二步：把body中的内容改为：

body bgcolor=“#fef4d9“ onclick=Clicked()

over feboy

第二种：

第一步、把下面这段代码插入到页面的head与/head之间：

script language=javascript

isns = navigator.appName == "Netscape";

function ztstr(id,picurl,linkurl)

{

this.id=id

this.picurl=picurl

this.linkurl=linkurl

}

zhuanti=new Array()

imgcount=1;

frequency=10*1000;//30秒

//在这里修改图片的路径和链接

zhuanti[1]=new ztstr('1','','')

zhuanti[2]=new ztstr('2','','')

zhuanti[3]=new ztstr('3','','')

zhuanti[4]=new ztstr('4','','')

imgcount=zhuanti.length-1

for(i=1;i=imgcount;i++)

{

eval_r("img"+i+"=new Image()")

eval_r("img"+i+".src=zhuanti["+i+"].picurl")

}

nn=1

var rand1 = 0;

var useRand = 0;

function swapPic() {

var imgnum = zhuanti.length - 1;

do {

var randnum = Math.random();

rand1 = Math.round((imgnum - 1) * randnum) + 1;

} while (rand1 == useRand);

useRand = rand1;

// alert(useRand);

nn=useRand;

change_img();

}

function change_img()

{

eval_r('document.pic.src=img'+nn+'.src');

nn++;

if(nnimgcount) nn=1

if(!isns)

{

pic.filters.item(0).apply()

pic.style.visibility='visible'

pic.filters.item(0).play()

setTimeout("pic.style.visibility='hidden'",frequency);

}

else

document.pic.visibility='visible'

tt=setTimeout('change_img()',frequency)

}

function pictarget()

{

tt=nn-1

if(tt1) tt=imgcount

cururl=zhuanti[tt].linkurl

window.open(cururl);

}

function ini()

{

if(!isns)

{

spacewidth=Math.round((divmask.offsetWidth-770)/2)

dmwidth=770+spacewidth

dmheight=divmask.offsetHeight

totalstep=50

timeout=50

dmstepw=Math.round(770/totalstep)

dmsteph=Math.round(dmheight/totalstep)

setTimeout('hidimg()',3000)

}

else swapPic()

}

function hidimg()

{

dmwidth-=dmstepw

dmheight-=dmsteph

eval_r('divmask.style.clip="rect(0,'+dmwidth+','+dmheight+',0)"')

hdrun=setTimeout('hidimg()',timeout)

if(dmwidth=spacewidthdmheight=0)

{

divmask.style.visibility='hidden'

clearTimeout(hdrun)

swapPic()

}

}

/script

第二步、调用定义好的javascript函数，在body里加上以下代码：

body onload=swapPic()

第三步、在页面中插入图片和链接：

a href=javascript :void(null) onclick='javascript :pictarget();return false;'img src="" width=468 height=60 border=0 name=pic style="visibility:hidden;filter:revealtrans(duration=2.0,transition=12)"/a

好，到这里就大功告成了。另外，试试改变transition的数值，可以得到不同的转换效果哟~~

哪位帮忙解释一下图片九十度旋转的代码啊，怎么让它可以逆时针旋转，下面是代码

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

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(i4) {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(i4) {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=""/

/body

/html

//关键就是这几句：

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

//i=i+3;

// if(i4) {i=i-4};

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

HTML中如何做图片切换效果，跪求代码

1、首先输入代码：

div class="wrapper"

div id="focus"

ul

lia href="" target="_blank"img src="img/01.jpg" alt="QQ商城焦点图效果下载" //a/li

2、然后输入代码：

lia href="" target="_blank"img src="img/02.jpg" alt="QQ商城焦点图效果教程" //a/li

lia href="" target="_blank"img src="img/03.jpg" alt="jquery商城焦点图效果" //a/li

lia href="" target="_blank"img src="img/04.jpg" alt="jquery商城焦点图代码" //a/li

3、然后再输入代码：

lia href="" target="_blank"img src="img/05.jpg" alt="jquery商城焦点图源码" //a/li

/ul

/div

/div!-- wrapper end --

/body

4、然后就完成了。

js实现图片旋转效果

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

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

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

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

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

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

html图片旋转代码

你可以把图片放在一个div里面，然后给这个div加上一个transform:rotate(30deg)的样式。这个样式可以让div旋转，里面的图片自然也就跟着旋转了。30是旋转角度，你可以随便改。

请指教使用vb对图片进行旋转的代码

Const Pi = 3.1415926 '常量声明

Private Sub Command1_Click()

Dim x As Integer, y As Integer '点在Picture1中的坐标

Dim X1 As Integer, Y1 As Integer '过渡坐标

Dim X2 As Double, Y2 As Double '过渡坐标

Dim X3 As Double, Y3 As Double '点经过旋转后在Picture2中的坐标

Dim A As Double '旋转的角度

Dim R As Double '旋转的弧度

A = Text1.Text '获得旋转的角度

R = A * Pi / 180 '获得旋转的弧度

Picture2.Cls

For x = 0 To Picture1.Width

For y = 0 To Picture1.Height

X1 = x - Picture1.Width \ 2

Y1 = y - Picture1.Height \ 2 '将坐标轴原点移动到Picture1的中心后原来坐标为(x,y)的点的新坐标为(X1,Y1)

X2 = X1 * Cos(R) + Y1 * Sin(R) '获得在更改坐标原点后旋转后该点的X坐标

Y2 = Y1 * Cos(R) - X1 * Sin(R) '获得在更改坐标原点后旋转后该点的Y坐标

X3 = X2 + Picture1.Width \ 2 '获得恢复坐标原点后旋转后的X坐标

Y3 = Y2 + Picture1.Height \ 2 '获得恢复坐标原点后旋转后的Y坐标

If X3 0 And X3 Picture2.Width - 1 And Y3 0 And Y3 Picture2.Height - 1 Then

Picture2.PSet (X3, Y3), Picture1.Point(x, y) '将Picture1中(x,y)点复制到Picture2的(X3,Y3)点

End If

Next y

Next x

End Sub

关于图片旋转切换效果代码和照片旋转代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。