首页
所有分类
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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
Javascript的表单验证长度
Mar 16 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
Nuxt 项目性能优化调研分析
Nov 07 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 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
PyTorch(1) opencv(7) compose(3) moviepy(1) 模糊匹配(1) 人工智能(2) 模型保存加载(1) 图像处理(1) Pyecharts(7) FuzzyWuzzy(1)
You might like
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
Angular2开发——组件规划篇
2017/03/28 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
Python中变量交换的例子
2014/08/25 Python
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
python批量生成条形码的示例
2020/10/10 Python
python-地图可视化组件folium的操作
2020/12/14 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
学习十八大报告感言
2014/02/28 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
节能宣传周活动总结
2014/05/08 职场文书
教师远程研修感悟
2015/11/18 职场文书
Redis全局ID生成器的实现
2022/06/05 Redis