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

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







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

С нами: 8 лет, 4 месяца и 6 дней
Сообщения: 223
Репутация: 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 сообщение ] 


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

Зарегистрированные пользователи: нет зарегистрированных пользователей


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

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

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