按钮控制图层伸缩移动

稿源：互联网 2022-04-02 21:41:21 点击： 2204 撤稿纠错

通过按钮来控制图层伸缩和移动，还可以改变大小，实用的js特效代码。

以下讨论的是和按钮控制伸缩相关的按钮控制图层伸缩移动教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 透明度渐变、位置移动、尺寸变化的可控制窗口 站长特效网</title>
<script language="javascript">
function rand(min,max){
 return Math.round(min+(Math.random()*(max-min)));
};//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码c下载。
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);
};//欢迎来到站长特效网，c我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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);
};//欢迎来到站长特效c网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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);
};//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div id="zzjs_net" 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('zzjs_net',{width:rand(60,600),height:rand(30,300)})">
<input type="button" value="改变宽度" onClick="resize('zzjs_net',{width:rand(60,600)})">
<input type="button" value="改变高度" onClick="resize('zzjs_net',{height:rand(30,300)})">
<input type="button" value="移动位置" onClick="move('zzjs_net',{left:rand(40,600),top:rand(40,400)})">
<input type="button" value="水平移动" onClick="move('zzjs_net',{left:rand(40,600)})">
<input type="button" value="垂直移动" onClick="move('zzjs_net',{top:rand(40,400)})">
<input type="button" value="透明度变化" onClick="fade('zzjs_net',rand(5,100))">
<input type="button" value="还原" onClick="var ele=document.getElementById('zzjs_net');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>

关于按钮控制图层伸缩移动的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010092965172.shtml方便下次再访问哦。

·上一篇： 弹出层居中半透明效果
·下一篇： 自由设置网页漂浮图片广告

按钮控制图层伸缩移动

文章分类LIST >>返回首页

最新游戏

最新新闻