{"id":28729,"date":"2024-11-25T17:33:14","date_gmt":"2024-11-25T09:33:14","guid":{"rendered":"https:\/\/fwq.ai\/blog\/28729\/"},"modified":"2024-11-25T17:33:14","modified_gmt":"2024-11-25T09:33:14","slug":"%e5%be%ae%e4%bf%a1%e5%85%ac%e4%bc%97%e5%b9%b3%e5%8f%b0%e5%bc%80%e5%8f%91%e7%a0%b8%e9%87%91%e8%9b%8b","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/28729\/","title":{"rendered":"\u5fae\u4fe1\u516c\u4f17\u5e73\u53f0\u5f00\u53d1\u7838\u91d1\u86cb"},"content":{"rendered":"<p>\u7838\u91d1\u86cb\u88ab\u5e7f\u6cdb\u5e94\u7528\u4e8e\u5e86\u5178\u6d3b\u52a8\u3001\u5546\u5bb6\u4fc3\u9500\u3001\u7535\u89c6\u5a31\u4e50\u7b49\u573a\u5408\uff0c\u5b83\u7684\u8da3\u5473\u3001\u60ac\u5ff5\u80fd\u8fc5\u901f\u6d3b\u8dc3\u73b0\u573a\u6c14\u6c1b\u3002\u540c\u6837\uff0c\u6211\u4eec\u4e5f\u53ef\u4ee5\u5c06\u7838\u91d1\u86cb\u5e94\u7528\u5230web\u7f51\u7ad9\u4e0a\uff0c\u7528\u4e8e\u5f00\u5c55\u7ebf\u4e0a\u6d3b\u52a8\u3002\u672c\u6587\u5c06\u4f7f\u7528jquery\u4e0ephp\u8bb2\u89e3\u5982\u4f55\u5b9e\u73b0\u4e00\u4e2aweb\u7838\u91d1\u86cb\u7a0b\u5e8f\u3002<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/013\/dd7614ae353368648202f63217dafdfc-0.jpg\" style=\"max-width:90%\" class=\"aligncenter\" title=\"\u5fae\u4fe1\u516c\u4f17\u5e73\u53f0\u5f00\u53d1\u7838\u91d1\u86cb\u63d2\u56fe\" alt=\"\u5fae\u4fe1\u516c\u4f17\u5e73\u53f0\u5f00\u53d1\u7838\u91d1\u86cb\u63d2\u56fe\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h4>\u51c6\u5907<\/h4>\n<p>\u6211\u4eec\u9700\u8981\u51c6\u5907\u9053\u5177\uff08\u7d20\u6750\uff09\uff0c\u5373\u76f8\u5173\u56fe\u7247\uff0c\u5305\u62ec\u91d1\u86cb\u56fe\u7247\u3001\u86cb\u7838\u788e\u540e\u7684\u56fe\u7247\u3001\u7838\u788e\u540e\u7684\u788e\u82b1\u56fe\u7247\u3001\u4ee5\u53ca\u9524\u5b50\u56fe\u7247\u3002<\/p>\n<h4>HTML<\/h4>\n<p>\u6211\u4eec\u9875\u9762\u4e0a\u8981\u5c55\u73b0\u7684\u662f\u4e00\u4e2a\u7838\u91d1\u86cb\u7684\u53f0\u5b50\uff0c\u53f0\u4e0a\u653e\u4e86\u7f16\u53f7\u4e3a1\uff0c2\uff0c3\u7684\u4e09\u4e2a\u91d1\u86cb\uff0c\u4ee5\u53ca\u4e00\u628a\u9524\u5b50\u3002\u6211\u4eec\u6784\u5efa\u4ee5\u4e0bhtml\u4ee3\u7801\uff1a<\/p>\n<\/p>\n<pre>&lt;p&gt;&nbsp;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/p&gt;<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<ul>\n  &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/p>\n<p>\u9524\u5b50<\/p>\n<p>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/p>\n<p><b><\/b><\/p>\n<p>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/p>\n<li> <span>1<\/span><sup><\/sup> <\/li>\n<p>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/p>\n<li> <span>2<\/span><sup><\/sup> <\/li>\n<p>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/p>\n<li> <span>3<\/span><sup><\/sup> <\/li>\n<p>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;\n<\/ul>\n<p>&nbsp; <\/p>\n<p>\u4e0a\u8ff0\u4ee3\u7801\u4e2d\uff0c.hammer\u653e\u7f6e\u9524\u5b50\uff0c.resultTip\u7528\u4e8e\u7838\u86cb\u540e\u663e\u793a\u7684\u7ed3\u679c\uff0c\u5373\u6709\u6ca1\u6709\u4e2d\u5956\uff0c\u4e09\u4e2ali\u5206\u522b\u653e\u7f6e3\u4e2a\u91d1\u86cb\uff0c\u6211\u4eec\u7528CSS\u6765\u88c5\u9970\u4e0b\u6548\u679c\u3002<\/p>\n<h4>CSS<\/h4>\n<pre>.egg{width:660px;&nbsp;height:400px;&nbsp;margin:50px&nbsp;auto&nbsp;20px&nbsp;auto;}&nbsp;\r\n.egg&nbsp;ul&nbsp;li{z-index:999;}&nbsp;\r\n.eggList{padding-top:110px;position:relative;width:660px;}&nbsp;\r\n.eggList&nbsp;li{float:left;background:url(images\/egg_1.png)&nbsp;no-repeat&nbsp;bottom;width:158px;&nbsp;\r\nheight:187px;cursor:pointer;position:relative;margin-left:35px;}&nbsp;\r\n.eggList&nbsp;li&nbsp;span{position:absolute;&nbsp;width:30px;&nbsp;height:60px;&nbsp;left:68px;&nbsp;top:64px;&nbsp;color:#ff0;&nbsp;\r\n&nbsp;font-size:42px;&nbsp;font-weight:bold}&nbsp;\r\n.eggList&nbsp;li.curr{background:url(images\/egg_2.png)&nbsp;no-repeat&nbsp;bottom;cursor:default;z-index:300;}&nbsp;\r\n.eggList&nbsp;li.curr&nbsp;sup{position:absolute;background:url(images\/img-4.png)&nbsp;no-repeat;width:232px;&nbsp;&nbsp;\r\nheight:181px;top:-36px;left:-34px;z-index:800;}&nbsp;\r\n.hammer{background:url(images\/img-6.png)&nbsp;no-repeat;width:74px;height:87px;position:absolute;&nbsp;&nbsp;\r\ntext-indent:-9999px;z-index:150;left:168px;top:100px;}&nbsp;\r\n.resultTip{position:absolute;&nbsp;background:#ffc&nbsp;;width:148px;padding:6px;z-index:500;top:200px;&nbsp;&nbsp;\r\nleft:10px;&nbsp;color:#f60;&nbsp;text-align:center;overflow:hidden;display:none;z-index:500;}&nbsp;\r\n.resultTip&nbsp;b{font-size:14px;line-height:24px;}<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u6309\u7167\u4e0a\u9762\u7684\u4ee3\u7801\u6211\u4eec\u53ef\u4ee5\u5728\u9875\u9762\u4e2d\u770b\u5230\u4e00\u4e2a\u5b8c\u6574\u7684\u7838\u91d1\u86cb\u573a\u666f\uff0c\u6ce8\u610f\u6211\u4eec\u4f7f\u7528\u4e86png\u56fe\u7247\uff0c\u5982\u679c\u4f60\u7684\u5ba2\u6237\u4ecd\u5728\u4f7f\u7528ie6\u7684\u8bdd\uff0c\u4f60\u53ef\u80fd\u9700\u8981\u5bf9png\u56fe\u7247\u7684\u900f\u660e\u505a\u5904\u7406\uff0c\u672c\u6587\u4e0d\u505a\u5904\u7406\u3002<\/p>\n<h4>jQuery<\/h4>\n<p>\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u8981\u7528jQuery\u4ee3\u7801\u6765\u5b9e\u73b0\u7838\u91d1\u86cb\u3001\u788e\u86cb\u3001\u5c55\u793a\u4e2d\u5956\u7ed3\u679c\u7684\u6574\u4e2a\u8fc7\u7a0b\u3002\u5f53\u7136\uff0c\u8001\u89c4\u77e9\uff0c\u5bf9\u4e8e\u624d\u7528jQuery\u5b9e\u73b0\u7684\u5b9e\u4f8b\u7a0b\u5e8f\uff0c\u4f60\u5fc5\u987b\u5148\u8f7d\u5165jQuery\u5e93\u6587\u4ef6\u3002<\/p>\n<p>\u9996\u5148\uff0c\u5f53\u9f20\u6807\u6ed1\u5411\u91d1\u86cb\u65f6\uff0c\u7528\u4e8e\u7838\u91d1\u86cb\u7684\u9524\u5b50\u4f1a\u4ec5\u9760\u91d1\u86cb\u53f3\u4e0a\u65b9\uff0c\u53ef\u4ee5\u4f7f\u7528position()\u6765\u5b9a\u4f4d\u3002<\/p>\n<\/p>\n<pre>$(\".eggList&nbsp;li\").hover(function()&nbsp;{&nbsp;\r\n&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;posL&nbsp;=&nbsp;$(this).position().left&nbsp;+&nbsp;$(this).width();&nbsp;\r\n&nbsp;&nbsp;&nbsp;&nbsp;$(\"#hammer\").show().css('left',&nbsp;posL);&nbsp;\r\n})<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u7136\u540e\uff0c\u70b9\u51fb\u91d1\u86cb\uff0c\u5373\u6325\u52a8\u9524\u5b50\u7838\u5411\u91d1\u86cb\u7684\u8fc7\u7a0b\u3002\u6211\u4eec\u5728click\u4e2d\u5148\u628a\u91d1\u86cb\u4e2d\u7684\u7f16\u53f7\u6570\u5b57\u9690\u85cf\uff0c\u7136\u540e\u8c03\u7528\u81ea\u5b9a\u4e49\u51fd\u6570eggClick()\u3002<\/p>\n<\/p>\n<pre>$(\".eggList li\").click(function() { \r\n    $(this).children(\"span\").hide(); \r\n    eggClick($(this)); \r\n});<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u6700\u540e\uff0c\u5728\u81ea\u5b9a\u4e49\u51fd\u6570eggClick()\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528jQuery\u7684$.getJSON\u65b9\u6cd5\u5411\u540e\u53f0data.php\u53d1\u9001\u4e00\u4e2aajax\u8bf7\u6c42\uff0c\u540e\u53f0php\u7a0b\u5e8f\u4f1a\u5904\u7406\u5956\u9879\u5206\u914d\u5e76\u628a\u4e2d\u5956\u7ed3\u679c\u8fd4\u56de\u3002\u6211\u4eec\u4f7f\u7528animate()\u6765\u5b9e\u73b0\u7838\u9524\u5b50\u7684\u52a8\u753b\uff0c\u901a\u8fc7\u6539\u53d8\u9524\u5b50\u7684top\u548cleft\u4f4d\u5b50\u6765\u5b9e\u73b0\u7b80\u5355\u7684\u52a8\u753b\u6548\u679c\uff0c\u9524\u5b50\u7838\u4e0b\u53bb\u540e\uff0c\u91d1\u86cb\u6837\u5f0f\u53d8\u4e3a.curr\uff0c\u540c\u65f6\u91d1\u82b1\u56db\u6e85\uff0c\u7136\u540e\u4e2d\u5956\u7ed3\u679c.resultTip\u5c55\u793a\uff0c\u6709\u6ca1\u6709\u4e2d\u5956\u8981\u770b\u4f60\u7684\u8fd0\u6c14\u548c\u540e\u53f0\u5956\u9879\u8bbe\u7f6e\u7684\u4e2d\u5956\u51e0\u7387\u4e86\u3002\u6765\u770b\u7838\u91d1\u86cb\u51fd\u6570eggClick()\u7684\u4ee3\u7801<span>&nbsp;<\/span><\/p>\n<\/p>\n<pre>function eggClick(obj) { \r\n    var _this = obj; \r\n    $.getJSON(\"data.php\",function(res){\/\/ajax\u8bf7\u6c42 \r\n        _this.unbind('click'); \/\/\u89e3\u9664click \r\n        $(\".hammer\").css({\"top\":_this.position().top-55,\"left\":_this.position().left+185}); \r\n        $(\".hammer\").animate({\/\/\u9524\u5b50\u52a8\u753b \r\n            \"top\":_this.position().top-25, \r\n            \"left\":_this.position().left+125 \r\n            },30,function(){ \r\n                _this.addClass(\"curr\"); \/\/\u86cb\u788e\u6548\u679c \r\n                _this.find(\"sup\").show(); \/\/\u91d1\u82b1\u56db\u6e85 \r\n                $(\".hammer\").hide();\/\/\u9690\u85cf\u9524\u5b50 \r\n                $('.resultTip').css({display:'block',top:'100px',left:_this.position(). \r\n                left+45,opacity:0}) \r\n                .animate({top: '50px',opacity:1},300,function(){\/\/\u4e2d\u5956\u7ed3\u679c\u52a8\u753b \r\n                    if(res.msg==1){\/\/\u8fd4\u56de\u7ed3\u679c \r\n                        $(\"#result\").html(\"\u606d\u559c\uff0c\u60a8\u4e2d\u5f97\"+res.prize+\"!\"); \r\n                    }else{ \r\n                        $(\"#result\").html(\"\u5f88\u9057\u61be,\u60a8\u6ca1\u80fd\u4e2d\u5956!\"); \r\n                    } \r\n                });     \r\n            } \r\n        ); \r\n    }); \r\n}<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u4e3a\u4e86\u5c06\u7838\u91d1\u86cb\u7a0b\u5e8f\u66f4\u771f\u5b9e\u7684\u7ed3\u5408\u5230\u4f60\u7684\u7f51\u7ad9\u4e2d\uff0c\u4f60\u53ef\u4ee5\u5728\u7838\u86cb\u524d\u9a8c\u8bc1\u4f1a\u5458\u8eab\u4efd\uff0c\u9650\u5236\u7838\u86cb\u6b21\u6570\u3001\u7838\u86cb\u4e2d\u5956\u540e\u7559\u4e0b\u8054\u7cfb\u65b9\u5f0f\u7b49\u7b49\u63aa\u65bd\uff0c\u5177\u4f53\u770b\u7f51\u7ad9\u9700\u6c42\u4e86\u3002<\/p>\n<h4>PHP<\/h4>\n<p>data.php\u5904\u7406\u524d\u7aef\u53d1\u9001\u7684ajax\u8bf7\u6c42\uff0c\u6211\u4eec\u624d\u7528\u6982\u7387\u7b97\u6cd5\uff0c\u6839\u636e\u8bbe\u7f6e\u597d\u7684\u4e2d\u5956\u6982\u7387\uff0c\u5c06\u4e2d\u5956\u7ed3\u679c\u4ee5json\u7684\u683c\u5f0f\u8f93\u51fa\u3002&nbsp;<\/p>\n<\/p>\n<pre>$prize_arr = array( \r\n    '0' =&gt; array('id'=&gt;1,'prize'=&gt;'\u5e73\u677f\u7535\u8111','v'=&gt;3), \r\n    '1' =&gt; array('id'=&gt;2,'prize'=&gt;'\u6570\u7801\u76f8\u673a','v'=&gt;5), \r\n    '2' =&gt; array('id'=&gt;3,'prize'=&gt;'\u97f3\u7bb1\u8bbe\u5907','v'=&gt;10), \r\n    '3' =&gt; array('id'=&gt;4,'prize'=&gt;'4G\u4f18\u76d8','v'=&gt;12), \r\n    '4' =&gt; array('id'=&gt;5,'prize'=&gt;'Q\u5e0110\u5143','v'=&gt;20), \r\n    '5' =&gt; array('id'=&gt;6,'prize'=&gt;'\u4e0b\u6b21\u6ca1\u51c6\u5c31\u80fd\u4e2d\u54e6','v'=&gt;50), ); \r\n \r\nforeach ($prize_arr as $key =&gt; $val) { \r\n    $arr[$val['id']] = $val['v']; \r\n} \r\n \r\n$rid = getRand($arr); \/\/\u6839\u636e\u6982\u7387\u83b7\u53d6\u5956\u9879id $res['msg'] = ($rid==6)?0:1; \/\/\u5982\u679c\u4e3a0\u5219\u6ca1\u4e2d $res['prize'] = $prize_arr[$rid-1]['prize']; \/\/\u4e2d\u5956\u9879 echo json_encode($res); \r\n \r\n\/\/\u8ba1\u7b97\u6982\u7387 function getRand($proArr) { \r\n    $result = ''; \r\n \r\n    \/\/\u6982\u7387\u6570\u7ec4\u7684\u603b\u6982\u7387\u7cbe\u5ea6 \r\n    $proSum = array_sum($proArr); \r\n \r\n    \/\/\u6982\u7387\u6570\u7ec4\u5faa\u73af \r\n    foreach ($proArr as $key =&gt; $proCur) { \r\n        $randNum = mt_rand(1, $proSum); \r\n        if ($randNum &lt;= $proCur) { \r\n            $result = $key; \r\n            break; \r\n        } else { \r\n            $proSum -= $proCur; \r\n        } \r\n    } \r\n    unset ($proArr); \r\n \r\n    return $result; \r\n}<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u901a\u8fc7\u8bbe\u7f6e\u6982\u7387\uff0c\u6211\u4eec\u53ef\u4ee5\u770b\u51fa\uff0c\u7838\u4e2d\u5e73\u677f\u7535\u8111\u7684\u51e0\u7387\u53603%\uff0c\u7838\u4e0d\u4e2d\u7684\u51e0\u7387\u536050%\uff0c\u3002<\/p>\n<p>\u66f4\u591a\u5fae\u4fe1\u516c\u4f17\u5e73\u53f0\u5f00\u53d1\u7838\u91d1\u86cb\u76f8\u5173\u6587\u7ae0\u8bf7\u5173\u6ce8PHP\u4e2d\u6587\u7f51\uff01<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u7838\u91d1\u86cb\u88ab\u5e7f\u6cdb\u5e94\u7528\u4e8e\u5e86\u5178\u6d3b\u52a8\u3001\u5546\u5bb6\u4fc3\u9500\u3001\u7535\u89c6\u5a31\u4e50\u7b49\u573a\u5408\uff0c\u5b83\u7684\u8da3\u5473\u3001\u60ac\u5ff5\u80fd\u8fc5\u901f\u6d3b\u8dc3\u73b0\u573a\u6c14\u6c1b\u3002\u540c\u6837\uff0c\u6211\u4eec\u4e5f\u53ef\u4ee5\u5c06\u7838\u91d1\u86cb\u5e94\u7528\u5230web\u7f51\u7ad9\u4e0a\uff0c\u7528\u4e8e\u5f00\u5c55\u7ebf\u4e0a\u6d3b\u52a8\u3002\u672c\u6587\u5c06\u4f7f\u7528jquery\u4e0ephp\u8bb2\u89e3\u5982\u4f55\u5b9e\u73b0\u4e00\u4e2aweb\u7838\u91d1\u86cb\u7a0b\u5e8f\u3002 &nbsp; &nbsp; \u51c6\u5907 \u6211\u4eec\u9700\u8981\u51c6\u5907\u9053\u5177\uff08\u7d20\u6750\uff09\uff0c\u5373\u76f8\u5173\u56fe\u7247\uff0c\u5305\u62ec\u91d1\u86cb\u56fe\u7247\u3001\u86cb\u7838\u788e\u540e\u7684\u56fe\u7247\u3001\u7838\u788e\u540e\u7684\u788e\u82b1\u56fe\u7247\u3001\u4ee5\u53ca\u9524\u5b50\u56fe\u7247\u3002 HTML \u6211\u4eec\u9875\u9762\u4e0a\u8981\u5c55\u73b0\u7684\u662f\u4e00\u4e2a\u7838\u91d1\u86cb\u7684\u53f0\u5b50\uff0c\u53f0\u4e0a\u653e\u4e86\u7f16\u53f7\u4e3a1\uff0c2\uff0c3\u7684\u4e09\u4e2a\u91d1\u86cb\uff0c\u4ee5\u53ca\u4e00\u628a\u9524\u5b50\u3002\u6211\u4eec\u6784\u5efa\u4ee5\u4e0bhtml\u4ee3\u7801\uff1a &lt;p&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;\/p&gt; \u767b\u5f55\u540e\u590d\u5236 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \u9524\u5b50 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 3 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; \u4e0a\u8ff0\u4ee3\u7801\u4e2d\uff0c.hammer\u653e\u7f6e\u9524\u5b50\uff0c.resultTip\u7528\u4e8e\u7838\u86cb\u540e\u663e\u793a\u7684\u7ed3\u679c\uff0c\u5373\u6709\u6ca1\u6709\u4e2d\u5956\uff0c\u4e09\u4e2ali\u5206\u522b\u653e\u7f6e3\u4e2a\u91d1\u86cb\uff0c\u6211\u4eec\u7528CSS\u6765\u88c5\u9970\u4e0b\u6548\u679c\u3002 CSS .egg{width:660px;&nbsp;height:400px;&nbsp;margin:50px&nbsp;auto&nbsp;20px&nbsp;auto;}&nbsp; .egg&nbsp;ul&nbsp;li{z-index:999;}&nbsp; .eggList{padding-top:110px;position:relative;width:660px;}&nbsp; .eggList&nbsp;li{float:left;background:url(images\/egg_1.png)&nbsp;no-repeat&nbsp;bottom;width:158px;&nbsp; height:187px;cursor:pointer;position:relative;margin-left:35px;}&nbsp; .eggList&nbsp;li&nbsp;span{position:absolute;&nbsp;width:30px;&nbsp;height:60px;&nbsp;left:68px;&nbsp;top:64px;&nbsp;color:#ff0;&nbsp; &nbsp;font-size:42px;&nbsp;font-weight:bold}&nbsp; .eggList&nbsp;li.curr{background:url(images\/egg_2.png)&nbsp;no-repeat&nbsp;bottom;cursor:default;z-index:300;}&nbsp; .eggList&nbsp;li.curr&nbsp;sup{position:absolute;background:url(images\/img-4.png)&nbsp;no-repeat;width:232px;&nbsp;&nbsp; height:181px;top:-36px;left:-34px;z-index:800;}&nbsp; .hammer{background:url(images\/img-6.png)&nbsp;no-repeat;width:74px;height:87px;position:absolute;&nbsp;&nbsp; text-indent:-9999px;z-index:150;left:168px;top:100px;}&nbsp; .resultTip{position:absolute;&nbsp;background:#ffc&nbsp;;width:148px;padding:6px;z-index:500;top:200px;&nbsp;&nbsp; left:10px;&nbsp;color:#f60;&nbsp;text-align:center;overflow:hidden;display:none;z-index:500;}&nbsp; .resultTip&nbsp;b{font-size:14px;line-height:24px;} \u767b\u5f55\u540e\u590d\u5236 \u6309\u7167\u4e0a\u9762\u7684\u4ee3\u7801\u6211\u4eec\u53ef\u4ee5\u5728\u9875\u9762\u4e2d\u770b\u5230\u4e00\u4e2a\u5b8c\u6574\u7684\u7838\u91d1\u86cb\u573a\u666f\uff0c\u6ce8\u610f\u6211\u4eec\u4f7f\u7528\u4e86png\u56fe\u7247\uff0c\u5982\u679c\u4f60\u7684\u5ba2\u6237\u4ecd\u5728\u4f7f\u7528ie6\u7684\u8bdd\uff0c\u4f60\u53ef\u80fd\u9700\u8981\u5bf9png\u56fe\u7247\u7684\u900f\u660e\u505a\u5904\u7406\uff0c\u672c\u6587\u4e0d\u505a\u5904\u7406\u3002 jQuery \u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u8981\u7528jQuery\u4ee3\u7801\u6765\u5b9e\u73b0\u7838\u91d1\u86cb\u3001\u788e\u86cb\u3001\u5c55\u793a\u4e2d\u5956\u7ed3\u679c\u7684\u6574\u4e2a\u8fc7\u7a0b\u3002\u5f53\u7136\uff0c\u8001\u89c4\u77e9\uff0c\u5bf9\u4e8e\u624d\u7528jQuery\u5b9e\u73b0\u7684\u5b9e\u4f8b\u7a0b\u5e8f\uff0c\u4f60\u5fc5\u987b\u5148\u8f7d\u5165jQuery\u5e93\u6587\u4ef6\u3002 \u9996\u5148\uff0c\u5f53\u9f20\u6807\u6ed1\u5411\u91d1\u86cb\u65f6\uff0c\u7528\u4e8e\u7838\u91d1\u86cb\u7684\u9524\u5b50\u4f1a\u4ec5\u9760\u91d1\u86cb\u53f3\u4e0a\u65b9\uff0c\u53ef\u4ee5\u4f7f\u7528position()\u6765\u5b9a\u4f4d\u3002 $(&#8220;.eggList&nbsp;li&#8221;).hover(function()&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;posL&nbsp;=&nbsp;$(this).position().left&nbsp;+&nbsp;$(this).width();&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;$(&#8220;#hammer&#8221;).show().css(&#8216;left&#8217;,&nbsp;posL);&nbsp; }) \u767b\u5f55\u540e\u590d\u5236 \u7136\u540e\uff0c\u70b9\u51fb\u91d1\u86cb\uff0c\u5373\u6325\u52a8\u9524\u5b50\u7838\u5411\u91d1\u86cb\u7684\u8fc7\u7a0b\u3002\u6211\u4eec\u5728click\u4e2d\u5148\u628a\u91d1\u86cb\u4e2d\u7684\u7f16\u53f7\u6570\u5b57\u9690\u85cf\uff0c\u7136\u540e\u8c03\u7528\u81ea\u5b9a\u4e49\u51fd\u6570eggClick()\u3002 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-28729","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/28729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=28729"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/28729\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=28729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=28729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=28729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}