html5 遮罩动画,JavaScript仿flash遮罩动画效果
body{margin:0;}
#banner{position:relative;width:858px;height:238px;overflow:hidden;}
function setMaskingAnimation(container,width,height,time,pixel,color){
var __left=mtRand(parseInt(width*0.25),parseInt(width*0.75));
var __top=mtRand(parseInt(height*0.25),parseInt(height*0.75));
if(width>=height){
var widthSpeed=parseInt((width/height)*10);
var heightSpeed=10;
var __width=widthSpeed;
var __height=heightSpeed;
}
else{
var widthSpeed=10;
var heightSpeed=parseInt((height/width)*10);
var __width=widthSpeed;
var __height=heightSpeed;
}
var hander;
//
function getPosition(_width,_height,_left,_top){
var div1={
"width":_left,
"height":_top,
"left":0,
"top":0
};
var div2={
"width":_width,
"height":_top,
"left":_left,
"top":0
};
var div3={
"width":width-_left-_width,
"height":_top,
"left":_left+_width,
"top":0
};
var div4={
"width":_left,
"height":_height,
"left":0,
"top":_top
};
var div5={
"width":_width,
"height":_height,
"left":_left,
"top":_top
};
var div6={
"width":width-_left-_width,
"height":_height,
"left":_left+_width,
"top":_top
};
var div7={
"width":_left,
"height":height-_top-_height,
"left":0,
"top":_top+_height
};
var div8={
"width":_width,
"height":height-_top-_height,
"left":_left,
"top":_top+_height
};
var div9={
"width":width-_left-_width,
"height":height-_top-_height,
"left":_left+_width,
"top":_top+_height
};
return {
"div1":div1,
"div2":div2,
"div3":div3,
"div4":div4,
"div5":div5,
"div6":div6,
"div7":div7,
"div8":div8,
"div9":div9,
};
}
//
function mtRand(n1,n2){
return parseInt(Math.random()*(n2-n1+1)+n1);
}
//
function setDiv(i,position){
var has=$(container).find("div.mask"+i);
if(has.length){
has.css("left",position.left);
has.css("top",position.top);
has.css("width",position.width);
has.css("height",position.height);
}
else{
var html='
html=html.replace('{@i}',i);
html=html.replace('{@left}',position.left);
html=html.replace('{@top}',position.top);
html=html.replace('{@width}',position.width);
html=html.replace('{@height}',position.height);
if(i==5){
html=html.replace('{@backgroundColor}',"transparent");
}
else{
html=html.replace('{@backgroundColor}',color);
}
$(container).append(html);
}
}
//
function play(){
__width+=pixel*widthSpeed;
__height+=pixel*heightSpeed;
__left-=pixel*widthSpeed/2;
__top-=pixel*heightSpeed/2;
var position=getPosition(__width,__height,__left,__top);
for(var i=1;i<=9;i++){
setDiv(i,position["div"+i]);
}
if(position.div1.width<=0 && position.div1.height<=0 && position.div9.width<=0 && position.div9.height<=0){
window.clearInterval(hander);
$(container).find("div.mask").remove();
}
}
//
hander=window.setInterval(play,time);
}
$(function(){
setMaskingAnimation("#banner",858,238,100,2,"#ff0000");
//第4个参数和第5个参数分别设置20和2效果会比较好
//第5个参数必须是偶数
});
html5 遮罩动画,JavaScript仿flash遮罩动画效果相关推荐
- Javascript 仿Flash 图片切换 及 Flash 图片切换
1. Javascript 仿Flash 图片切换 http://www.fansart.com/cweb/200669141456.asp <a target=_self href=" ...
- html如何设置滚动动画,JavaScript 实现页面滚动动画
在做前端 UI 效果时,让元素根据滚动位置实现动画效果是一个非常流行的设计,通常我们会使用第三方插件或库来实现.在本教程中,我将教大家使用纯 JavaScript 和 CSS 来实现. 先预览一下实现 ...
- Android MP3音频播放器 仿唱片机播放动画,仿网易云播放动画,旋转动画,MediaPlayer AudioManager
废话不多说上代码 private AudioManager audioManager;private SimpleDateFormat format;private SeekBar seekBar;p ...
- ssd内部是多个flash一起操作_广告设计中Flash图形动画的应用
点击[蓝字]关注我们 广告设计中Flash图形动画的应用 Flash图形动画顾名思义是一款可以将图像.文字.音乐等各种创意元素融合在一起的动画制作软件.如果能够将Flash图形动画应用到广告设计行业当 ...
- 学习FLASH制作动画的关键技术点
FLASH作为强大的矢量动画制作软件,其可用于网络视频的播放以及网站交换元素的制作(如动态网页,互动小游戏).虽然个人专攻于三维动画技术,不过平面2D动画也积累过不少经验. 以下主要探讨FLASH对于 ...
- HTML5仿苹果Siri动画js特效
下载地址HTML5仿苹果Siri动画特效是一款基于HTML5+CSS3制作的黑色全屏Siri打开界面特效. dd:
- html5多张图片滚动播放,javascript+html5实现仿flash滚动播放图片的方法_javascript技巧...
本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: css部分: body{ margin: 0px; padding: ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYP ...
- html 图片自动滚动播放,javascript+html5实现仿flash滚动播放图片的方法
本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: css部分: body{ margin: 0px; padding: ...
- Vue项目如何实现进入网站后欢迎动画只播放一次的效果(欢迎动画是一个position:fixed;属性的遮罩层,直接写在首页页面上)
Vue项目如何实现进入网站后欢迎动画只播放一次的效果(欢迎动画是一个position:fixed;属性的遮罩层,直接写在首页页面上) 前端小白的我最近在项目上遇到了一个需求,就是网站首页上有个遮罩层的 ...
最新文章
- 【鲁班学院】一个三年工作经验和月薪16k的java程序员应该要具备什么样的技能?...
- Oracle 11g 新特性 -- 只读表(read-only table)说明
- call( )、apply( )
- 用MyEclipse自动生成hibernate映射文件和实体类
- timestamp mysql php_PHP和Mysql的Timestamp互换
- 转wordpress小工具制作前台后台全解析
- 【小白学习C++ 教程】二、C++基础语法、注释和变量
- 固件升级校准_RS网络分析仪自检自校准方法-Agitekservice
- 全量复制 增量复制 异步复制
- Pycharm中运行Python代码的几种方式
- pap认证要交换几次报文_华为HCIA认证RS路由与交换 —— 链路状态协议OSPF PPP原理与配置方法详解...
- cadence学习笔记(2)-PCB封装库制作
- 使用librtmp推h264、aac实时流
- 汽车电子电气架构EEA演变
- 生成自己的自签名证书
- springBoot启动类报错
- 未来架构:从服务化到云原生
- MaterialDesign美化控件
- PHP开发银联云闪付二维码支付
- 【人工智能】Benchmark、SOTA、Baseline
热门文章
- hutool依赖:BeanUtil工具类的使用:对象转对象、对象转map、map转对象
- matlab作函数图像,matlab绘制函数图像
- python绘制函数图像
- smobiler中实现页面切换_使用Smobiler实现类似美团的界面
- Paper reading:高分辨率图像分割:From Contexts to Locality: Ultra-high Resolution Image Segmentation ICCV2021
- 将HTML网页存储为图片 区域截图 截长屏 截全屏
- 二维码红包系统源代码
- MATLAB与STK互联18:卫星对象操作(9)—地面站可见性计算并获取数据2(补充上篇博文,有些问题需要澄清)
- 移植STM32F103VE程序到STM32F207VE系列应用注意事项
- 企业实战——Ansible自动化运维基础知识