当前位置:首页 > 代码 > 正文

鼠标放在图片旋转效果代码(css3鼠标经过图片旋转360°)

admin 发布:2022-12-19 23:47 176


本篇文章给大家谈谈鼠标放在图片旋转效果代码,以及css3鼠标经过图片旋转360°对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

请问鼠标滑过背景图片,图片围绕圆心旋转的效果怎么实现?css3也可以..

用css3的transition,很容易实现hover时旋转效果的:

style

img{width:50px;height:50px;display:block;-webkit-transition:0.4s linear;transition:0.4s ease-in;}

img:hover{-webkit-transform:rotate(360deg);transform:rotate(360deg);}

/style

div

img src=""

怎么使图片,当鼠标经过图片旋转,HTML.

这个可以通过纯样式实现

首先是事件:hover

效果:旋转(transform:rotate(90deg);)PS:90deg=90°

那我就举个简单的例子

img src="你的图片" class='pic'

style type='css/text'

.pic:hover{

transform:rotate(90deg);

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

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

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

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

}

/style

那位高手可以给我在vb中用鼠标释放,缩放,旋转图片的代码,代码正确,分数送上。

第一部分:图像的缩小和放大(使用Image控件):

Dim X As Integer

Private Sub Command3_Click() '退出

End

End Sub

Private Sub Form_Load()

X = 1

End Sub

Private Sub Image1_Click()

If X = 1 Then '放大

With Image1

.Width = .Width * 2: .Height = .Height * 2

.Left = .Left: .Top = .Top

End With

X = X + 1

Else '缩小

With Image1

.Width = .Width / 2: .Height = .Height / 2

.Left = .Left: .Top = .Top

End With

X = 1

End If

End Sub

第二部分图像旋转90度(使用PictureBox控件):

Option Explicit

Const PI = 3.1415

Dim XX As Integer

Private Sub Form_Load()

TP1.ScaleMode = 3

TP2.ScaleMode = 3

Form1.ScaleMode = 3

XX = 1

End Sub

Private Sub TP1_Click()

If XX = 1 Then

Dim X As Integer, Y As Integer '点在TP1中的坐标

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

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

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

Dim angle As Double '旋转的角度

Dim radian As Double '旋转的弧度

angle = 90 '设定旋转的角度,可以修改,如果修改为负值,为顺时针旋转,也可以使用文本框

radian = angle * PI / 180 '获得旋转的弧度

TP2.Cls '清除TP2中的图片

For X = 0 To TP1.Width

For Y = 0 To TP1.Height

X1 = X - TP1.Width \ 2

Y1 = Y - TP1.Height \ 2

'将坐标轴原点移动到TP1的中心后原来坐标为(x,y)的点的新坐标为(X1,Y1)

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

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

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

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

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

TP2.PSet (X3, Y3), TP1.Point(X, Y) '将TP1中(x,y)点复制到TP2的(X3,Y3)点

'TP1的Point方法是指定各点的颜色,TP2的PSet方法是设置各个点的颜色

End If

Next Y

Next X

XX = XX + 1

Else

TP2.Cls '清除TP2中的图片

XX = 1

End If

End Sub

求相关代码 鼠标移上去 圆形图片就能够旋转180度的代码

把那个移动的图片做成影片剪辑,然后放到场景里面,将它的实例名称改为af ,然后再打开动作面板,输入下面的代码: onenterframe=function(){ _root.af.onMouseMove=function(){ this.stop(); } _root.af.onMouseOut=function(){ this.play(); } }

js实现图片旋转效果

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

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

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

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

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

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

鼠标放在图片旋转效果代码的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于css3鼠标经过图片旋转360°、鼠标放在图片旋转效果代码的信息别忘了在本站进行查找喔。

版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;

本文地址:http://ahzz.com.cn/post/30923.html


取消回复欢迎 发表评论:

分享到

温馨提示

下载成功了么?或者链接失效了?

联系我们反馈

立即下载