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

wqnljy 2010-02-03 02:31:25

JavaScript 实现像画卷展开一样的效果，谢谢大家。

...全文

526 12 打赏收藏转发到动态举报

写回复

用AI写文章

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>