jquery工具箱旋轉動畫效果

今天給大家分享一個工具箱的旋轉動畫效果，因為做GIS項目的時候所需要到，這是我在懶人之家看到的一個jquery鼠標點擊按鈕圖標旋轉彈出圖標菜單旋轉動畫。
首先，可以引用插件，但因為項目所需，我便將工具箱js的代碼改了一下，所以這里工具箱的js就不用插件，方便大家查看。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery工具箱旋轉動畫效果</title><link href="~/Content/lanrenzhijia.css" type="text/css" rel="stylesheet" />//工具箱樣式---來自懶人之家<script src="~/Content/js/jquery-1.7.2.min.js"></script>//實現jquery必要的

以上兩個是必要的插件。
這里可以寫需要彈出多少個的小圖標，再去js設置，這里我需要到六個小圖標。

// 工具箱<div class="PathInner" id="PathMenu" style="float:right;position: absolute;right: 140px;bottom: 150px;"><div class="PathMain"><div class="Tmain" onclick="PathRun();"><div class="rotate"><span class="cover"></span></div></div></div><div class="PathItem"><a class="link" href="#" title=""><span class="item" style="background-image: url('../../Content/img/Ruler.png'); " onclick="mapStadiometry()"></span></a></div><div class="PathItem"><a class="link" href="#" title=""><span class="item" style="background-image: url('../../Content/img/Measure_Crop_32px_530009_easyicon.net.png');" onclick="mapMetry()"></span></a></div><div class="PathItem"><a class="link" href="#" title=""><span class="item" style="background-image: url('../../Content/img/round.png');" onclick="YuanXing()"></span></a></div><div class="PathItem"><a class="link" href="#" title=""><span class="item" style="background-image: url('../../Content/img/moment_icn_pic.png');" onclick="JuXing()"></span></a></div><div class="PathItem"><a class="link" href="#" title=""><span class="item" style="background-image: url('../../Content/img/multilateral.png');" onclick="JiHe()"></span></a></div><div class="PathItem"><a class="link" href="#" title=""><span class="item" style="background-image: url('../../Content/img/weixingtu.PNG');" onclick="QingChu()"></span></a></div></div>

下面是js的代碼：

@*工具箱動畫*@<script>var PathStatus = 0;var angle = Math.PI / ((-3.38 - 0.9) * 0.8);var mainButton = [{ 'bg': '../Content/images/bg-2x.png', 'css': '', 'cover': '../Content/images/bg-2x.png', 'html': '<span class="cover"></span>' },{ 'bg': '', 'css': '', 'cover': '', 'html': '', 'angle': -405, 'speed': 200 }];var Radius = 60; //小圖出來的半徑var Offset = 40; //小圖出來后的偏移量var Path = 2; //出現方式，1：左上，2:左下，3：右上，4：右下var OutSpeed = 80; //小圖出現的速度var OutIncr = 80; //小圖出來的旋轉var OffsetSpeed = 200; //小圖出來的旋轉速度var InSpeed = 480; //小圖進去的速度var InIncr = -80; //小圖進去的旋轉function PathRun() {var PathMenu = $('#PathMenu');var PathItems = PathMenu.children('.PathItem').slice(0, 6);if (PathStatus == 0) {var Count = PathItems.size();PathItems.each(function (SP) {var ID = $(this).index();if (ID == 1) {var X = Radius;var Y = 0;var X1 = X + Offset;var Y1 = Y;} else if (ID == Count) {var X = 0;var Y = Radius;var X1 = X;var Y1 = Y + Offset;} else {var X = Math.cos(angle * (ID - 1)) * Radius;var Y = Math.sin(angle * (ID - 1)) * Radius;var X1 = X + Offset;var Y1 = Y + Offset;}if (Path == 2) {Y = -Y;Y1 = -Y1;} else if (Path == 3) {X = -X;Y = -Y;X1 = -X1;Y1 = -Y1;} else if (Path == 4) {X = -X;X1 = -X1;}$(this).children().children().animate({ rotate: 720 }, 600);$(this).animate({ left: X1, bottom: Y1 }, OutSpeed + SP * OutIncr, function () {$(this).animate({ left: X, bottom: Y }, OffsetSpeed);});});if (mainButton[1]['angle']) {$(PathMenu.children('.PathMain').find('.rotate')).animate({ rotate: mainButton[1]['angle'] }, mainButton[1]['speed']);}if (mainButton[1]['bg'] != '') $(this).children().css('background-image', 'url(' + mainButton[1]['bg'] + ')')if (mainButton[1]['css'] != '') $(this).children().css(mainButton[1]['css']);if (mainButton[1]['cover'] != '') $(this).children().children().css('background-image', 'url(' + mainButton[1]['cover'] + ')');if (mainButton[1]['html'] != '') $(this).children().html(mainButton[1]['html']);PathStatus = 1;} else if (PathStatus == 1) {PathItems.each(function (SP) {if (parseInt($(this).css('left')) == 0) {X1 = 0;} else {if (Path <= 2) {X1 = parseInt($(this).css('left')) + Offset;} else if (Path >= 3) {X1 = parseInt($(this).css('left')) - Offset;}}if (parseInt($(this).css('bottom')) == 0) {Y1 = 0;} else {if (Path == 3 || Path == 2) {Y1 = parseInt($(this).css('bottom')) - Offset;} else if (Path == 1 || Path == 4) {Y1 = parseInt($(this).css('bottom')) + Offset;}}$(this).children().children().animate({ rotate: 0 }, 600);$(this).animate({ left: X1, bottom: Y1 }, OffsetSpeed, function () {$(this).animate({ left: 0, bottom: 0 }, InSpeed + SP * InIncr);});});if (mainButton[1]['angle']) {$(PathMenu.children('.PathMain').find('.rotate')).animate({ rotate: 0 }, mainButton[1]['speed']);}if (mainButton[0]['bg'] != '') $(this).children().css('background-image', 'url(' + mainButton[0]['bg'] + ')')if (mainButton[0]['css'] != '') $(this).children().css(mainButton[0]['css']);if (mainButton[0]['cover'] != '') $(this).children().children().css('background-image', 'url(' + mainButton[0]['cover'] + ')');if (mainButton[0]['html'] != '') $(this).children().html(mainButton[0]['html']);PathStatus = 0;}}</script>

實現效果如下：

點擊小圖標彈出，再點擊小圖標進去隱藏。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的jquery工具箱旋转动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。