Question

这是一个链接：http://www.avineon.com/

打开此链接，请参阅顶部。四个图像在旋转。

我需要使用Javascript类似的东西。

是否可以使用Javascript。

Answer 1

如果您尝试在纯JavaScript中执行此操作，我认为您不会有太多运气。可能可以使用新兴的画布和SVG库（例如Raphael），但您仍然会遇到跨浏览器问题。该网站使用Flash，如果你想要这样的效果，我建议使用它。

... 为什么你想要在你的网站上发布另一个故事......

Answer 2

你可以这么类似，但不准确。

透明度= FF，Safari，IE7 +支持更改图像宽度=使用此Css将图像放在div中

.class img {
display: block;
width: 100%;
height: 100%
}

这将使图像拉伸以填充.class div。然后你可以使用JS来使这个div像旋转木马那样更窄，并且包含的图像将在div中生成动画。

然后，您需要跟踪鼠标位置以确定它旋转的速度。

您可以使用余弦方程从远端平滑加速（IIRC）

但是，除非您使用服务器端语言或使用画布创建副本，否则您无法反向获取图像。

Answer 3

你最好的选择不是尝试在实际3D中渲染某些东西，而是使用视觉技巧来逼近3D效果。也就是说，使用透视/图像变形使其看起来像一个立方体旋转，类似于实现的at this page，它对所涉及的数学有更好的解释。

但是，真的，你最好只使用Flash。

Answer 4

只需修改每个图片width，height和left样式，就可以在JavaScript中实现这种效果。这是一个涉及的脚本，但只需要在每个图像元素上插入这三种样式。

要获得旋转效果，请在移动width样式属性时减少setInterval函数中图像的left样式。 height也有轻微的减少。

每侧需要两张图像，正面和反面。当宽度减小到零时，将图像与其翻转版本交换并开始递增宽度。

或者使用Webkit's和Firefox's转换css属性。

或者尝试其中一个看似相似的coverflow组件： Protoflow， ImageFlow

Answer 5

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

使用javascript旋转Div

5 个答案: