<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <style> .main{ width:600px; height:600px; /*background:red*/; padding:10px; } .yk-hpanel-code{ height: auto; left: 0; position: absolute; top: 0; width: auto; } .ykcode-flag{ cursor: pointer; height: 35px; left: 0; position: absolute; top: 0; width: 35px; } .ykcode-flag:hover span{ background-position:0 -100px; } .ykcode-flag span{ background: url("http://static.youku.com/index/img/header/header.png") no-repeat scroll -40px -100px transparent; display: block; height: 100%; width: 100%; } .ykcode-cover{ display: none; height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: 200; } .ykcode-cover-img { height: 100%; left: 0; position: relative; top: 0; transform-origin: right top 0; width: 100%; } .ykcode-container { background: url("http://static.youku.com/index/img/toolbar/codebk.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0); display: none; height: 214px; left: 0; margin: 0 auto; min-height: 154px; overflow: hidden; padding: 60px 0 0; position: relative; text-align: center; top: 0; width: 330px; } .yk-hpanel-user-info { background: none repeat scroll 0 0 #f5f5f5; padding: 20px 0 20px 20px; position: relative; } .panel { background: none repeat scroll 0 0 #fff; border-left: 1px solid #ccc; box-shadow: 0 0 10px #bbb; box-sizing: border-box; color: #555; height: 400px; padding: 0; position: absolute; text-align: left; top: 60px; width: 330px; z-index: 10; } </style> </head> <body> <div class="panel"> <div class="yk-hpanel-user-info"> <div class="yk-hpanel-user-avatar">內容1</div> <div class="yk-hpanel-user-profile">內容2</div> <div class="yk-hpanel-code"> <div class="ykcode-flag"> <span></span> </div> <div class="ykcode-cover"> <img class="ykcode-cover-img" src="http://static.youku.com/index/img/toolbar/codecover.png"> </div> <div class="ykcode-container"></div> </div> </div> </div> </body> <script> $(function(){ $(".ykcode-flag").mouseenter(function(event) { event.stopPropagation(); $(".ykcode-cover").css({ width: "32px", height: "32px", zIndex: "100", overflow: "hidden" }); $(".ykcode-cover").show(); }).mouseleave(function(event) { event.stopPropagation(); //$(".ykcode-cover").hide(); });; $(".ykcode-cover").click(function(e){ var cover = $(this); var code = cover.parent(); code.find(".ykcode-flag").hide(); cover = code.find(".ykcode-cover"), cover_img = cover.find(".ykcode-cover-img"); container = code.find(".ykcode-container"), container.css("display","block"); var timer = 300; /*關鍵這裏要同步動畫*/ cover.animate({ width: "330px", height: "274px" },timer); code.on("hover", function() { return false; }).css({ width: "32px", height: "32px", zIndex: "100", overflow: "hidden" }).animate({ width: "330px", height: "274px" }, timer, function() { cover_img.css({ "transition": "transform 0.35s", "-webkit-transition": "-webkit-transform 0.35s", "-moz-transition": "-moz-transform 0.35s", "-o-transition": "-o-transform 0.35s", "-ms-transition": "-ms-transform 0.35s", "transform": "rotate(-55deg)", "-webkit-transform": "rotate(-55deg)", "-moz-transform": "rotate(-55deg)", "-o-transform": "rotate(-55deg)", "-ms-transform": "rotate(-55deg)" }); cover.delay(timer + 350).hide(1); }); }); }); </script> </html>
稍微看了一下優酷是怎麼寫的,而後把有用部分的代碼摳出來,進行一些精簡。css