netoops blog
Trang này chỉ copy lại để làm tài liệu cho mình thôi: Nếu có bài của bạn, thì xin bỏ qua. Cảm ơn.

Sunday, 5 August 2012

Menu chạy của GGM( đã hóan thành)


<style type="text/css">
#list{
    margin:0 auto;
    height:100px!important;
    width:100%;
    overflow:hidden;
    position:relative;
    background-color: #fff;
    -moz-box-shadow:0px 10px 20px #000;
    font-size:10px!important;
}
#list ul,
#list li{
    list-style:none;
    margin:0;
    padding:0;
}
#list a{
    position:absolute!important;
    text-decoration: none!important;
    color:#666;
    text-shadow:0px 1px 2px #000;
    border:none!important;
    line-height:1.2em!important;
}
#list a:hover{
    color:cyan;
}
</style>

<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">

$(document).ready(function(){
    var element = $('#list a');;
    var offset = 0;
    var stepping = 0;
    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.1 - 0;
    });
    for (var i = element.length - 1; i >= 0; i--)
    {
        element[i].elemAngle = i * Math.PI * 2 / element.length;
    }
    setInterval(render, 100);
    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 + "px");
            $(element[i]).css("opacity",size/100);
            $(element[i]).css("zIndex" ,size);
            $(element[i]).css("left" ,leftValue);
            $(element[i]).css("top", y + "%");
        }
        offset += stepping;
    }
});
</script>
<div id="list">
<ul>
<li><a href="http://giogiaomua.blogspot.com.au/search/label/Lang%20thang?&max-results=17">Lang thang</a></li>
<li><a href="http://giogiaomua.blogspot.com.au/search/label/Ngh%E1%BB%87%20Thu%E1%BA%ADt?&max-results=17">Nghệ thuật</a></li>
<li><a href="http://giogiaomua.blogspot.com.au/search/label/Gia%20%C4%91%C3%ACnh?&max-results=17">Gia đình</a></li>
<li><a href="http://giogiaomua.blogspot.com.au/search/label/Bi%E1%BB%83n%20%C4%91%C3%B4ng?&max-results=17">Biển đông</a></li>
<li><a href="http://giogiaomua.blogspot.com.au/search/label/VN?&max-results=17">VN</a></li>
<li><a href="http://giogiaomua.blogspot.com.au/search/label/Nh%C3%A2n%20v%E1%BA%ADt?&max-results=17">Nhân vật</a></li>
</ul>
</div>

No comments:

Post a Comment

Copyright 2010 Chú ý; trang này chỉ để chủ xem.

Home | Layout | Template | Allposts | Viết |