前台代码
<div > <button class="btn btn-lg btn-icon btn-info" ng-click="showSaveTag()" ng-disabled="!isShowSaveBtn"style="margin-bottom:2px;"><i id="3" class="glyphicon glyphicon-ok"></i></button> <button class="btn btn-lg btn-icon btn-info" style="margin-bottom:2px;z-index:999999;position:relative" ng-mouseover="mouseover($event)" ng-mouseleave="mouseout($event)" id="1" ng-click="ShowTagManage()"><i class="glyphicon glyphicon-tasks" id="1"></i></button> <button class="btn btn-lg btn-icon btn-info" style="margin-bottom:2px;z-index:999999;position:relative" ng-mouseover="mouseover($event)" ng-mouseleave="mouseout($event)" id="2" ng-click="showSavedTagList()"><i id="2" class="fa fa-list-ul"></i></button> <button class="btn btn-lg btn-icon btn-info" style="margin-bottom:2px;z-index:999999;position:relative" ng-mouseover="mouseover($event)" ng-mouseleave="mouseout($event)" id="3" ng-click="showSavedOldData()"><i id="3" class="fa fa-table"></i></button> <div style="background-color:#23b7e5;position:absolute;top:62px;height:45px;width:45px;z-index:90;color:white;text-align:center;font-size:15px;padding-top:10px;font-weight:bold;border-radius:3px;" id="111" >标签计算方式</div> <div style="background-color:#23b7e5;position:absolute;top:109px;height:45px;width:45px;z-index:90;color:white;text-align:center;font-size:15px;padding-top:10px;font-weight:bold;border-radius:3px;" id="222" >已保存标签</div> <div style="background-color:#23b7e5;position:absolute;top:156px;height:45px;width:45px;z-index:90;color:white;text-align:center;font-size:15px;padding-top:10px;font-weight:bold;border-radius:3px;" id="333" >历史数据</div> </div>
悬浮事件
$scope.mouseover = function (event) { var id = event.target.id; switch (id) { case "1":
$("#111").stop().animate({ width: "120px", right: "30px"
}); break; case "2":
$("#222").stop().animate({ width: "120px", right: "30px"
}); break; case "3":
$("#333").stop().animate({ width: "120px", right: "30px"
}); break;
}
}
$scope.mouseout = function (event) { var id = event.target.id; switch (id) { case "1":
$("#111").animate({ width: "30px", right: "0px"
}); break; case "2":
$("#222").animate({ width: "30px", right: "0px"
}); break; case "3":
$("#333").animate({ width: "30px", right: "0px"
}); break;
}
}
作者：三只仓鼠
链接：https://www.jianshu.com/p/5f0a390da233
随时随地看视频
