H5实现仿flash效果的实现代码

H5实现仿flash效果的实现代码

H5实现仿flash效果的实现代码

随着H5的火热，flash即将被H5所代替，如何利用H5实现flash的效果呢？我做了一个简单的小东西分享给大家。

html和js部分：

css部分：

body{

background: #666;

}

ul{

padding: 0;

margin: 0;

}

li{

list-style: none;

}

img{

border:0;

width: 100%;

height: 100%;

}

.play{

width: 400px;

height: 430px;

margin: 50px auto 0;

background: #999;

font: 12px Arial;

}

.big_pic{

width: 400px;

height: 320phWHrltEpx;

overflow: hidden;

border-bottom: 1px solid #ccc;

background: #222;

position: relative;

}

.big_pic img{

width: 400px;

height: 320px;

}

.big_pic li{

width: 400px;

height: 320px;

overflow: hidden;

position: absolute;

top:0;

left:0;

z-index: 0;

}

.mark_left{

width: 200px;

height: 320px;

position: absolute;

left: 0;

top:0;

/*background: red;*/

opacity: 0;

z-index: 3000;

}

.mark_right{

width: 200px;

height: 320px;

position: absolute;

left: 200px;

top:0;

/*background: green;*/

opacity: 0;

z-index: 3000;

}

.big_pic .prev{

width: 60px;

height: 60px;

background-image: url("../../img/练习/left.jpg");

background-size: cover;

position: absolute;

top: 130px;

left: 10px;

z-index: 3001;

opacity: 0;

cursor: pointer;

}

.big_pic .next{

width: 60px;

height: 60px;

background-image: url("../../img/练习/right.jpg");

background-size: cover;

background-position: 65px 60px;

position: absolute;

top: 130px;

right: 10px;

z-index: 3001;

opacity: 0;

cursor: pointer;

}

.big_pic .text{

position: absolute;

left: 10px;

bottom: 4px;

z-index: 3000;

color: #ccc;

}

.big_pic .length{

position: absolute;

right: 10px;

bottom: 4px;

z-index: 3000;

color: #ccc;

}

.big_pic .bg{

width: 400px;

height: 25px;

background: #000;

opacity: 0.6;

position: absolute;

z-index: 2999;

bottom: 0;

left:0;

}

.small_pic{

width: 380px;

height: 94px;

position: relative;

top: 7px;

left: 10px;

overflow: hidden;

}

.small_pic ul{

height: 94px;

position: absolute;

top:0;

left: 0;

}

.small_pic li{

width: 120px;

height: 94px;

float: left;

padding-right: 10px;

cursor: pointer;

opacity: 0.6;

}

效果图展示：

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。