- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>jquery鼠标点击按钮图标旋转弹出图标菜单旋转动画</title>
- <meta name="description" content="jquery图片旋转插件和图片过渡动画插件制作鼠标点击按钮图标旋转弹出,形成图标菜单,当鼠标悬停图标是显示图标菜单内容。非常酷炫的图标菜单旋转动画特效。" />
- </head>
- <body>
- <style type="text/CSS">
- * { margin: 0; padding: 0; list-style-type: none; }
- a, img { border: 0; }
- body { font: 12px/180% Arial, Helvetica, sans-serif, "新宋体"; }
- .PathMenu { position: absolute; right: 0px; bottom: 0px; width: 60px; height: 60px; }
- .PathInner { position: relative; width: 60px; height: 60px; }
- .PathInner .PathItem { position: absolute; left: 0px; bottom: 0px; }
- .PathInner a { /* position:absolute; */ display: block; /* overflow:hidden; */ background-position: center; background-repeat: no-repeat; z-index: 999; }
- .PathInner a .item, .rotate { width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; display: block; overflow: hidden; text-align: center; vertical-align: middle; position: absolute; }
- .PathInner .PathMain { z-index: 1000; position: absolute; display: block; /* overflow:hidden; */ background-position: center; background-repeat: no-repeat; bottom: 0; left: 0; }
- .PathInner .PathMain .Tmain { background-image: url(images/bg-2x.png); width: 60px; height: 60px; }
- .PathInner .PathMain .Tmain .rotate { background-image: url(images/icon-2x.png); -moz-transform: rotate(0deg); position: absolute; bottom: 0; left: 0; }
- .PathInner .cover { width: 100%; height: 100%; display: block; background: url(images/bg-hl-2x.png) center no-repeat; cursor: pointer; *filter: alpha(opacity=0); filter: alpha(opacity=0)\\0; opacity: 0; -webkit-transition: opacity .2s ease-out; -moz-transition: opacity .2s ease-out; -ms-transition: opacity .2s ease-out; -o-transition: opacity .2s ease-out; }
- .PathInner .cover:hover { opacity: 0.2; *filter: alpha(opacity=20); filter: alpha(opacity=20)\\0; }
- .PathItem .link { position: absolute; bottom: 0; left: 0; width: 60px; height: 60px; background-image: url(images/bg-item-2x.png); }
- .PathItem .link .item { bottom: 0; left: 0; }
- .metaicondetail { background: #fff; color: #fff; border-radius: 6px; border: 1px #333 solid; min-width: 100px; max-width: 300px; overflow: hidden; text-align: center; position: absolute; display: none; top: -115px; left: -22px; }
- .metaicondetail .inner { border: 2px #fff solid; border-radius: 6px; background: #272727; font-size: 14px; padding: 5px; }
- .metaicondetail span { font-family: candara,arail; font-size: 18px; }
- .metaicondetail s { border-color: #333 transparent transparent; border-style: solid dashed dashed; border-width: 5px; clear: both; display: inline-block; font-size: 0; height: 0; margin-left: 3px; overflow: hidden; position: absolute; right: 50%; top: 44px; width: 0; }
- </style>
- <script type="text/javascript" src1="js/jquery-1.7.2.min.js"></script>
- <script type="text/javascript" src1="js/rotate.js"></script>
- <script type="text/javascript" src1="js/jquery.transform.js"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- $(".PathItem").hover(function () {
- $(this).find(".metaicondetail").show();
- }, function () {
- $(this).find(".metaicondetail").hide();
- });
- });
- </script>
- <div class="PathInner" id="PathMenu" style="margin-left: 200px; margin: 300px;">
- <div class="PathMain">
- <div class="Tmain" onclick="PathRun();">
- <div class="rotate" data-transform="rotate(0deg)"><span class="cover"></span></div>
- </div>
- </div>
- <div class="PathItem">
- <a class="link" href="#" title="更多图片">
- <span class="item" style="background-image: url(images/moment_icn_pic.png); -moz-transform: rotate(0deg);" data-transform="rotate(0deg)"></span>
- </a>
- <div class="metaicondetail shadow">
- <div class="inner">
- <p>官方指导价</p>
- 暂无价格<s></s></div>
- </div>
- </div>
- <div class="PathItem">
- <a class="link" href="#" title="详细参数">
- <span class="item" style="background-image: url(images/moment_icn_info.png); -moz-transform: rotate(0deg);" data-transform="rotate(0deg)"></span>
- </a>
- <div class="metaicondetail shadow">
- <div class="inner">
- <p>官方指导价</p>
- 暂无价格<s></s></div>
- </div>
- </div>
- <div class="PathItem">
- <a class="link" href="#" title="玛百莉官方专卖店地址">
- <span class="item" style="background-image: url(images/moment_icn_address.png); -moz-transform: rotate(0deg);" data-transform="rotate(0deg)"></span>
- </a>
- <div class="metaicondetail shadow">
- <div class="inner">
- <p>官方指导价</p>
- 暂无价格<s></s></div>
- </div>
- </div>
- <div class="PathItem">
- <a class="link" href="#">
- <span class="item" style="background-image: url(images/moment_icn_price.png); -moz-transform: rotate(0deg);" data-transform="rotate(0deg)"></span>
- </a>
- <div class="metaicondetail shadow">
- <div class="inner">
- <p>官方指导价</p>
- 暂无价格<s></s></div>
- </div>
- </div>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/180220148737.html
来源: http://www.codesnippet.cn/detail/180220148737.html