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效果的实现代码

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

Javascript 相关文章推荐
JavaScript XML实现两级级联下拉列表
Nov 10 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
AngularJS实现路由实例
Feb 12 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
vue-cli3 热更新配置操作
Sep 18 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
You might like
摩卡咖啡
2021/03/03 咖啡文化
php checkbox 取值详细说明
2010/08/19 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
php中hashtable实现示例分享
2014/02/13 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
jquery里的each使用方法详解
2010/12/22 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
vue地区选择组件教程详解
2018/05/04 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
详细分析python3的reduce函数
2017/12/05 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
python的等深分箱实例
2019/11/22 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
演讲稿开场白
2014/01/13 职场文书
代理商会议邀请函
2014/01/27 职场文书
卫生安全检查制度
2014/02/04 职场文书
采购部经理岗位职责
2014/02/10 职场文书
入党介绍人意见2015
2015/06/01 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python