首页
所有分类
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 相关文章推荐
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
基于jQuery实现左右图片轮播（原理通用）
Dec 24 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
easyui-datagrid开发实践(总结)
Aug 02 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 Javascript
js 实现碰撞检测的示例
Oct 28 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
窗口函数(3) 阿里云(6) 速龙(1) matplotlib(7) 数据同步(1) redis shake(1) 分析统计(1) 排名(1) 条形图(1) ipyvizzu(1)
You might like
一个查看session内容的函数
2006/10/09 PHP
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
php设计模式 Template (模板模式)
2011/06/26 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
ECMAScript6函数剩余参数（Rest Parameters）
2015/06/12 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
python中反射用法实例
2015/03/27 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
python内置数据类型之列表操作
2018/11/12 Python
python中图像通道分离与合并实例
2020/01/17 Python
python中列表的含义及用法
2020/05/26 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
程序员岗位职责
2013/11/11 职场文书
合作协议书范本
2014/04/17 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
学校教师安全责任书
2014/07/23 职场文书
护士年终个人总结
2015/02/13 职场文书
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL