2017-11-30 用js和jq来写网页上的窗帘效果

来源：互联网发布：ch341a编程器软件编辑：程序博客网时间：2024/06/10 05:43

先贴效果：js和jq不是同时写的，所以图片不一样，但只需要看思路就可以了

JS写法

用到了定时器功能，先设置一个var值，以及一个定时器。

add方法为图片的height值为0px时，触发text(1);

sup则是height值为76px时，触发text(0);

下面是text方法。为1时到76px则清除定时器，自动跳转到sup方法。

为0时到0px则清除定时器，自动跳转到add方法。

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script type="text/javascript">var tm;//设置一个计算机编号setTimeout(add,10);function add(){var v = document.getElementById("abc");abc.style.height = "0px";tm = setInterval("text(1)",10);}function sup(){var v = document.getElementById("abc");abc.style.height = "76px";tm = setInterval("text(0)",10);}function text(type){var v = document.getElementById("abc");if(type == 1){v.style.height = parseInt(v.style.height)+1+"px";if(parseInt(v.style.height)>=76){clearInterval(tm);//这里插个时间延时功能；setTimeout(sup,2000);}  }else if(type == 0){v.style.height = parseInt(v.style.height)-1+"px";if(parseInt(v.style.height)<=0){clearInterval(tm);//这里插个时间延时功能；setTimeout(add,2000);}}}</script><style type="text/css">#abc{margin-left: 200px;width: 981px;height: 0px;overflow: hidden;}</style></head><body><div id="abc"><img src="../images2/banner.gif"></div></body></html>

JQ写法

用到了slidedown和slideup

这里只贴一个方法

$(function(){$("#chuanglian").slideDown(800,function(){$("#guanbi").click(function(){$("#chuanglian").slideUp(600);});});});

这里是图片首先在0.8秒内下拉完成，触发右边的关闭事件，窗帘会在0.6秒内向上圈起至没有。

这里要记住要先导入一个jQuery文件

代码样式：<script src="jquery2.1.js"></script>

上面的关闭是为最上图的关闭按钮方法。

就这样，晚上继续补。

阅读全文

0 0