javascript|JavaScript实现图片旋转构成3D圆环代码
代码简介：
很炫的图片展示特效，由一组图片构成一个3D的圆环状，并自动旋转，鼠标放到某一图片上会自动停止，JavaScript 的功能真够强大，你是不是后悔没有学好JS呢？
代码内容：
文章图片
文章图片
View Code
<
html
xmlns
="www.w3.org/1999/xhtml"
>
<
head
>
<
title
>
JavaScript实现图片旋转构成3D圆环代码 - www.webdm.cn
<
meta
http-equiv
="content-Type"
content
="text/html;
charset=gb2312"
>
<
style
type
="text/css"
>
body
{
background
:
black
;
color
:
white
;
line-height
:
29px
;
}
span
{
border
:
1px solid gray
;
background
:
#333
;
padding
:
4px
;
font-weight
:
bold
;
}
<
script
language
="javascript"
>
window.onload
=
function
(){
var
rt
=
new
imgRound(
"
imgContainer
"
,
120
,
90
,
300
,
80
,
230
,
0.01
);
setInterval(
function
(){rt.roundMove()},
20
)
}
function
imgRound(id,w,h,x,y,r,dv,rh,ah){
if
(ah
==
undefined) ah
=
1
;
if
(rh
==
undefined) rh
=
10
;
var
dv
=
dv
*
ah;
//
旋转速度
var
pi
=
3.1415926575
;
var
d
=
pi
/
2;
var
pd
=
Math.asin(w
/
2
/
r);
var
smove
=
true
;
var
imgArr
=
new
Array();
var
objectId
=
id;
var
o
=
document.getElementById(objectId);
o.style.position
=
"
relative
"
;
var
arrimg
=
o.getElementsByTagName(
"
img
"
);
var
pn
=
arrimg.length;
//
图片数量
var
ed
=
pi
*
2
/
pn;
for
(n
=
0
;
n
<
arrimg.length;
n
++
){
var
lk
=
arrimg[n].getAttribute(
"
link
"
);
if
(lk
!=
null
) arrimg[n].setAttribute(
"
title
"
,lk)
arrimg[n].onclick
=
function
(){
if
(
this
.getAttribute(
"
link
"
)
!=
null
){
if
(
this
.getAttribute(
"
target
"
)
!=
"
_blank
"
) window.location
=
(
this
.getAttribute(
"
link
"
))
else
window.open(
this
.getAttribute(
"
link
"
))
}
}
arrimg[n].onmouseout
=
function
(){smove
=
true
;
}
arrimg[n].onmouseover
=
function
(){smove
=
false
;
}
arrimg[n].style.position
=
"
absolute
"
;
imgArr.push(arrimg[n]);
}
this
.roundMove
=
function
(){
for
(n
=
0
;
n
<=
pn
-
1
;
n
++
){
var
o
=
imgArr[n];
var
ta
=
Math.sin(d
+
ed
*
n),strFilter;
if
(ta
<
0
) o.style.left
=
Math.cos(d
+
ed
*
n
-
pd)
*
r
+
x
+
"
px
"
;
else
o.style.left
=
Math.cos(d
+
ed
*
n
+
pd)
*
r
+
x
+
"
px
"
;
o.style.top
=
ta
*
rh
+
rh
+
y
+
"
px
"
;
var
zoom
=
Math.abs(Math.sin((d
+
ed
*
n)
/
2+pi
/
4
))
*
0.5
+
0.5
;
o.style.width
=
Math.abs(Math.cos(d
+
ed
*
n
+
pd)
-
Math.cos(d
+
ed
*
n
-
pd))
*
zoom
*
r
+
"
px
"
;
o.style.height
=
zoom
*
h
+
"
px
"
;
if
(ta
<
0
) {ta
=
(ta
+
1
)
*
80
+
20
;
o.style.zIndex
=
0
;
}
else
{ta
=
100
;
o.style.zIndex
=
1
}
if
(o.style.zIndex
<=
0
) strFilter
=
"
FlipH(enabled:true)
"
else
strFilter
=
"
FlipH(enabled:false)
"
;
strFilter
=
strFilter
+
"
alpha(opacity=
"
+
ta
+
"
)
"
;
o.style.opacity
=
ta
/
100;
o.style.filter
=
strFilter;
}
if
(smove) d
=
d
+
dv;
}
}
<
body
>
<
div
id
="imgContainer"
style
="width:600px;
height:300px;
border:1px solid red"
>
<
img
src
="http://www.webdm.cn/images/wall1_s.jpg"
link
="/"
target
="_blank"
>
<
img
src
="http://www.webdm.cn/images/wall2_s.jpg"
link
="/"
target
="_blank"
>
<
img
src
="http://www.webdm.cn/images/wall3_s.jpg"
link
="/"
target
="_blank"
>
<
img
src
="http://www.webdm.cn/images/wall4_s.jpg"
link
="/"
target
="_blank"
>
<
img
src
="http://www.webdm.cn/images/wall5_s.jpg"
link
="/"
target
="_blank"
>
<
img
src
="http://www.webdm.cn/images/wall1_s.jpg"
link
="/"
target
="_blank"
>
<
img
src
="http://www.webdm.cn/images/wall2_s.jpg"
link
="/"
target
="_blank"
>
<
img
src
="http://www.webdm.cn/images/wall3_s.jpg"
link
="/"
target
="_blank"
>
<
br
/>
<
p
><
a
href
="http://www.webdm.cn"
>
网页代码站
- 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！
代码来自：http://www.webdm.cn/webcode/1b2f7194-49fe-4e96-9469-07200a910095.html
【javascript|JavaScript实现图片旋转构成3D圆环代码】转载于:https://www.cnblogs.com/webdm/archive/2011/09/02/2163404.html
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 事件代理
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 数组常用方法一
- 人脸识别|【人脸识别系列】| 实现自动化妆