这是一个链接:http ://www.avineon.com/
打开此链接,请参阅顶部。四个图像正在旋转。
我需要使用 Javascript 类似的东西。
是否可以通过使用Javascript。
如果您尝试在纯 javascript 中执行此操作,我认为您不会有太多运气。使用新兴的画布和 SVG 库(例如Raphael )可能是可行的,但您仍然会遇到跨浏览器问题。该站点使用了 Flash,如果您想要这样的效果,我建议您使用它。
......为什么你想要在你的网站上是另一个故事......
你可以做类似的事情,但不准确。
透明度 = FF、Safari、IE7+ 支持 更改图像宽度 = 使用此 Css 将图像放置在 div 中
.class img {
display: block;
width: 100%;
height: 100%
}
这将使图像拉伸以填充 .class div。然后,您可以使用 JS 使这个 div 像轮播一样变窄,并且包含的图像将在 div 内进行动画处理。
然后,您需要跟踪鼠标位置以确定它旋转的速度。
您可以使用使用余弦的方程从远端平滑加速(IIRC)
但是,您将无法反向获取图像,除非您使用服务器端语言创建副本或使用画布。
您最好的选择不是尝试在实际 3D 中渲染某些东西,而是使用视觉技巧来近似 3D 效果。也就是说,使用透视图/图像变形让它看起来像一个立方体在旋转,类似于在这个页面上实现的,它对所涉及的数学有更好的解释。
但实际上,您最好只使用 Flash。
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n');
document.write('.dyncontent{display: none; width: 728px; height: 90px;}\n');
document.write('</style>');
}
var curcontentindex=0;
var messages=new Array();
function getElementByClass(classname){
var inc=0;
var alltags=document.all? document.all : document.getElementsByTagName("*");
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=alltags[i];
}
}
function rotatecontent(){
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0;
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1;
messages[prevcontentindex].style.display="none"; //hide previous message
messages[curcontentindex].style.display="block"; //show current message
}
window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent");
setInterval("rotatecontent()", 5000);
}
}
</script>
<table width="100%">
<tr align="center">
<td>
<div class="dyncontent" style="display: block">
first
</div>
<div class="dyncontent">
second
</div>
<div class="dyncontent">
Third
</div>
</td>
</tr>
</table>
</body>
</html>