html5左侧d出菜单怎样实现

这个可以通过绝对定位，配合left设置 或者translate去实现

left的方法：

比如让class为menu的元素宽为300px，高100%的，设置left为-300px；在这期间可以加一个过渡transition:left 0.3s ...；

然后让class为menu active的元素设置 left设置为0就可以了 ，在这期间可以加一个过渡transition:left 0.3s ...；

然后可以通过Jquery的toggleClass('active')来实现切换

translate

比如让class为menu的元素宽为300px，高100%的，设置left为-300px；在这期间可以加一个过渡transition:left 0.3s ...；

然后让class为menu active的元素设置 transform:translate3d(-300px,0,0) ，在这期间可以加一个过渡transition:left 0.3s ...；

然后可以通过Jquery的toggleClass('active')来实现切换

这个过程中 需要注意 body需要overflow：hidden(不然会有滚动条，可设置overflow-x即可)

left 和 translate 最好用translate ，translate3d可以开启GPU硬件加速，性能会更好，体验会更流畅

我github有类似小组件样式

github： IFmiss

希望能解决你的问题

全屏代码没有在，你的只是播放而已

要全屏F11即可，

全屏代码存在兼容性问题，你的这个浏览器应该可以

Option.prototype.toggleFullscreen = function() {

if ((document.fullScreenElement &&document.fullScreenElement !== null) ||

(!document.mozFullScreen &&!document.webkitIsFullScreen)) {

this.enterFullscreen(document.documentElement)

} else {

this.cancelFullscreen()

}

}

Option.prototype.enterFullscreen = function(docElm) {

if (docElm.requestFullscreen) {

docElm.requestFullscreen()

}

else if (docElm.mozRequestFullScreen) {

docElm.mozRequestFullScreen()

}

else if (docElm.webkitRequestFullScreen) {

docElm.webkitRequestFullScreen()

}

}

Option.prototype.cancelFullscreen = function(){

if (document.exitFullscreen) {

document.exitFullscreen()

}

else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen()

}

else if (document.webkitCancelFullScreen) {

document.webkitCancelFullScreen()

}

}

---