用chrome观看体验镜像电影

2017-04-19  本文已影响13人  横冲直撞666

<select>

<option>left</option>

<option selected>right</option>

<option>above</option>

<option>below</option>

</select>

<video autoplay="true" loop="true" width="480" height="270">

<source src="http://www.tofei.cc/comments/4_BlowVido/video/BigBuckBunny_640x360.mp4">

<source src="http://www.tofei.cc/comments/4_BlowVido/video/BigBuckBunny_640x360.ogv">

</video>

<style>

video{

-webkit-box-reflect:right;

}

.left{

margin:0 0 0 480px;

}

.above{

margin:270px 0 0 0;

}

更多资料免费分享加群     120342833      验证回答      ZZ

select{

width:120px;

height:30px;

background:#FF6100;

color:white;

margin:15px;

border: 1px solid #999999;

display:block;

}

</style>

<script>

var video = document.querySelector('video');

var select = document.querySelector('select');

select.addEventListener('change', function() {

video.style.webkitBoxReflect = this.value;

video.className = this.value;

});

</script>

上一篇下一篇

猜你喜欢

热点阅读