垂直滚动图片

ゝ一纸荒年。 2022-07-16 17:49 228阅读 0赞

这个效果不美观，只要了解的是函数如何进行调用的。函数循环还可以调用animate,控制动画的时间就可以实现隔一段时间调用一次函数，而不一定一直使用setTimeout()函数。

<!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=utf-8" />  
<title>垂直滚动图片</title>  
<script type="text/javascript" src="jquery-2.1.3.js"></script>  
<script language="javascript">  
$(document).ready(function()\{  
    var $wrapper=$("\#scroller");/\* 首先我们把ID为scroller的所有元素都存放在wrapper这个变量中，那就是说所有的图片都存在于这个向量中\*/  
var animator=function(imgblock)\{ /\*我么把这个函数命名为animator，这个函数会被下面的语句所调用的，而且这个函数有一个参数，我们会将之前$wrapper存放到这个函数中\*/  
imgblock.animate(\{"bottom":"-"+imgblock.height()+"px"\},10000,/\*10000指的是速度，速度不要加双引号，否则会失效的，而且这里是以毫米来算的，1毫米是最快的。\*/    
function()\{  
$(this).css(\{bottom:imgblock.height()\});/\*执行完animate函数后，这里接着执行，距离底部的距离是整体的高度，也就是说恢复成原始位置\*/  
animator($(this));/\*然后接着调用animator这个函数\*/  
\}  
);  
\}  
animator($wrapper);/\*这里就是开始调用animator的函数的，里面传了个参数$wrapper，因为animator里面也有animator函数的调用，所以一开始执行这个函数的时候，就会出现一直循环函数的效果。\*/  
  
  
\});  
</script>  
<style>  
\#scroller\{  
position:relative;/\* 因为图片的位置会发生变动，所以在这里我们设置为位置是相对的，这个是通过相对于当前的位置来设置图片位置来实现滚动的\*/  
height:760px;  
width:150px;  
\}  
\#scroller a img\{  
border:0px;  
\}  
</style>  
</head>  
  
  
<body>  
<div id="scroller">  
<a href="\#"><img src="1.jpg" width="150px" height="150px"/></a>  
<a href="\#"><img src="2.jpg"width="150px" height="150px" /></a>  
<a href="\#"><img src="4.jpg"  width="150px" height="150px"/></a>  
<a href="\#"><img src="3.jpg" width="150px" height="150px" /></a>  
<a href="\#"><img src="25.jpg" width="150px" height="150px" /></a>  
  
  
</div>  
</body>  
</html>