<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>Examples</title>
<meta name=”description” content=””>
<meta name=”keywords” content=””>
<script src=”http://www.millionser.com/Public/static/jquery-1.11.3.min.js”></script>
<style type=”text/css”>
.bangumi-player {
display: block;
position: relative;
width: 1160px;
height: 720px;
margin: 0 auto;
background-color: #333;
-webkit-box-shadow: #ddd 0 0 5px;
box-shadow: 0 0 5px #ddd;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABIgAAABFCAIAAACud0rtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA25pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpEREJBRjA3QjRDOTIxMUU2OThERkZFQzNERTNFM0JDNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxQTZERUM1RUNCNTAxMUU2QkU3NUFFMDg4MzM4RUY3NiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxQTZERUM1RENCNTAxMUU2QkU3NUFFMDg4MzM4RUY3NiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowZDllMGUzMy0yYmFlLTFhNDQtOTQwMC0wZjY1NmE0MWY4ZmYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RERCQUYwN0I0QzkyMTFFNjk4REZGRUMzREUzRTNCQzUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5v9ylrAAAHsklEQVR42uzd7WsbyQEHYO+LVqvYTuIPgbitAw53R3u0KaXQ//8KV7hAc7QpCb2DBK5wDpjiXGxHb7urjh0ovrSRZMnyarXPQ0hsaXd2dmYVz8+zL9HxyekWAAAA9YmKstQKAAAANYo1AQAAgGAGAAAgmAEAACCYAQAACGYAAADUI51nodOzs++/++7D1wcHBw8ePLipzRdVNRwVRfinqsK3URwlSZJ10jSJ42gr0j8AAA0RhnP9/iAM7CaTSUt2OYqiNE17vTyO4xtvn5UWfstbYZ7Wnut2+V999eeiLP777f7D/cPDw1DiUpGsvIhkZVXlWScLOSy5qFxVVuG1wWg8iaIQzy5ev9gBnQgAsO6p7PT0rJ3j9TDa3t3dmR5sFm6flRZ+y1themvPdSrj1VQWHL05evr06evXr0NcXqw2o3F5ej4IuWtv906v20mSOISv8Cd8Eb4NL97J0uFg+H5UVFtbeh8AYM31+4PWDtnDjofdX1H7rLTwW94K01t7wWvMQlR79fr1N988PTp6c911y6o67w/v7fTybudTy+RZ5+52rxiO+uOy0nsAAOtt4d/Xt2T3l2mflRZ+y1thSmMudfOPwXDw4uWLZ8+enZyczL/WcFjs9LqdNJm+WFggLDYYFaNKOAcAWGstH67N3P1l2melhd/yVpjSmDdwV8aTt2+fffvtixcvZ06Abl1OlxVVNWWu7KqwWBZNRkVl0gwAANhg6U0VdPTm6Pj4+NGjg8PDwymLDUdFnnXmLzYsfP6+f9ovdRUAQC263azX62kHWKmbfI7ZhwvPgmnLFFU26yTGqy4WdltGAID6DIejeU6MAtYlmH3www//mvJuWVVJco2NXi4smAEA1Gk0GmmEjVeWTlLbrGD20b31l+QqQwAAuAVJkmiEjQpme/fvT+vvOC6vcwP8qgrBTDYDAKhTlmUaAZoUzHZ3dp48eTJlgTSNR8U1JkkvFjZpBgBQn8ubf+TaAVYqvcGyHh8eHhwcpOm0MrtZet4f9brz3phxMBrHeW8nSxIXmgEAAILZFPsP9w8PD+f5VUoSx2kSD4bjeR5lFhYbT6KdNI6lMgCANRZFUZtvDRDNuov4Mu0zs/CqquI41sVNP2CWDWZ79+9//sUXuzs786/SzdJ3Z4MkiTtT75s/Lsqz/rCbd9PY/fIBANZamqbj8bjNu7+69plZeLfbXb7xV7oLzNPaiwezvJt/+eVv9vb2rrtiEsfbve5PZ/2dXvdT82aD0fi8P0y7Wa+TxLoOAGC95XleFEU7Z1SiKAq7v6L2WWnhV7cy8xnibe7i2zlgomKO5xV8/fVfBsPB1Uj2+PHj/f2Hy1SoKKvhKPxV5Vkn6yQhrYVurqpJeC2ksnIr6mZpN718ipn5MgCAtVdVVb8/aNXYPYyw0zTt9fJ5ziS8bvustPBb3grztPZcwez4+Pjvz5+HL9IkffToYOYdPq4Xz8ahc0MvX9xDPwp1vDjFMc3SWCQDAADaEtsKT/gGAAColQu4AAAABDMAAADBDAAAAMEMAABAMAMAAKAm6cm791oBAACgRq27XX4IonfyVMcDAABroptlTmUEAAComWAGAABQszae1BdFkY4HAAAEMwAAgMX9+NP5P75/lQ3eJZOqKXUuo3iU3/3t549/cW/7o7ecyggAADQulZ29fP63Xv9tg1JZEGob6hxqHur/0VutPJVxy6mMAADQYH/956v7k6beXj6blKH+v/zT76++aMYMAABomO3h6YbVXzADAAAaprNVbVj9W3nzD2cyAgAA65RKZgezqqr6/UFRFJPJZK7yoyhN014vj+P4xgu/kY1Oqcx4NC7LcsnKQJ0f8ChKkqSTdZb5LAAAjbMxQ9nWDmbSmR18enp2rd4NC4/H45C1dnd3prfmAoUvv9GtT0yYhcoM+gORjKYLx3D4IIT/lJf8PQUA0KxUtjFD2fYMZqJrBbP+oh0c1grrbm/fWUXhy2z0Qwz/39dGo7FUxibFs3BI571cUwBAG2zeULYVg5mfp5IZwSyk1YU3NHPdZQpfpsz/O2MWQrmPNJskHNKupgSA9vzcN5hpXi77+bfpzKi6TMxdXeHLlRndTmWgRpeHtGgGAO35uW8w0+xo5hIUAACAmglmAAAANfMcM3CoAwAYzNS8d6n+BYc6AIDBTL1751RGAACAmrXzVEYTCTjUAQAMZtZo75zKCA51AACDmZr3zqmMAAAANZsxYxZF0cKPq4tmzTwuU/jCG/1U9l5FZaBGl58Fc2YA0Jaf+5s3lG3BYOY6D5hO08XPdZy57jKF33iZq6gM1MghDQB+7tupBpkRzPI8jxa65C6sFdZdUeHLbPTWKgM1WuazAAA0zuYNZVs4mJkRQ5Mk3t3d6fcHRVHMOT0aGjGk214vj+P4xgtffqNbn7i5yw1WBur9X2z+zwIAsBk2aSjbnsFMdN0HTIcW2d6+s6LarLTwRlcGAAAMZVvUg5oAAABoliKKN6z+ghkAANAwg/zuhtVfMAMAABrmj7/+bBQlDa18qHmov2AGAAA026/27n72uz/8O7s3blSiCbUNdQ41D/X/6K2oKMtWdeHJu/d7d10WCQAArBEzZgAAAIIZAACAYAYAAIBgBgAA0F7/EWAAYsKXUntrkGAAAAAASUVORK5CYII=);
background-position: bottom;
background-repeat: no-repeat
}
.bangumi-player.no-select {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none
}
.bangumi-player.no-select.mini-player:before {
z-index: 1000
}
.bangumi-player.mini-player {
position: fixed;
width: 320px;
height: 270px;
overflow: visible;
z-index: 10010;
-webkit-box-shadow: none;
box-shadow: none;
background-color: transparent
}
.bangumi-player.mini-player:before {
content: “”;
display: block;
position: absolute;
bottom: 0;
width: 320px;
height: 240px;
-webkit-box-shadow: #ddd 0 0 5px;
box-shadow: 0 0 5px #ddd;
z-index: -1
}
.bangumi-player.mini-player:hover .mini-player-move {
opacity: 1
}
.bangumi-player.mini-player .bgray-btn-wrap {
display: none
}
.bangumi-player.mini-player .mini-player-move {
display: block;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
background-color: #fff;
-webkit-box-shadow: #ddd 0 0 5px;
box-shadow: 0 0 5px #ddd;
cursor: move
}
.bangumi-player.mini-player .mini-player-move.on {
opacity: 1
}
.bangumi-player.mini-player .mini-player-move span {
display: block;
background: #fff url(//s1.hdslb.com/bfs/static/bangumi/play/images/icons.png?v=1) -463px -1872px no-repeat;
width: 36px;
height: 100%;
margin: 0 auto
}
.bangumi-player.mini-player .mini-player-move i {
position: absolute;
top: 0;
right: 0;
height: 30px;
width: 40px;
background: #fff url(//s1.hdslb.com/bfs/static/bangumi/play/images/icons.png?v=1) -525px -1872px no-repeat;
cursor: pointer
}
.bangumi-player.mini-player .player-content {
margin-top: 30px;
height: 240px;
background-color: #fff;
overflow: hidden
}
.bangumi-player.mini-player .player-content.webfullscreen .player {
height: 100%
}
.bangumi-player.mini-player .player-content .player {
height: 240px;
overflow: hidden
}
.bangumi-player .player-content {
position: relative;
width: 100%
}
.bangumi-player .player-content.heimu {
z-index: 10020
}
.bangumi-player .player-content.webfullscreen .player {
height: 100%
}
.bangumi-player .player-content .player {
display: block;
position: relative;
width: 100%;
height: 720px
}
.bangumi-player .player-limit-wrap,.bangumi-player embed {
width: 100%;
height: 720px
}
.bangumi-player embed {
display: block
}
.bangumi-player #heimu {
display: none;
background-color: #000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10015
}
</style>
</head>
<body>
<div style=”border: 1px solid #000;height: 1080px;width: 100%”>
<div id=”spig” class=”bangumi-player mini-player” style=”left: 96px; top: 412px;”>
<!– <div class=”bgray-btn-wrap”>
<div class=”bgray-btn”>
Flash
<br />播放器
</div>
<div class=”bgray-btn”>
HTML5
<br />播放器
</div>
<div class=”bgray-btn show bgray-btn-feedback”>
播放
<br />问题
<br />反馈
</div>
<div class=”bgray-btn show bgray-btn-help”>
帮助
</div>
</div> –>
<div id=”bofqi” class=”player-content” style=”display:;border: 0px solid #000;”>
<!– <object type=”application/x-shockwave-flash” class=”player” data=”//static.hdslb.com/play.swf” width=”950″ height=”482″ id=”player_placeholder” style=”visibility: visible;”><param name=”bgcolor” value=”#ffffff”></param><param name=”allowfullscreeninteractive” value=”true”></param><param name=”allowfullscreen” value=”true”></param><param name=”quality” value=”high”></param><param name=”allowscriptaccess” value=”always”></param><param name=”wmode” value=”direct”></param><param name=”flashvars” value=”cid=29379505&aid=17995657&season_type=1&lastplaytime=0&has_next=0&player_type=1&urlparam=module%3Dbangumi%26season_type%3D1&seasonId=21750&episodeId=171434&record=”></param></object> –>
</div>
<!—->
<!—->
<div class=”mini-player-move”>
<span title=”点击按住拖动”></span>
<i></i>
</div>
<div id=”heimu”></div>
</div>
</div>
<script type=”text/javascript”>
//拖动
var _move = false;
var ismove = false; //移动标记
var _x, _y; //鼠标离控件左上角的相对位置
jQuery(document).ready(function ($) {
$(“#spig”).mousedown(function (e) {
_move = true;
_x = e.pageX – parseInt($(“#spig”).css(“left”));
_y = e.pageY – parseInt($(“#spig”).css(“top”));
});
$(document).mousemove(function (e) {
if (_move) {
var x = e.pageX – _x;
var y = e.pageY – _y;
var wx = $(window).width() – $(‘#spig’).width();
var dy = $(document).height() – $(‘#spig’).height();
if(x >= 0 && x <= wx && y > 0 && y <= dy) {
$(“#spig”).css({
top: y,
left: x
}); //控件新位置
ismove = true;
}
}
}).mouseup(function () {
_move = false;
});
});
</script>
</body>
</html>
（文章今日已有 1 人访问，总访问量 5 ::>_<::）