Добро пожаловать, Гость!

 
Для нас. Форум для общения







Начать новую тему Ответить на тему  [ 1 сообщение ] 
Как создать 3D облако на jQuery 
Автор Сообщение
Админ
Аватара пользователя

С нами: 8 лет, 6 месяцев и 5 дней
Сообщения: 221
Репутация: 101
Ответить с цитатой
Автор темыСообщение Как создать 3D облако на jQuery
Для браузеров рендеринг JavaScript'a происходит быстрее, чем когда-либо раньше, и это прекрасная возможность проявить весь потенциал с JQuery. Этот урок покажет, как создать прокручивающееся 3D облако тегов ... это не так сложно, как вы могли подумать.

Демо

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery 3D облако</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
   
<div id="list">
    <ul>
        <li><a href="#">ajax</a></li>
        <li><a href="#">css</a></li>
        <li><a href="#">design</a></li>
        <li><a href="#">firefox</a></li>
        <li><a href="#">flash</a></li>
        <li><a href="#">html</a></li>
        <li><a href="#">Devirtuoso</a></li>
        <li><a href="#">jquery</a></li>
        <li><a href="#">PHP</a></li>
        <li><a href="#">SEO</a></li>
        <li><a href="#">usability</a></li>
        <li><a href="#">www</a></li>
        <li><a href="#">web</a></li>
        <li><a href="#">xhtml</a></li>
   
    </ul>
</div>

</body>
</html>


А это CSS:

/* Set font and background for body*/ 
body{
    font-family: Arial, "MS Trebuchet", sans-serif;
    background-color: #111;
}

/* Styles the div wrapper
the important part is the
width and the height */
#list{
   
    /*Influences layout of list*/
    height:600px;
    width:600px;
   
    background-color: #000;
   
    /* Keeps list inside of wrapper*/
    position:relative;
    margin:0 auto;
    overflow:hidden;
}

/* Reset the list*/
#list ul,
#list li{
    list-style:none;
    margin:0;
    padding:0;
}

/* List requires an absolute position
so jQuery can move the items around
freely */
#list a{
    position:absolute;
    text-decoration: none;
    color:#666;
}
#list a:hover{
    color:#ccc;
}


jQuery:

$(document).ready(function(){
   
//Setup variables
var element = $('#list a'); // all the list elements
var offset = 0;             // angle offset for animation
var stepping = 0.03;        // how fast the list rotates
var list = $('#list');      // the list wrapper
var $list = $(list);

/* Handles mouse movement, the closer to the center
the faster the list will rotate */
$list.mousemove(function(e){
   
    var topOfList = $list.eq(0).offset().top
    var listHeight = $list.height()
   
    // Sets variable that controls the speed of rotation.
    stepping = (e.clientY - topOfList) /  listHeight * 0.2 - 0.1;
   
});


/* Disperse elements evenly around the circle */
for (var i = element.length - 1; i >= 0; i--)
{
    element[i].elemAngle = i * Math.PI * 2 / element.length;
}

// call render function over and over
setInterval(render, 20);


// Handles how and where each element will be rendered.
function render(){
   
    //Steps through each element...
    for (var i = element.length - 1; i >= 0; i--){
       
        // offset adds degrees to where the element
        // is currently on the circle
        var angle = element[i].elemAngle + offset;
       
        // Trig to figure out the size and where the
        // text should go
        x = 120 + Math.sin(angle) * 30;
        y = 45 + Math.cos(angle) * 40;
        size = Math.round(40 - Math.sin(angle) * 40);
       
        // Centers the text, instead of being left aligned.
        var elementCenter = $(element[i]).width() / 2;
       
        // Figure out the x value of the element.
        var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px"
       
       
        // Apply the values to the text
        $(element[i]).css("fontSize", size + "pt");
        $(element[i]).css("opacity",size/100);
        $(element[i]).css("zIndex" ,size);
        $(element[i]).css("left" ,leftValue);
        $(element[i]).css("top", y + "%");
    }
   
    // Rotate the circle
    offset += stepping;
}
   
   
});


Итак, все куски, образующие рабочий пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jQuery 3D облако</title>

<style type="text/css" media="screen">
    body{
        font-family: Arial, "MS Trebuchet", sans-serif;
        background-color: #111;
    }
    #list{
        margin:0 auto;
        height:600px;
        width:600px;
        overflow:hidden;
        position:relative;
        background-color: #000;
    }
    #list ul,
    #list li{
        list-style:none;
        margin:0;
        padding:0;
    }
    #list a{
        position:absolute;
        text-decoration: none;
        color:#666;
    }
    #list a:hover{
        color:#ccc;
    }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
   
<div id="list">
    <ul>
        <li><a href="#">ajax</a></li>
        <li><a href="#">css</a></li>
        <li><a href="#">design</a></li>
        <li><a href="#">firefox</a></li>
        <li><a href="#">flash</a></li>
        <li><a href="#">html</a></li>
        <li><a href="#">Devirtuoso</a></li>
        <li><a href="#">jquery</a></li>
        <li><a href="#">PHP</a></li>
        <li><a href="#">SEO</a></li>
        <li><a href="#">usability</a></li>
        <li><a href="#">www</a></li>
        <li><a href="#">web</a></li>
        <li><a href="#">xhtml</a></li>
   
    </ul>
</div>

<script type="text/javascript">


$(document).ready(function(){
   
var element = $('#list a');
var offset = 0;
var stepping = 0.03;
var list = $('#list');
var $list = $(list)

$list.mousemove(function(e){
    var topOfList = $list.eq(0).offset().top
    var listHeight = $list.height()
    stepping = (e.clientY - topOfList) /  listHeight * 0.2 - 0.1;
   
});


for (var i = element.length - 1; i >= 0; i--)
{
    element[i].elemAngle = i * Math.PI * 2 / element.length;
}


setInterval(render, 20);


function render(){
    for (var i = element.length - 1; i >= 0; i--){
       
        var angle = element[i].elemAngle + offset;
       
        x = 120 + Math.sin(angle) * 30;
        y = 45 + Math.cos(angle) * 40;
        size = Math.round(40 - Math.sin(angle) * 40);
       
        var elementCenter = $(element[i]).width() / 2;

        var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px"

        $(element[i]).css("fontSize", size + "pt");
        $(element[i]).css("opacity",size/100);
        $(element[i]).css("zIndex" ,size);
        $(element[i]).css("left" ,leftValue);
        $(element[i]).css("top", y + "%");
    }
   
    offset += stepping;
}

   
});

</script>

</body>
</html>


Удачи!

Демо


27 авг 2011, 14:17
Профиль ICQ WWW
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ 1 сообщение ] 


Кто сейчас на конференции

Зарегистрированные пользователи: Dot[Bot], Google [Bot], Yandex [Bot]


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Мобильный вид
Powered by phpBB® Forum Software © phpBB Group

[ Время выполнения: 0.087s | 21 Запросов | GZIP : Вкл ]