首頁 > 開發者 > JavaScript

基於jQuery代碼實現圓形菜單展開收縮效果，jquery圓形

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

基於jQuery代碼實現圓形菜單展開收縮效果，jquery圓形

廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：

<head><script src="js/jquery.min.js"></script><script src="js/jquery.menu.js"></script><style>body {  margin:0 auto;  background:none repeat scroll 0 0 #FCFCFC}.outer_container {  height:200px;  position:relative}.menu_button {  position:absolute;  bottom:0;  left:0;  border-radius:50%;  height:36px;  width:36px;  border:4px solid #fff;  box-shadow:rgba(0,0,0,.3) 0 3px 8px 0,rgba(0,0,0,.2) 0 0 0 1px,inset rgba(0,0,0,.3) 0 0 0 1px,inset rgba(255,255,255,.3) 0 1px 0 1px;  text-indent:-99999px;  overflow:hidden;  background-color:#e34f3f;  background-image:-moz-linear-gradient(top, #f76f54, #c61f1f);  background-image:-ms-linear-gradient(top, #f76f54, #c61f1f);  background-image:-webkit-gradient(linear,0 0,0 100%,from( #f76f54),to( #c61f1f));  background-image:-webkit-linear-gradient(top, #f76f54, #c61f1f);  background-image:-o-linear-gradient(top, #f76f54, #c61f1f);  background-image:linear-gradient(top, #f76f54, #c61f1f);  background-repeat:repeat-x;  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f76f54', endColorstr='#c61f1f', GradientType=0);  z-index:9999;  outline:0}.menu_button span {  display:block;  height:36px;  width:36px;  background:url("../images/cross.png") no-repeat center center;  -webkit-transition:.4s ease;  -moz-transition:.4s ease;  -ms-transition:.4s ease;  -o-transition:.4s ease;  transition:.4s ease;background-size:20px 20px}.menu_option {  bottom:18px;  left:5px;  position:absolute}.menu_option li {  position:absolute;  display:block;  top:0;  left:0;  -webkit-transition:.3s;  -moz-transition:.3s;  -ms-transition:.3s;  -o-transition:.3s;  transition:.3s}.menu_option li a {  position:relative;  display:block;  border-radius:50%;  width:26px;  height:26px;  border:3px solid #fff;  box-shadow:rgba(0,0,0,.4) 0 0 5px 0,rgba(0,0,0,.2) 0 0 0 1px,inset rgba(0,0,0,.5) 0 0 2px 0;  text-indent:-99999px;  overflow:hidden;  background:#444}.menu_option li a span {  background-attachment:scroll;  background-clip:border-box;  background-color:transparent;  background-image:url("../images/usr.png");  background-origin:padding-box;  background-position:center center;  background-repeat:no-repeat;  background-size:16px 16px;  display:block;  width:26px;  height:26px;  -webkit-transition:.4s ease;  -moz-transition:.4s ease;  -ms-transition:.4s ease;  -o-transition:.4s ease;  transition:.4s ease}.btn-rotate span {  -webkit-transform:rotate(-135deg);  -moz-transform:rotate(-135deg);  -ms-transform:rotate(-135deg);  -o-transform:rotate(-135deg);  transform:rotate(-135deg)}</style></head><body><!-- 代碼 開始 -->  <div id="outer_container" class="outer_container" >    <a class="menu_button" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="Toggle"><span>Menu Toggle</span></a>    <ul class="menu_option">     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li>     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li>     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li>     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li>     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li>    </ul>  </div><!-- 代碼 結束 --><script>function PieMenuInit(){     $('#outer_container').PieMenu({    'starting_angel':0, //起始角度    'angel_difference' : 90, //散開角度    'radius':100, //圓形弧度  });     }$(function() {       PieMenuInit();     });</script></body>

以上所述是小編給大家介紹的基於jQuery代碼實現圓形菜單展開收縮效果，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More