图片在浏览器窗口中来回滚动

﹏ヽ暗。殇╰゛Y 2022-07-16 14:18 201阅读 0赞

这个主要是了解一些函数的用法，所以做出来的效果并不是很好看的。

<!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="file:///G|/jquery-2.1.3.js"></script>  
<script language="javascript">  
$(document).ready(function() \{  
scroll();  
\});  
function scroll()\{  
    $('img').animate(\{'left':'-160px'\},'slow',  
function()\{  
$(this).css('left','150px');  
$(this).animate(\{'left':'0px'\},'slow');  
\});  
setTimeout('scroll()',1200);  
\}  
</script>  
<style>  
.leng\{  
width:155px;  
border:\#000 1px solid;  
margin:auto;  
overflow:hidden;  
position:relative;  
\}  
.images\{  
width:520px;  
\}  
img\{  
position:relative;  
\}  
</style>  
</head>  
  
<body>  
<div class="leng">  
<div class="images">  
<img src="file:///G|/web/images/1.jpg" width=150px heignt=150px/>  
</div>  
</div>  
</body>  
</html>

这里我们采用了一张图片在窗口中进行那个来回滚动，但是如果有两张图的话，效果没那么好看的。所以想做得美观的，可以去看看jQuery插件。

这个可以回来滚动的有一个较为重要的函数，那就是setTimeout(),这个方法有两个参数，一个是我们将要采取的行动,另一个是在采取指定动作之前所需等待的时间，这个时间是以毫米算的，并且animate这里是有回调函数的，就是执行完自身的内容之后就会执行下一个指定的函数。所以就会有从左边消失之后，从右边出来。

在这里，当载入页面之后，完成所有上述功能的scroll函数就会被触发，使得图片在窗口中滚动。之后过1200毫秒，就会重新执行这个scroll函数。所以页面上就会不停地显示出图片滚动的效果。