首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 29, 2017

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

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

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('*');
      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 oDiv=document.getElementById('playimages');
      var oBtnPrev=getByClass(oDiv,'prev')[0];
      var oBtnNext=getByClass(oDiv,'next')[0];
      var oMarkLeft=getByClass(oDiv,'mark_left')[0];
      var oMarkRight=getByClass(oDiv,'mark_right')[0];

      var oDivSmall=getByClass(oDiv,'small_pic')[0];
      var oUlSmall=oDivSmall.getElementsByTagName('ul')[0];
      var aLiSmall=oDivSmall.getElementsByTagName('li');

      var oUlBig=getByClass(oDiv,'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);

      oDiv.onmouseover=function () {
        clearInterval(timer);
      }
      oDiv.onmouseout=function () {
        timer=setInterval(oBtnNext.onclick,2000);
      }
    }
  </script>
</head>
<body>
<div id="playimages" class="play">
  <ul class="big_pic">
    <div class="prev"></div>
    <div class="next"></div>

    <div class="text">加载图片说明.....</div>
    <div class="length">计算图片数量.....</div>

    <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>
    <div class="bg"></div>

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

效果图展示：

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

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

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

- Author -

king-w

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
js实现点赞效果
Mar 16 Javascript
Angular表格神器ui-grid应用详解
Sep 29 #Javascript
javascript 缓冲运动框架的实现
Sep 29 #Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 #Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 #Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 #Javascript
微信小程序之选项卡的实现方法
Sep 29 #Javascript
vue-cli的eslint相关用法
Sep 29 #Javascript
夸克(1) 粒子对撞机(1) NASA(1) 对撞机(1) 人造肉(1) 国际空间站(1) 太空(1) 塑料(1) 酶(1) 天问一号(1)
You might like
星际玩家的三大定律
2020/03/04 星际争霸
php 常用类汇总 推荐收藏
2010/05/13 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
JavaScript link方法入门实例（给字符串加上超链接）
2014/10/17 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
canvas实现钟表效果
2017/02/13 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
用Python编写一个国际象棋AI程序
2014/11/28 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
Python如何读取、写入CSV数据
2020/07/28 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
营销人才自我鉴定范文
2013/12/25 职场文书
季度思想汇报
2014/01/01 职场文书
公司成立感言
2014/01/11 职场文书
给老师的检讨书
2014/02/11 职场文书
夜不归宿检讨书
2014/02/25 职场文书
小学六年级学生评语
2014/04/22 职场文书
政治表现评语
2014/05/04 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
出纳岗位职责
2015/01/31 职场文书
民事调解书范文
2015/05/20 职场文书
答谢酒会主持词
2015/07/02 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
医院消毒隔离制度
2015/08/05 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书