jquery鼠标点击按钮图标旋转弹出图标菜单旋转

来源：互联网 2023-03-16 23:54:47 458

工具/原料

adobe dreamweaver

方法/步骤

准备好需要用到的图标。

jquery鼠标点击按钮图标旋转弹出图标菜单旋转

新建html文档。

jquery鼠标点击按钮图标旋转弹出图标菜单旋转

书写hmtl代码。

div class="PathInner" id="PathMenu" style=" margin:250px auto;">

div class="PathMain">

div class="Tmain" onclick="PathRun();">

div class="rotate" data-transform="rotate(0deg)">span class="cover">/span>/div>

/div>

div class="PathItem"> a class="link" href="#" > 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">

官方指导价/

暂无价格s>/s>/div>

/div>

div class="PathItem"> a class="link" href="#"> 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">

官方指导价/

暂无价格s>/s>/div>

/div>

div class="PathItem"> a class="link" href="#" > 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">

官方指导价/

暂无价格s>/s>/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">

官方指导价/

暂无价格s>/s>/div>

/div>

jquery鼠标点击按钮图标旋转弹出图标菜单旋转

书写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; -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; }

jquery鼠标点击按钮图标旋转弹出图标菜单旋转