Maison >interface Web >js tutoriel >Exemple d'effet flash imitation H5
Cet article présente principalement les informations pertinentes sur le code d'implémentation de H5 pour obtenir un effet flash d'imitation. J'espère que cet article pourra aider tout le monde à réaliser une telle fonction. J'espère qu'il pourra aider tout le monde. .
Code d'implémentation H5 pour obtenir un effet de type flash
Avec la popularité de H5, le flash sera remplacé par H5 Comment utiliser H5 pour obtenir le flash. effet? ? J'ai fait une petite chose simple à partager avec vous.
partie html et js :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jsByKing.js"></script>
<link rel="stylesheet" href="仿flash的css.css" rel="external nofollow" >
<script>
function getByClass(oParent,sClass) {
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
for(var i=0;i<aEle.length;i++){
if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
}
return aResult;
}
//左右箭头
window.onload=function () {
var op=document.getElementById('playimages');
var oBtnPrev=getByClass(op,'prev')[0];
var oBtnNext=getByClass(op,'next')[0];
var oMarkLeft=getByClass(op,'mark_left')[0];
var oMarkRight=getByClass(op,'mark_right')[0];
var opSmall=getByClass(op,'small_pic')[0];
var oUlSmall=opSmall.getElementsByTagName('ul')[0];
var aLiSmall=opSmall.getElementsByTagName('li');
var oUlBig=getByClass(op,'big_pic')[0];
var aLiBig=oUlBig.getElementsByTagName('li');
var nowZIndex=2;
var now=0;
oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+'px';
oBtnPrev.onmouseover=oMarkLeft.onmouseover=function () {
startMove(oBtnPrev,'opacity',100);
};
oBtnPrev.onmouseout=oMarkLeft.onmouseout=function () {
startMove(oBtnPrev,'opacity',0);
}
oBtnNext.onmouseover=oMarkRight.onmouseover=function () {
startMove(oBtnNext,'opacity',100);
};
oBtnNext.onmouseout=oMarkRight.onmouseout=function () {
startMove(oBtnNext,'opacity',0);
}
//大图切换
for(var i=0; i<aLiSmall.length;i++){
aLiSmall[i].index=i;
aLiSmall[i].onclick=function () {
if(this.index==now)return;
now=this.index;
tab();
aLiSmall[i].onmouseover=function () {
startMove(this,'opacity',100);
}
aLiSmall[i].onmouseout=function () {
if(this.index!=now){
startMove(this,'opacity',60)
}
}
}
function tab() {
aLiBig[now].style.zIndex=nowZIndex++;
for(var i=0;i<aLiSmall.length;i++){
startMove(aLiSmall[i],'opacity',60);
}
startMove(aLiSmall[now],'opacity',100);
aLiBig[now].style.height=0;
startMove(aLiBig[now],'height',320);
if(now==0){
startMove(oUlSmall,'left',0);
}
else if(now==aLiSmall.length-1){
startMove(oUlSmall,'left',-(now-2)*aLiSmall[0].offsetWidth);
}
else {
startMove(oUlSmall,'left', -(now-1)*aLiSmall[0].offsetWidth);
}
};
}
oBtnPrev.onclick=function () {
now--;
if(now==-1){
now=aLiSmall.length-1;
}
tab();
};
oBtnNext.onclick=function () {
now++;
if(now==aLiSmall.length){
now=0;
}
tab();
}
var timer=setInterval(oBtnNext.onclick,2000);
op.onmouseover=function () {
clearInterval(timer);
}
op.onmouseout=function () {
timer=setInterval(oBtnNext.onclick,2000);
}
}
</script>
</head>
<body>
<p id="playimages" class="play">
<ul class="big_pic">
<p class="prev"></p>
<p class="next"></p>
<p class="text">加载图片说明.....</p>
<p class="length">计算图片数量.....</p>
<a class="mark_left" href="javascript:;" rel="external nofollow" rel="external nofollow" ></a>
<a class="mark_right" href="javascript:;" rel="external nofollow" rel="external nofollow" ></a>
<p class="bg"></p>
<li style="z-index: 1;"><img src="../../img/练习/1.jpg" alt=""></li>
<li><img src="../../img/练习/2.jpg" alt=""></li>
<li><img src="../../img/练习/3.jpg" alt=""></li>
<li><img src="../../img/练习/4.jpg" alt=""></li>
<li><img src="../../img/练习/5.jpg" alt=""></li>
<li><img src="../../img/练习/6.jpg" alt=""></li>
</ul>
<p class="small_pic">
<ul style="width: 390px;">
<li style="opacity: 1"><img src="../../img/练习/1.jpg" alt=""></li>
<li><img src="../../img/练习/2.jpg" alt=""></li>
<li><img src="../../img/练习/3.jpg" alt=""></li>
<li><img src="../../img/练习/4.jpg" alt=""></li>
<li><img src="../../img/练习/5.jpg" alt=""></li>
<li><img src="../../img/练习/6.jpg" alt=""></li>
</ul>
</p>
</p>
</body>
</html>partie 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: 320px;
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;
}Affichage du rendu :
Recommandations associées :
Comment empêcher Flash de bloquer les éléments div en HTML
Comment obtenir des données flash détaillées en php
Explication détaillée des attributs flash du param et intégration dans la balise html
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!