찾다

집 >웹 프론트엔드 >JS 튜토리얼 >H5 모방 플래시 효과 예

H5 모방 플래시 효과 예

小云云
小云云원래의
2018-01-27 16:59:091836검색

이 글은 모방 플래시 효과를 달성하기 위한 H5 구현 코드에 대한 관련 정보를 주로 소개합니다. 이 글이 이러한 기능을 구현하는 데 도움이 되기를 바랍니다.

플래시와 같은 효과를 얻기 위한 H5 구현 코드

H5의 인기로 인해 플래시는 H5로 대체됩니다. H5를 사용하여 플래시 효과를 얻는 방법은 무엇입니까? 여러분과 공유하기 위해 간단하고 작은 것을 만들었습니다.

html 및 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(&#39;*&#39;);
      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(&#39;playimages&#39;);
      var oBtnPrev=getByClass(op,&#39;prev&#39;)[0];
      var oBtnNext=getByClass(op,&#39;next&#39;)[0];
      var oMarkLeft=getByClass(op,&#39;mark_left&#39;)[0];
      var oMarkRight=getByClass(op,&#39;mark_right&#39;)[0];

      var opSmall=getByClass(op,&#39;small_pic&#39;)[0];
      var oUlSmall=opSmall.getElementsByTagName(&#39;ul&#39;)[0];
      var aLiSmall=opSmall.getElementsByTagName(&#39;li&#39;);

      var oUlBig=getByClass(op,&#39;big_pic&#39;)[0];
      var aLiBig=oUlBig.getElementsByTagName(&#39;li&#39;);

      var nowZIndex=2;

      var now=0;

      oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+&#39;px&#39;;

      oBtnPrev.onmouseover=oMarkLeft.onmouseover=function () {
        startMove(oBtnPrev,&#39;opacity&#39;,100);
      };
      oBtnPrev.onmouseout=oMarkLeft.onmouseout=function () {
        startMove(oBtnPrev,&#39;opacity&#39;,0);
      }
      oBtnNext.onmouseover=oMarkRight.onmouseover=function () {
        startMove(oBtnNext,&#39;opacity&#39;,100);
      };
      oBtnNext.onmouseout=oMarkRight.onmouseout=function () {
        startMove(oBtnNext,&#39;opacity&#39;,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,&#39;opacity&#39;,100);
        }
        aLiSmall[i].onmouseout=function () {
          if(this.index!=now){
            startMove(this,&#39;opacity&#39;,60)
          }
        }
      }
      function tab() {
        aLiBig[now].style.zIndex=nowZIndex++;

        for(var i=0;i<aLiSmall.length;i++){
          startMove(aLiSmall[i],&#39;opacity&#39;,60);
        }

        startMove(aLiSmall[now],&#39;opacity&#39;,100);

        aLiBig[now].style.height=0;
        startMove(aLiBig[now],&#39;height&#39;,320);

        if(now==0){
          startMove(oUlSmall,&#39;left&#39;,0);
        }
        else if(now==aLiSmall.length-1){
          startMove(oUlSmall,&#39;left&#39;,-(now-2)*aLiSmall[0].offsetWidth);
        }

        else {
          startMove(oUlSmall,&#39;left&#39;, -(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>

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;
}

렌더링 디스플레이:

관련 권장 사항:

Flash에서 div 요소를 차단하는 것을 방지하는 방법 HTML

php에서 플래시 상세 데이터를 얻는 방법

param의 플래시 속성에 대한 자세한 설명과 html 태그에 포함


위 내용은 H5 모방 플래시 효과 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：vuejs는 $emit와 $on을 사용하여 구성 요소 간에 값을 전달합니다.다음 기사：vuejs는 $emit와 $on을 사용하여 구성 요소 간에 값을 전달합니다.

관련 기사

더보기