js实现按钮操作图层特效

8个月前 (03-18 19:40)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

通过命令按钮用户可以对图层进行加长或加宽等效果，这个图层特效兼容当前主流浏览器，实用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=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>js实现按钮操作图层特效_武鸣人</title>
<style type="text/css">
body{margin:0;}
body,td{font-size:12px;}
</style>
<script language="javascript">
function addload(func){
window.attachEvent ? window.attachEvent("onload", func) : window.addEventListener("load", func, false);
}
/*
animr(id, attr, ol, al, bfunc, afunc)
id对象(string|object)
attr动画方式(string|number)(width:1, height:2, left:3, top:4, opac:5)
ol原始状态(number)(-1:使用当前状态不累加, 0:使用当前状态且累加最终状态, >0:固定某状态)
al最终状态(number)
bfunc动画前的动作(function)
afunc动画后的动作(function)
*///武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function animr(){
var id = typeof arguments[0] == "string" ? document.getElementById(arguments[0]) : arguments[0];
if(!id){alert(arguments[0] + " 初始化错误\n请检查ID是否正确!");return;}
var cie = window.ActiveXObject,
step = 15, //递增量，数值越大缓冲效果越明显
attrs = {"width":1, "height":2, "left":3, "top":4, "opac":5},
attr = typeof arguments[1] == "string" ? attrs[arguments[1].toLowerCase()] : arguments[1];
if(attr==undefined||attr>5||parseInt(attr)!=attr){alert("动画方式设置错误!");return;} //动画方式
var ol = typeof arguments[2] == "number" ? arguments[2] : null, //原始状态
al = typeof arguments[3] == "number" ? arguments[3] : null; //最终状态
if(ol == null||al == null) return;
var bfunc = arguments[4], //动画前的动作
afunc = arguments[5], //动画后的动作
_id = id,
_ol = ol,
_al = al,
offset = function(obj){ //获取当前绝对状态
var x = obj.offsetLeft,
y = obj.offsetTop,
w = obj.offsetWidth,
h = obj.offsetHeight;
while(obj=obj.offsetParent){x+=obj.offsetLeft; y+=obj.offsetTop;}
return{"x":x, "y":y, "w":w, "h":h}
};
if(!id.effect){
id.effect = {};
id.effect.width = 0;
id.effect.height = 0;
id.effect.left = 0;
id.effect.top = 0;
id.effect.opac = 0;
};
if(bfunc) bfunc();
switch(attr){
case 1:
clearInterval(id.effect.width);
if(_ol==0||_ol==-1) ol = offset(_id).w;
var gattr = id.getAttribute("owidth");
if(!gattr&&_ol==-1) id.setAttribute("owidth",ol);
id.style.width = gattr ? gattr + "px" : ol + "px";
if(_ol==0||_ol==-1) al += parseInt(id.style.width);
if(al<0) al = 0;
id.style.overflow = "hidden";
id.effect.width = setInterval(function(){
var il = parseInt(id.style.width);
if(_al>=0){
if(il<al){
id.style.width = (il+Math.ceil((al-il)/step)) + "px";
}else{
clears();
}
}else{
if(il>al){
id.style.width = (il-Math.ceil((il-al)/step)) + "px";
}else{
clears();
}
}
}, 1);
var clears = function(){
id.style.width = al + "px";
clearInterval(id.effect.width);
if(afunc) afunc();
};
break;
case 2:
clearInterval(id.effect.height);
if(_ol==0||_ol==-1) ol = offset(_id).h;
var gattr = id.getAttribute("oheight");
if(!gattr&&_ol==-1) id.setAttribute("oheight",ol);
id.style.height = gattr ? gattr + "px" : ol + "px";
if(_ol==0||_ol==-1) al += parseInt(id.style.height);
if(al<0) al = 0;
id.style.overflow = "hidden";
id.effect.height = setInterval(function(){
var il = parseInt(id.style.height);
if(_al>=0){
if(il<al){
id.style.height = (il+Math.ceil((al-il)/step)) + "px";
}else{
clears();
}
}else{
if(il>al&&(il-Math.ceil((il-al)/step))>0){
id.style.height = (il-Math.ceil((il-al)/step)) + "px";
}else{
clears();
}
}
}, 1);
var clears = function(){
id.style.height = al + "px";
clearInterval(id.effect.height);
if(afunc) afunc();
};
break;
case 3:
clearInterval(id.effect.left);
if(_ol==0||_ol==-1) ol = offset(_id).x;
var gattr = id.getAttribute("oleft");
if(!gattr&&_ol==-1) id.setAttribute("oleft",ol);
id.style.left = gattr ? gattr + "px" : (id.style.left!="" ? id.style.left : ol + "px");
id.style.top = id.style.top!="" ? id.style.top : offset(_id).y + "px";
if(_ol==0||_ol==-1) al += parseInt(id.style.left);
id.style.position = "absolute";
id.effect.left = setInterval(function(){
var il = parseInt(id.style.left);
if(_al>=0){
if(il<al){
id.style.left = (il+Math.ceil((al-il)/step)) + "px";
}else{
clears();
}
}else{
if(il>al){
id.style.left = (il-Math.ceil((il-al)/step)) + "px";
}else{
clears();
}
}
}, 1);
var clears = function(){
id.style.left = al + "px";
clearInterval(id.effect.left);
if(afunc) afunc();
};
break;
case 4:
clearInterval(id.effect.top);
if(_ol==0||_ol==-1) ol = offset(_id).y;
id.style.left = id.style.left!="" ? id.style.left : offset(_id).x + "px";
var gattr = id.getAttribute("otop");
if(!gattr&&_ol==-1) id.setAttribute("otop",ol);
id.style.top = gattr ? gattr + "px" : (id.style.top!="" ? id.style.top : ol + "px");
if(_ol==0||_ol==-1) al += parseInt(id.style.top);
id.style.position = "absolute";
id.effect.top = setInterval(function(){
var il = parseInt(id.style.top);
if(_al>=0){
if(il<al){
id.style.top = (il+Math.ceil((al-il)/step)) + "px";
}else{
clears();
}
}else{
if(il>al){
id.style.top = (il-Math.ceil((il-al)/step)) + "px";
}else{
clears();
}
}
}, 1);
var clears = function(){
id.style.top = al + "px";
clearInterval(id.effect.top);
if(afunc) afunc();
};
break;
case 5:
clearInterval(id.effect.opac);
if(_ol==0||_ol==-1){
if(cie) ol = id.style.filter!="" ? id.filters.alpha.opacity : 100;
else ol = id.style.opacity!="" ? id.style.opacity*100 : 100;
}
var gattr = id.getAttribute("opac");
if(!gattr&&_ol==-1) id.setAttribute("opac",ol);
if(cie) id.style.filter = "alpha(opacity="+(gattr ? gattr : ol)+")";
else id.style.opacity = gattr ? gattr/100 : ol/100;
var _il = cie ? id.filters.alpha.opacity : id.style.opacity;
if(al<0) al = 100 - Math.abs(al);
id.effect.opac = setInterval(function(){
if(cie){
var il = id.filters.alpha.opacity;
if(_il>al){
if(il>al){
id.filters.alpha.opacity-=step/10;
}else{
clears();
}
}else{
if(il<al){
id.filters.alpha.opacity+=step/10;
}else{
clears();
}
}
}else{
var il = id.style.opacity;
if(_il*100>al){
if(il*100>al){
var rl = parseFloat(id.style.opacity);rl-=step/1000;
id.style.opacity = rl;
}else{
clears();
}
}else{
if(il*100<al){
var rl = parseFloat(id.style.opacity);rl+=step/1000;
id.style.opacity = rl;
}else{
clears();
}
}
}
}, 1);
var clears = function(){
if(cie) id.filters.alpha.opacity = al;
else id.style.opacity = al/100;
clearInterval(id.effect.opac);
if(afunc) afunc();
};
break;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
addload(function(){animr("demo1", 1, 0, 300)});
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="100"><div style="width:123px;height:12px;overflow:hidden;">
      <div style="width:123px;height:12px;background-image:url();position:absolute;"></div>
      <div id="po" style="width:0px;height:12px;background-image:url();"></div>
    </div></td>
  </tr>
  <tr>
    <td height="60"><div id="demo1" style="width:100px;height:60px;background-color:#666666;"></div></td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td height="60"><div id="demo2" style="width:100px;height:60px;background-color:#666666;"></div></td>
  </tr>
  <tr>
    <td style="padding:10px;">
    <input type="button" value=" -Width " onClick="animr('demo1', 'width', 300, -200)">
    <input type="button" value=" +Width " onClick="animr('demo2', 1, 0, 200)"><br>
    <input type="button" value=" -Height " onClick="animr('demo1', 'height', 0, -200, '', function(){alert(document.getElementById('demo1').style.height)})">
    <input type="button" value=" +Height " onClick="animr('demo2', 2, 0, 200)"><br>
    <input type="button" value=" -Left " onClick="animr('demo1', 'left', 0, -200)">
    <input type="button" value=" +Left " onClick="animr('demo2', 3, -1, 200)"><br>
    <input type="button" value=" -Top " onClick="animr('demo1', 'top', 0, -200)">
    <input type="button" value=" +Top " onClick="animr('demo2', 4, 0, 200)">
    <input type="button" value=" Top " onClick="animr('demo2', 4, 0, 200, '', function(){animr('demo2', 4, 0, -200)})"><br>
    <input type="button" value=" -Opacity " onClick="animr('demo2', 'opac', 0, 20)">
    <input type="button" value=" +Opacity " onClick="animr('demo2', 5, 0, 100)"><br>
    <input type="button" value=" Progress " onClick="animr('po', 1, 1, 100)">
    </td>
  </tr>
</table>
</body>
</html>


赞0
踩0
☆收藏0

本文来自武鸣人网站，转载请注明出处

本文地址：https://www.wuming.ren/a/337.html

按钮控制
回帖

js实现按钮操作图层特效 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息