JavaScript 实现像画卷展开一样的效果

wqnljy 2010-02-03 02:31:25
JavaScript 实现像画卷展开一样的效果,谢谢大家。
...全文
476 12 打赏 收藏 举报
写回复
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
unicode 2010-02-05
  • 打赏
  • 举报
回复
看看这个,用css可以搞定: http://bbs.idcspy.com/thread-79276-1-1.html
luohuayh 2010-02-05
  • 打赏
  • 举报
回复
测试代码没错,但不是LZ想要的效果吧
archko 2010-02-04
  • 打赏
  • 举报
回复
在Meta里有一个参数可以实现整个页面载入时,像滤镜效果的.不过忘了..
其余我想只有DIV高宽一点一点变了,看到的网页也是这样的.
yuzhangqu 2010-02-04
  • 打赏
  • 举报
回复
左右两块遮罩,使遮罩宽度逐渐减小。
luohuayh 2010-02-04
  • 打赏
  • 举报
回复
[Quote=引用 9 楼 teerhu 的回复:]
HTML code<html><head><title>簡單畫卷效果</title><styletype='text/css'>
div{
margin-top:20px;/*border:2px green double;*/
font-size:16px;}
.button{
font-size:16px;
width:55px;
heigth:20px;}</s?-
[/Quote]
测试不通过啊,出现缺少对象的错误!
teerhu 2010-02-04
  • 打赏
  • 举报
回复

<html>
<head>
<title>簡單畫卷效果</title>
<style type='text/css'>
div
{
margin-top:20px;
/*border:2px green double;*/
font-size:16px;
}
.button
{
font-size:16px;
width:55px;
heigth:20px;
}
</style>

<script language="javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript">
$(function(){
var z1=$("#z1"),z2=$("#z2"),tW=$('#t').width()/2;
init();

$("#btn_start").addClass('button').click(function(){

$(z1).animate({width:"0px"},3000);

$(z2).animate({width:"0px",left:(tW*2+$('#t').position().left)},3000);
});

$("#btn_reset").addClass('button').click(function(){

init();
});


});
function init()
{
var z1=$("#z1"),z2=$("#z2"),tW=$('#t').width()/2;

$(z1).add($(z2)).css({background:'green',width:tW,top:$('#t').position().top});

$(z1).css({left:$('#t').position().left});
$(z2).css({left:$('#t').position().left+tW});
}

</script>
</head>

<body>
<input type="button" id="btn_start" value="Start"></input>
<input type="button" id="btn_reset" value="Reset"></input>
<div id="t" style="top:40px;left:40px;height:20px;position:absolute;z-index:102;text-align:center">
祝大家新年快樂,萬事如意!
</div>
<div id="z1" style="position:absolute;z-index:103"></div>
<div id="z2" style="position:absolute;z-index:103"></div>
</body>
</html>

sunshinexrain 2010-02-04
  • 打赏
  • 举报
回复
使用jquery的动画属性
qulcc 2010-02-04
  • 打赏
  • 举报
回复
看看!
lin_wen_jun 2010-02-03
  • 打赏
  • 举报
回复
改变图像所在div的宽度,div的overflow属性为hidden
wqnljy 2010-02-03
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 dh20156 的回复:]
改变元素的宽度就好了,慢慢拉长,不就展开了么 ^_^
[/Quote]
谢谢,但这样效果不太好
dh20156 2010-02-03
  • 打赏
  • 举报
回复
改变元素的宽度就好了,慢慢拉长,不就展开了么 ^_^
nabber 2010-02-03
  • 打赏
  • 举报
回复
这个。。。我不会,关注ing
相关推荐
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2010-02-03 02:31
社区公告
暂无公告