JavaScript 之仿flash播放器

2024-03-02 01:38
文章标签 java script flash 播放器 之仿

本文主要是介绍JavaScript 之仿flash播放器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

move.js文件

function getStyle(obj, name)
{if(obj.currentStyle){return obj.currentStyle[name];  }else{return getComputedStyle(obj, false)[name];  }
}
//var alpha = 30;
function startMove(obj, arr, iTarget)
{clearInterval(obj.timer);obj.timer=setInterval(function (){var cur=0;if(arr=='opacity'){cur=Math.round(parseFloat(getStyle(obj, arr))*100); }else{cur=parseInt(getStyle(obj, arr));   }var speed=(iTarget-cur)/6;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(cur==iTarget){clearInterval(obj.timer);   }else{if(arr=='opacity'){obj.style.filter='alpha(opcity:'+(cur+speed)+')';obj.style.opacity=(cur+speed)/100;  //  document.getElementById('tex1').value = obj.style.opacity;}else{obj.style[arr]=cur+speed+'px';  }}}, 30);
}// JavaScript Document

仿flash播放器（引用上面的js文件）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿FLASH的图片轮换效果</title>
<script src="move.js"></script>
<style>@charset "utf-8";
/* CSS Document */body { background-color: #F0F0F0; } ul { padding: 0; margin: 0;} li { list_style: none; } img { border: 0; }.play { width: 400px; height: 430px; margin: 50px auto 0; background-color: #000000; font: 12px Arial; }.big_pic { width: 400px; height: 320px; overflow: hidden;background: #222; position: relative; }.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;  filter: alpha(opacity:10); opacity: 0.1; z-index:3000; }.mark_right { width: 200px; height: 320px; position: absolute; left: 200px; top: 0;  filter: alpha(opacity:10); opacity: 0.1; z-index: 3000; }.big_pic .prev { width: 60px; height: 60px; background:url(images/btn.png) no-repeat; position: absolute; top: 130px; left: 10px; z-index: 3001; filter:alpha(opacity:0); opacity:0; cursor:pointer; }.big_pic .next { width: 60px; height:60px; background:url(images/btn2.png) no-repeat 0;position: absolute; top: 130px; right: 10px; z-index: 3001; filter:alpha(opacity:0); opacity:0; cursor: pointer: }.big_pic .text { position:absolute; left: 10px; top:302px; 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; filter:alpha(opacity=60); 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; background: url(images/loading.gif) no-repeat center center; cursor: pointer; filter: alpha(opacity:30); opacity:0.3; }
.small_pic img { width: 120px; height:94px; }</style>
<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=document.getElementById('small_pic');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', 30); }};}function tab(){aLiBig[now].style.zIndex=nowZIndex++;for(var i=0;i<aLiSmall.length;i++){startMove(aLiSmall[i], 'opacity', 30);  }aLiBig[now].style.height=0;startMove(aLiBig[now], 'height', 320);startMove(aLiSmall[now], 'opacity', 100);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:;"></a><a class="mark_right" href="javascript:;"></a><div class="bg"></div><li style="z-index:1;"><img src="13_07.jpg" /></li><li><img src="pay.png" /></li><li><img src="默认配置文件位置.PNG" /></li><li><img src="pay.png" /></li><li><img src="13_07.jpg" /></li><li><img src="pay.png" /></li></ul><div id="small_pic" class="small_pic"><ul style="width:400px;"><li style=" filter: alpha(opacity:100); opacity:1;"><img src="13_07.jpg" /></li><li><img src="pay.png" /></li><li><img src="默认配置文件位置.PNG" /></li><li><img src="pay.png" /></li><li><img src="13_07.jpg" /></li><li><img src="pay.png" /></li></ul>       </div>
</div>
</body>
</html>

这篇关于JavaScript 之仿flash播放器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/764531。

相关文章

javax.net.ssl.SSLHandshakeException:异常原因及解决方案

javax.net.ssl.SSLHandshakeException:异常原因及解决方案

《javax.net.ssl.SSLHandshakeException:异常原因及解决方案》javax.net.ssl.SSLHandshakeException是一个SSL握手异常,通常在建立SS... 目录报错原因在程序中绕过服务器的安全验证注意点最后多说一句报错原因一般出现这种问题是因为目标服务器
阅读更多...
Java实现删除文件中的指定内容

Java实现删除文件中的指定内容

《Java实现删除文件中的指定内容》在日常开发中,经常需要对文本文件进行批量处理,其中,删除文件中指定内容是最常见的需求之一,下面我们就来看看如何使用java实现删除文件中的指定内容吧... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细介绍3.1 Ja
阅读更多...
springboot项目中整合高德地图的实践

springboot项目中整合高德地图的实践

《springboot项目中整合高德地图的实践》：本文主要介绍springboot项目中整合高德地图的实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一：高德开放平台的使用二：创建数据库（我是用的是mysql）三：Springboot所需的依赖（根据你的需求再
阅读更多...
spring中的ImportSelector接口示例详解

spring中的ImportSelector接口示例详解

《spring中的ImportSelector接口示例详解》Spring的ImportSelector接口用于动态选择配置类,实现条件化和模块化配置,关键方法selectImports根据注解信息返回... 目录一、核心作用二、关键方法三、扩展功能四、使用示例五、工作原理六、应用场景七、自定义实现Impor
阅读更多...
SpringBoot3应用中集成和使用Spring Retry的实践记录

SpringBoot3应用中集成和使用Spring Retry的实践记录

《SpringBoot3应用中集成和使用SpringRetry的实践记录》SpringRetry为SpringBoot3提供重试机制,支持注解和编程式两种方式,可配置重试策略与监听器,适用于临时性故... 目录1. 简介2. 环境准备3. 使用方式3.1 注解方式 基础使用自定义重试策略失败恢复机制注意事项
阅读更多...
SpringBoot整合Flowable实现工作流的详细流程

SpringBoot整合Flowable实现工作流的详细流程

《SpringBoot整合Flowable实现工作流的详细流程》Flowable是一个使用Java编写的轻量级业务流程引擎,Flowable流程引擎可用于部署BPMN2.0流程定义,创建这些流程定义的... 目录1、流程引擎介绍2、创建项目3、画流程图4、开发接口4.1 Java 类梳理4.2 查看流程图4
阅读更多...
一文详解如何在idea中快速搭建一个Spring Boot项目

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热
阅读更多...
Java对异常的认识与异常的处理小结

Java对异常的认识与异常的处理小结

《Java对异常的认识与异常的处理小结》Java程序在运行时可能出现的错误或非正常情况称为异常,下面给大家介绍Java对异常的认识与异常的处理,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参... 目录一、认识异常与异常类型。二、异常的处理三、总结 一、认识异常与异常类型。（1）简单定义-什么是
阅读更多...
SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志

SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志

《SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志》在SpringBoot项目中,使用logback-spring.xml配置屏蔽特定路径的日志有两种常用方式,文中的... 目录方案一：基础配置（直接关闭目标路径日志）方案二：结合 Spring Profile 按环境屏蔽关
阅读更多...
Java使用HttpClient实现图片下载与本地保存功能

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2