首页
所有分类
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 相关文章推荐
用队列模拟jquery的动画算法实例
Jan 20 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
Vue 监听元素前后变化值实例
Jul 29 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
瑞典购物网站(55) 比利时购物网站(33) 芬兰购物网站(10) 南非购物网站(8) 挪威购物网站(7) 肯尼亚购物网站(2) 阿根廷购物网站(9) 丹麦购物网站(22) 荷兰购物网站(99) 意大利购物网站(128)
You might like
Php部分常见问题总结
2006/10/09 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
PHP类中的魔术方法（Magic Method）简明总结
2014/07/08 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
Python实现的归并排序算法示例
2017/11/21 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
python中如何打包用户自定义模块
2020/09/23 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
用JAVA实现一种排序，JAVA类实现序列化的方法(二种)
2014/04/23 面试题
最新大学生自我评价
2013/09/24 职场文书
传播学专业毕业生自荐信
2013/11/04 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
保留意见审计报告
2015/06/05 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers
vue实现简易音乐播放器
2022/08/14 Vue.js