{"id":1128,"date":"2017-03-12T16:40:15","date_gmt":"2017-03-12T08:40:15","guid":{"rendered":"http:\/\/www.xttblog.com\/?p=1128"},"modified":"2017-03-12T16:40:15","modified_gmt":"2017-03-12T08:40:15","slug":"html5%e5%ae%9e%e7%8e%b0%e6%bb%91%e5%8a%a8%e9%aa%8c%e8%af%81%e7%a0%81","status":"publish","type":"post","link":"https:\/\/www.xttblog.com\/?p=1128","title":{"rendered":"HTML5\u5b9e\u73b0\u6ed1\u52a8\u9a8c\u8bc1\u7801"},"content":{"rendered":"

\n\t\u5728\u524d\u9762\u7684\u4e00\u7bc7\u6587\u7ae0\u4e2d\uff0c\u6211\u8be6\u7ec6\u7684\u5206\u6790\u4e86\u6ed1\u52a8\u9a8c\u8bc1\u7801\u7684\u5b9e\u73b0\u539f\u7406<\/a>\u3002\u5728\u672c\u6587\u4e2d\uff0c\u6211\u4eec\u5728\u901a\u8fc7\u5b9e\u73b0\u6ed1\u52a8\u9a8c\u8bc1\u7801\u7684\u6848\u4f8b\u548c\u4ee3\u7801\u8fdb\u4e00\u6b65\u52a0\u6df1\u7406\u89e3\u3002\n<\/p>\n

\n\t\u6211\u4eec\u5148\u6765\u770b\u4e00\u4e0b\u6700\u7ec8\u7684\u5b9e\u73b0\u6548\u679c\uff1a\n<\/p>\n

\n\t\"html5\u5b9e\u73b0\u6ed1\u52a8\u9a8c\u8bc1\u7801\"\n<\/p>\n

\n\t\u6ed1\u52a8\u9a8c\u8bc1\u7801\u5b9e\u73b0\u8fc7\u7a0b
\n<\/h2>\n
    \n
  1. \n\t\t\u5148\u5b9e\u73b0\u4e00\u4e2adiv\uff0c\u5185\u5bb9\u4fbf\u662f“\u62d6\u52a8\u6ed1\u5757\u9a8c\u8bc1”\uff0c\u8bbe\u7f6e\u5176\u4e0d\u53ef\u6846\u9009\u3002\u80cc\u666f\u4e3a\u7070\u8272\u3002\n\t<\/li>\n
  2. \n\t\t\u5728\u7f16\u5199\u4e00\u4e2adiv\uff0c\u5bbd\u4e3a\u6ed1\u5757\u7684\u5bbd\u5ea6\u3002\u80cc\u666f\u4e3a\u5411\u53f3\u7684\u7bad\u5934\uff0c\u5b9a\u4f4d\u5728\u6ed1\u5757\u6846\u7684\u5de6\u4fa7\u3002\n\t<\/li>\n
  3. \n\t\t\u7ed9\u5de6\u4fa7\u7684\u6ed1\u5757\u6dfb\u52a0\u79fb\u52a8\u4e8b\u4ef6\u3002mousemove\u3001mousedown\u3001mouseup\u3001selectstart4\u4e2a\u4e8b\u4ef6\u3002\n\t<\/li>\n
  4. \n\t\t\u5728\u79fb\u52a8\u8fc7\u7a0b\u4e2d\uff0c\u586b\u5145\u5de6\u4fa7\u79fb\u52a8\u5bbd\u5ea6\u7684\u80cc\u666f\u989c\u8272\u3002\u53ef\u4ee5\u7528\u4e00\u4e2adiv\u6765\u5b9e\u73b0\uff0c\u540c\u6837\u7684\u5b9a\u4f4d\u5230\u6ed1\u52a8\u6846\u4e0a\u3002\n\t<\/li>\n
  5. \n\t\t\u6ed1\u52a8\u5b8c\u6210\u540e\uff0c\u5c06\u6ed1\u5757\u5b9a\u4f4d\u5230\u6700\u53f3\u4fa7\uff0c\u5e76\u6539\u53d8\u80cc\u666f\u989c\u8272\u4e3a\u6210\u529f\u3002\n\t<\/li>\n
  6. \n\t\t\u79fb\u52a8\u672a\u5b8c\u6210\uff0c\u6ed1\u5757\u5219\u6b62\u4e3a\u521d\u59cb\u4f4d\u7f6e\u3002\n\t<\/li>\n<\/ol>\n

    \n\t\u6ed1\u52a8\u9a8c\u8bc1\u7801\u5b9e\u73b0\u4ee3\u7801
    \n<\/h2>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>\u4e1a\u4f59\u8349\uff1aHTML5\u5b9e\u73b0\u6ed1\u52a8\u9a8c\u8bc1\u7801<\/title>\r\n<meta charset="utf-8"\/>\r\n<type="text\/css">\r\n#drag{ \r\n    position: relative;\r\n    background-color: #e8e8e8;\r\n    width: 300px;\r\n    height: 34px;\r\n    line-height: 34px;\r\n    text-align: center;\r\n}\r\n#drag .handler{\r\n    position: absolute;\r\n    top: 0px;\r\n    left: 0px;\r\n    width: 40px;\r\n    height: 32px;\r\n    border: 1px solid #ccc;\r\n    cursor: move;\r\n}\r\n.handler_bg{\r\n    background: #fff url("data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8\/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw\/eHBhY2tldCBiZWdpbj0i77u\/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi\/P\/\/PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk\/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;\r\n}\r\n.handler_ok_bg{\r\n    background: #fff url("data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8\/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw\/eHBhY2tldCBiZWdpbj0i77u\/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi\/P\/\/PwMyKD8uZw+kUoDYEYgloMIvgHg\/EM\/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp\/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia\/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;\r\n}\r\n#drag .drag_bg{\r\n    background-color: #7ac23c;\r\n    height: 34px;\r\n    width: 0px;\r\n}\r\n#drag .drag_text{\r\n    position: absolute;\r\n    top: 0px;\r\n    width: 300px;\r\n    -moz-user-select: none;\r\n    -webkit-user-select: none;\r\n    user-select: none;\r\n    -o-user-select:none;\r\n    -ms-user-select:none; \r\n}\r\n<\/style>\r\n<script src="js\/jquery-1.7.2.min.js" type="text\/javascript"><\/script>\r\n<script type="text\/javascript">\r\n\/\/\u672c\u6587\u4f5c\u8005\uff1a\u4e1a\u4f59\u8349\uff0cwww.xttblog.com\r\n    (function($){\r\n    $.fn.drag = function(options){\r\n        var x, drag = this, isMove = false, defaults = {\r\n        };\r\n        var options = $.extend(defaults, options);\r\n        \/\/\u6dfb\u52a0\u80cc\u666f\uff0c\u6587\u5b57\uff0c\u6ed1\u5757\r\n        var html = '<div class="drag_bg"><\/div>'+\r\n                    '<div class="drag_text" onselectstart="return false;" unselectable="on">\u62d6\u52a8\u6ed1\u5757\u9a8c\u8bc1<\/div>'+\r\n                    '<div class="handler handler_bg"><\/div>';\r\n        this.append(html);\r\n        \r\n        var handler = drag.find('.handler');\r\n        var drag_bg = drag.find('.drag_bg');\r\n        var text = drag.find('.drag_text');\r\n        var maxWidth = drag.width() - handler.width();  \/\/\u80fd\u6ed1\u52a8\u7684\u6700\u5927\u95f4\u8ddd\r\n        \r\n        \/\/\u9f20\u6807\u6309\u4e0b\u65f6\u5019\u7684x\u8f74\u7684\u4f4d\u7f6e\r\n        handler.mousedown(function(e){\r\n            isMove = true;\r\n            x = e.pageX - parseInt(handler.css('left'), 10);\r\n        });\r\n        \r\n        \/\/\u9f20\u6807\u6307\u9488\u5728\u4e0a\u4e0b\u6587\u79fb\u52a8\u65f6\uff0c\u79fb\u52a8\u8ddd\u79bb\u5927\u4e8e0\u5c0f\u4e8e\u6700\u5927\u95f4\u8ddd\uff0c\u6ed1\u5757x\u8f74\u4f4d\u7f6e\u7b49\u4e8e\u9f20\u6807\u79fb\u52a8\u8ddd\u79bb\r\n        $(document).mousemove(function(e){\r\n            var _x = e.pageX - x;\r\n            if(isMove){\r\n                if(_x > 0 && _x <= maxWidth){\r\n                    handler.css({'left': _x});\r\n                    drag_bg.css({'width': _x});\r\n                }else if(_x > maxWidth){  \/\/\u9f20\u6807\u6307\u9488\u79fb\u52a8\u8ddd\u79bb\u8fbe\u5230\u6700\u5927\u65f6\u6e05\u7a7a\u4e8b\u4ef6\r\n                    dragOk();\r\n                }\r\n            }\r\n        }).mouseup(function(e){\r\n            isMove = false;\r\n            var _x = e.pageX - x;\r\n            if(_x < maxWidth){ \/\/\u9f20\u6807\u677e\u5f00\u65f6\uff0c\u5982\u679c\u6ca1\u6709\u8fbe\u5230\u6700\u5927\u8ddd\u79bb\u4f4d\u7f6e\uff0c\u6ed1\u5757\u5c31\u8fd4\u56de\u521d\u59cb\u4f4d\u7f6e\r\n                handler.css({'left': 0});\r\n                drag_bg.css({'width': 0});\r\n            }\r\n        });\r\n        \r\n        \/\/\u6e05\u7a7a\u4e8b\u4ef6\r\n        function dragOk(){\r\n            handler.removeClass('handler_bg').addClass('handler_ok_bg');\r\n            text.text('\u9a8c\u8bc1\u901a\u8fc7');\r\n            drag.css({'color': '#fff'});\r\n            handler.unbind('mousedown');\r\n            $(document).unbind('mousemove');\r\n            $(document).unbind('mouseup');\r\n        }\r\n    };\r\n})(jQuery);\r\n<\/script>\r\n<\/head>\r\n<body>\r\n<div id="drag"><\/div>\r\n<script type="text\/javascript">\r\n$('#drag').drag();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
    \n\t\u600e\u4e48\u6837\uff0c\u770b\u8d77\u6765\uff0c\u5f88\u7b80\u5355\u5427\u3002\u6211\u8fd9\u91cc\u4f7f\u7528\u4e86\u4e00\u4e9bHTML5<\/a>\u548cCSS3<\/a>\u7684\u4e00\u4e9b\u7279\u6027\u3002\u5927\u5bb6\u5728\u4fee\u6539\u4e00\u4e0b\u517c\u5bb9\u6027\uff0c\u505a\u4e00\u4e9b\u98ce\u9669\u63a7\u5236\uff0c\u5c31\u53ef\u4ee5\u5e94\u7528\u5230\u5b9e\u9645\u7684\u9879\u76ee\u4e2d\u4e86\u3002<\/p>\n
    \"\u4e1a\u4f59\u8349\u516c\u4f17\u53f7\"\/<\/p>
    \u6700\u540e\uff0c\u6b22\u8fce\u5173\u6ce8\u6211\u7684\u4e2a\u4eba\u5fae\u4fe1\u516c\u4f17\u53f7\uff1a\u4e1a\u4f59\u8349\uff08yyucao\uff09\uff01\u53ef\u52a0\u4f5c\u8005\u5fae\u4fe1\u53f7\uff1axttblog2<\/font>\u3002\u5907\u6ce8\uff1a\u201c1\u201d\uff0c\u6dfb\u52a0\u535a\u4e3b\u5fae\u4fe1\u62c9\u4f60\u8fdb\u5fae\u4fe1\u7fa4\u3002\u5907\u6ce8\u9519\u8bef\u4e0d\u4f1a\u540c\u610f\u597d\u53cb\u7533\u8bf7\u3002<\/b>\u518d\u6b21\u611f\u8c22\u60a8\u7684\u5173\u6ce8\uff01\u540e\u7eed\u6709\u7cbe\u5f69\u5185\u5bb9\u4f1a\u7b2c\u4e00\u65f6\u95f4\u53d1\u7ed9\u60a8\uff01\u539f\u521b\u6587\u7ae0\u6295\u7a3f\u8bf7\u53d1\u9001\u81f3532009913@qq.com\u90ae\u7bb1\u3002\u5546\u52a1\u5408\u4f5c\u4e5f\u53ef\u6dfb\u52a0\u4f5c\u8005\u5fae\u4fe1\u8fdb\u884c\u8054\u7cfb\uff01<\/p>
    \u672c\u6587\u539f\u6587\u51fa\u5904\uff1a\u4e1a\u4f59\u8349<\/a>\uff1a » HTML5\u5b9e\u73b0\u6ed1\u52a8\u9a8c\u8bc1\u7801<\/a><\/p>","protected":false},"excerpt":{"rendered":"
    \u5728\u524d\u9762\u7684\u4e00\u7bc7\u6587\u7ae0\u4e2d\uff0c\u6211\u8be6\u7ec6\u7684\u5206\u6790\u4e86\u6ed1\u52a8\u9a8c\u8bc1\u7801\u7684\u5b9e\u73b0\u539f\u7406\u3002\u5728\u672c\u6587\u4e2d\uff0c\u6211\u4eec\u5728\u901a\u8fc7\u5b9e\u73b0\u6ed1\u52a8\u9a8c\u8bc1\u7801\u7684\u6848\u4f8b\u548c\u4ee3\u7801\u8fdb\u4e00\u6b65\u52a0 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[814,119,882,880,881],"class_list":["post-1128","post","type-post","status-publish","format-standard","hentry","category-html5","tag-css3","tag-html5","tag-jqueyr","tag-880","tag-881"],"_links":{"self":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/1128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1128"}],"version-history":[{"count":1,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/1128\/revisions"}],"predecessor-version":[{"id":1129,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/1128\/revisions\/1129"}],"wp:attachment":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}