Вращая Div, используя JavaScript - PullRequest
Новая
       11

Вращая Div, используя JavaScript

0 голосов
/ 11 мая 2009

Вот ссылка: http://www.avineon.com/

Открыть эту ссылку см. Вверху. Четыре изображения вращаются.

Мне нужно что-то похожее, используя Javascript.

Возможно ли это с помощью Javascript.

Ответы [ 5 ]

6 голосов
/ 11 мая 2009

Не думаю, что вам повезет, если вы попытаетесь сделать это в чистом javascript. может быть возможно с использованием новых библиотек canvas и SVG, таких как Raphael , но у вас все равно будут проблемы с кросс-браузерными операциями. На этом сайте использовался Flash, и я бы порекомендовал использовать его, если вам нужен такой эффект.

... почему вы хотите, чтобы на вашем сайте это была другая история, хотя ...

1 голос
/ 11 мая 2009

Можно так что-то похожее, но не точное.

Прозрачность = Поддерживается в FF, Safari, IE7 + Изменение ширины изображения = Поместите изображение в div с этим Css 

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

Это заставит изображение растягиваться, чтобы заполнить .class div. Затем вы можете использовать JS, чтобы сделать этот div более узким, как это делает карусель, и содержащееся в нем изображение будет анимировано внутри div.

Затем вам нужно будет отследить местоположение мыши, чтобы определить, как быстро она вращается.

Вы можете использовать уравнение с использованием косинуса для плавного ускорения с дальних концов (IIRC)

Однако вы не сможете получить изображения в обратном порядке, если не создадите копию на языке сервера или не используете холст.

0 голосов
/ 02 сентября 2010 
    <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>
0 голосов
/ 11 мая 2009

Этот эффект возможен в JavaScript, просто изменяя все стили изображений width, height и left с течением времени. Это сложный сценарий, но ему нужно только интерполировать эти три стиля для каждого из элементов изображения.

Чтобы получить эффект поворота, уменьшите стиль изображения width в функции setInterval, одновременно перемещая свойство стиля left. Существует также небольшое снижение на height.

Вам понадобятся два изображения для каждой стороны, спереди и сзади. Когда ширина уменьшится до нуля, поменяйте местами изображение с перевернутой версией и начните увеличивать ширину.

В качестве альтернативы используйте Webkit и Firefox свойства преобразования css.

Или попробуйте один из этих компонентов прикрытия, которые выглядят аналогично: Protoflow , ImageFlow

0 голосов
/ 11 мая 2009

Лучше всего не пытаться визуализировать что-либо в реальном 3D, а использовать визуальные приемы для аппроксимации трехмерного эффекта. То есть, используйте перспективу / деформацию изображения, чтобы он выглядел как вращающийся куб, аналогично тому, что реализовано на этой странице , которая лучше объясняет математическую схему.

Правда, вам, вероятно, лучше использовать Flash.

...