|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (10) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-02-02
<html>
<head>
<title>animate</title>
<script type='text/javascript' src="jquery/jquery-1.3.1.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
$("#block3").animate({
width: "200px",
height: "200px",
fontSize: "20px",
borderWidth: "1px",
top:"400px",
left:"400px",
opacity: "show"
}, 3000 );
});
$("#stop").click(function(){
$("#block3").stop();
});
$("#right").click(function(){
$(".block").animate({left: '+50px'}, "slow");
});
$("#left").click(function(){
$(".block").animate({left: '-50px'}, "slow");
});
$("p").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");
$("#go1").click(function(){
$("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
});
$("#go2").click(function(){
$("#block2").animate( { width: "90%"}, 1000 )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
});
});
</script>
<style>
.showDiv
{
width:100px;
height:100px;
border:1px red solid;
display:none;
position:absolute;
left:50px;
top:50px;
color:#C7EDCC;
background-color:#C7EDCC;
filter: Alpha(Opacity=60);
opacity: 0.6;
}
.block
{
width:200px;
height:200px;
border:1px red solid;
position:absolute;
left:100px;
top:100px;
color:#C7EDCC;
background-color:#C7EDCC;
filter: Alpha(Opacity=60);
opacity: 0.6;
}
</style>
</head>
<body>
<input type="button" value="run" id="go" />
<div id="block3" class ="showDiv">Hello!</div>
<input type="button" value="stop" id="stop" />
<br>
<input type="button" id="left" value="left"/>
<input type="button" id="right" value="right"/>
<div class="block"></div>
<br>
<p>adjfksdjfl</p>
<br>
<input type="button" id="go1" value="Animate Block1" />
<input type="button" id="go2" value="Animate Block2" />
<div id="block1">Block1</div><div id="block2">Block2</div>
</body>
</html>
效果自己点击看看吧，我就不多说了。。 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-02-03
最后修改：2010-02-05
楼主做的在线效果可以下述网页即时观看，的确很好用（主机0205已修复,看来要注重网站安全呵）
http://www.sh2999.com/sh/jqueryShow/animate/animate.html 简单将Jquery改用为Google加速载入 即由 <script type='text/javascript' src="jquery/jquery-1.3.1.js"></script> 改为--------> <script src="http://www.google.com/jsapi" language="javascript"> </script> <script language="javascript"> google.load("jquery", "1.3.2"); </script> |
| 返回顶楼 | |
|
发表时间：2010-02-04
在不同浏览器下竟然有乱码，垃圾
|
| 返回顶楼 | |
|
发表时间：2010-02-04
LZ我试过在IE6,firefox, chrome下浏览都没有问题，是不是没有取得正确的html造成?
我按楼主的附件文件保存为UTF-8格式，并添加在<head>部分添加 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| 返回顶楼 | |
|
发表时间：2010-02-04
是不是用了linux？
|
| 返回顶楼 | |
|
发表时间：2010-02-04
看了一下，left,right 这个效果还可以 。
|
| 返回顶楼 | |
|
发表时间：2010-02-04
呵呵 我这下载下来后看不了，js错误。。。
|
| 返回顶楼 | |
|
发表时间：2010-02-04
发帖前，测试做的不足，错误很多
|
| 返回顶楼 | |
|
发表时间：2010-02-04
如果说我的程序测试不足和js错误，我真的没有办法了，我这边的IE8和Firefox都是好的，没有js错误，至于乱码，确实是我的文件有问题，不过我目前只是发现在Firefox的firebug下会出现乱码，在页面上不会的，这是因为我是用UtralEdit编写的程序，保存的时候，编码是默认的，所以有这个问题，大家可以不用我上传的文件，自己写一遍，也可以拷贝上面的。
|
| 返回顶楼 | |
|
发表时间：2010-02-05
试了一下，还不错。
|
| 返回顶楼 | |
