三零网 www.q3060.com -- 技术、分享、进步
当前位置: > 网络编程 > CSS/HTML > html5实例:JS动画测试:透明度渐变、位置移动、尺寸变化的综合应用代码

html5实例:JS动画测试:透明度渐变、位置移动、尺寸变化的综合应用代码

投稿:mmqxmq2p  发布时间:2018-01-01  【手机版】  人气:

导读:三零(q3060.com)小编琪琪接下来为你介绍一下关于综合应用的技巧,希望对您有帮助。那么下面我们一起看看,具体内容所述如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JS动画测试:透明度渐变、位置移动、尺寸变化</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
function rand(min,max){
return Math.round(min+(Math.random()*(max-min)));
};
var fade = function(element, transparency, speed, callback){//透明度渐变:transparency:透明度 0(全透)-100(不透);speed:速度1-100,默认为1
 if(typeof(element)=='string')element=document.getElementById(element);
 if(!element.effect){
  element.effect = {};
  element.effect.fade=0;
 }
 clearInterval(element.effect.fade);
 var speed=speed||1;
 var start=(function(elem){
  var alpha;
  if(navigator.userAgent.toLowerCase().indexOf('msie') != -1){
    alpha=elem.currentStyle.filter.indexOf("opacity=") >= 0?(parseFloat( elem.currentStyle.filter.match(/opacity=([^)]*)/)[1] )) + '':
    '100';
  }else{
    alpha=100*elem.ownerDocument.defaultView.getComputedStyle(elem,null)['opacity'];
  }
  return alpha;
 })(element);
 if(window.console&&window.console.log)console.log('start: '+start+" end: "+transparency);
 element.effect.fade = setInterval(function(){
  start = start < transparency ? Math.min(start + speed, transparency) : Math.max(start - speed, transparency);
  element.style.opacity =  start / 100;
  element.style.filter = 'alpha(opacity=' + start + ')';
  if(Math.round(start) == transparency){
   element.style.opacity =  transparency / 100;
   element.style.filter = 'alpha(opacity=' + transparency + ')';
   clearInterval(element.effect.fade);
   if(callback)callback.call(element);
  }
 }, 20);
};
var move = function(element, position, speed, callback){//移动到指定位置,position:移动到指定left及top 格式{left:120, top:340}或{left:120}或{top:340};speed:速度 1-100,默认为10
 if(typeof(element)=='string')element=document.getElementById(element);
 if(!element.effect){
  element.effect = {};
  element.effect.move=0;
 }
 clearInterval(element.effect.move);
 var speed=speed||10;
 var start=(function(elem){
  var posi = {left:elem.offsetLeft, top:elem.offsetTop};
  while(elem = elem.offsetParent){
   posi.left += elem.offsetLeft;
   posi.top += elem.offsetTop;
  };
  return posi;
 })(element);
 element.style.position = 'absolute';
 var style = element.style;
 var styleArr=[];
 if(typeof(position.left)=='number')styleArr.push('left');
 if(typeof(position.top)=='number')styleArr.push('top');
 element.effect.move = setInterval(function(){
  for(var i=0;i<styleArr.length;i++){
   start[styleArr[i]] += (position[styleArr[i]] - start[styleArr[i]]) * speed/100;
   style[styleArr[i]] = start[styleArr[i]] + 'px';
  }
  for(var i=0;i<styleArr.length;i++){
   if(Math.round(start[styleArr[i]]) == position[styleArr[i]]){
    if(i!=styleArr.length-1)continue;
   }else{
    break;
   }
   for(var i=0;i<styleArr.length;i++)style[styleArr[i]] = position[styleArr[i]] + 'px';
   clearInterval(element.effect.move);
   if(callback)callback.call(element);
  }
 }, 20);
};
var resize = function(element, size, speed, callback){//长宽渐变:size:要改变到的尺寸 格式 {width:400, height:250}或{width:400}或{height:250};speed:速度 1-100,默认为10
 if(typeof(element)=='string')element=document.getElementById(element);
 if(!element.effect){
  element.effect = {};
  element.effect.resize=0;
 }
 clearInterval(element.effect.resize);
 var speed=speed||10;
 var start = {width:element.offsetWidth, height:element.offsetHeight};
 var styleArr=[];
 if(!(navigator.userAgent.toLowerCase().indexOf('msie') != -1&&document.compatMode == 'BackCompat')){
  //除了ie下border-content式盒模型情况外,需要对size加以修正
  var CStyle=document.defaultView?document.defaultView.getComputedStyle(element,null):element.currentStyle;
  if(typeof(size.width)=='number'){
   styleArr.push('width');
   size.width=size.width-CStyle.paddingLeft.replace(/\D/g,'')-CStyle.paddingRight.replace(/\D/g,'');
  }
  if(typeof(size.height)=='number'){
   styleArr.push('height');
   size.height=size.height-CStyle.paddingTop.replace(/\D/g,'')-CStyle.paddingBottom.replace(/\D/g,'');
  }
 }
 element.style.overflow = 'hidden';
 var style = element.style;
 element.effect.resize = setInterval(function(){
  for(var i=0;i<styleArr.length;i++){
   start[styleArr[i]] += (size[styleArr[i]] - start[styleArr[i]]) * speed/100;
   style[styleArr[i]] = start[styleArr[i]] + 'px';
  }
  for(var i=0;i<styleArr.length;i++){
   if(Math.round(start[styleArr[i]]) == size[styleArr[i]]){
    if(i!=styleArr.length-1)continue;
   }else{
    break;
   }
   for(var i=0;i<styleArr.length;i++)style[styleArr[i]] = size[styleArr[i]] + 'px';
   clearInterval(element.effect.resize);
   if(callback)callback.call(element);
  }
 }, 20);
};
</script></head>
<body>
<div id="testDiv" style="position:absolute; right:100px; top:50px; background-color:#abc; width:100px; height:50px;padding:10px;" onclick="alert(this.style.filter)"><div style="background-color:#369; height:100%;"></div></div>
<br/>
    动画测试  
<input type="button" value="改变大小"
onClick="resize('testDiv', {width:rand(60,600),height:rand(30,300)})" />
<input type="button" value="改变宽度"
onClick="resize('testDiv', {width:rand(60,600)})" />
<input type="button" value="改变高度"
onClick="resize('testDiv', {height:rand(30,300)})" />
  
<input type="button" value="移动位置"
onClick="move('testDiv', {left:rand(40,600),top:rand(40,400)})" />
<input type="button" value="水平移动"
onClick="move('testDiv', {left:rand(40,600)})" />
<input type="button" value="垂直移动"
onClick="move('testDiv', {top:rand(40,400)})" />
  
<input type="button" value="透明度变化"
onClick="fade('testDiv', rand(5,100))" />
  
<input type="button" value="还原"
onClick="var ele=document.getElementById('testDiv');clearInterval(ele.effect.move);clearInterval(ele.effect.fade);clearInterval(ele.effect.resize);ele.style.cssText='position:absolute; right:100px; top:50px; background-color:#abc; width:100px; height:50px;padding:10px;'" />
</body>
</html>


结语:以上就是分享给大家的综合应用内容了,希望大家多多支持三零网站。更多知识点,可以能过本站网页顶端的搜索或进入相关专题,如果有任何疑问都可以一起留言交流。

●【往下看,下一页更精彩】●
1  2  3  4  5  6  7  下一页 
延伸阅读:
·html5实例:JS询问确认程序对话框,改进版的“你好”程序的综合应用代码
·html5实例:纯CSS代码表现一座漂亮的房子的特效的综合应用代码
·html5实例:非常不错的评分特效的综合应用代码
·html5实例:JS配合CSS实现的个性漂亮滚动条的综合应用代码
·html5实例:用一款按钮把输入框中一段英文的首字母全部大写的综合应用代码
·html5实例:漂亮的加入收藏夹和收藏到网摘特效的综合应用代码
·html5实例:颜色选择程序脚本,鼠标指向即显示颜色代码的综合应用代码
·html5实例:用图片制作的选色器的综合应用代码
·html5实例:三种有趣的方块滑行移动特效的综合应用代码
·html5实例:45种JavaScript缓冲特效集合的综合应用代码
  
温馨提示:以上内容整理于网络,仅供参考,如果对您有帮助,请收藏本网站!
大家感兴趣的内容
最新的内容
热门搜索
三零网 | 网站地图| 最近更新 | 关于我们 | 联系方式 | |

Copyright © 2012-2020,Q3060.COM All Rights Reserved.