0

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

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

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

是否可以通过使用Javascript。

4

5 回答 5

6

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

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

于 2009-05-11T05:14:21.543 回答
1

你可以做类似的事情，但不准确。

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

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

这将使图像拉伸以填充 .class div。然后，您可以使用 JS 使这个 div 像轮播一样变窄，并且包含的​​图像将在 div 内进行动画处理。

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

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

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

于 2009-05-11T05:17:37.123 回答
0

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

但实际上，您最好只使用 Flash。

于 2009-05-11T05:24:39.843 回答
0

通过随着时间的推移修改每个图像、和样式，width这种height效果在 JavaScript 中是可能的。left这是一个复杂的脚本，但只需要在每个图像元素上插入这三种样式。

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

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

或者使用Webkit和Firefox 的transform css 属性。

或者尝试以下看起来相似的封面流组件之一： Protoflow、 ImageFlow

于 2009-05-11T15:51:44.993 回答
-2 
    <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>
于 2010-09-02T15:14:02.307 回答