JavaScript笔记之处理图像

javascript最常见也最显著的用途之一是在网页上添加动画，从而在视觉上更具有吸引力。其中有翻转器效果，广告条应用。记录两个实用的示例：
     （一）在循环广告条中添加链接
     这样可以让访问者通过点击链接进入与广告相关的站点。
广告条所需的html
[html]
        
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>rotating banner with links</title>
    <script type="text/javascript" src="script01.js"></script>
</head>
<body bgcolor="#ffffff">
    <div align="center">
        <a href="http://www.php1.cn/">     </div>
</body>
</html>
以下的js脚本(script01.js)演示如何将循环广告条转换为真正的可点击的广告条
[javascript]
window.onload = initbannerlink;
var thisad = 0;
function initbannerlink() {
    if (document.getelementbyid(adbanner).parentnode.tagname == a) {
        document.getelementbyid(adbanner).parentnode.onclick = newlocation;
    }
//检查adbanner对象是否包围在链接标签中，如果是这样，那么当点击链接时，将调用newlocation()函数.
    rotate();
}
function newlocation() {
    var adurl = new array(negrino.com,sun.com,microsoft.com);
    document.location.href = http://www. + adurl[thisad];//将当前文档窗口设置为文本字符串<a href="http://www.php1.cn/">http://www>http://www.加上adurl的</a>的值                return false;//告诉浏览器不要再加载这个href，否则会加载url两次
}
function rotate() {
    var adimages = new array(images/banner1.gif,images/banner2.gif,images/banner3.gif);
thisad++;
    if (thisad == adimages.length) {
        thisad = 0;
    }
    document.getelementbyid(adbanner).src = adimages[thisad];
settimeout(rotate, 3 * 1000);
}
注意:adurl数组中的成员数量必须与adimages数组相同，这个脚本才能正常工作
          建一个images文件夹，然后存入banner1.gif,banner2.gif,banner3.gif三张gif格式图片
(二)随机开始循环显示图像
如果有很多图片需要显示，可能不希望在每次加载页面时都从同样的图像开始显示，下面html和js组合可以实现随机开始
[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>rotating random banner</title>
    <script type="text/javascript" src="script02.js"></script>
</head>
<body bgcolor="#ffffff">
    <div align="center">
        <img src="images/spacer.gif" width="400" height="75" id="adbanner" alt="ad banner" />
    </div>
</body>
</html>
以下js脚本(script02.js)可以从一个随机图像开始显示图像
[javascript]
window.onload = choosepic;
var adimages = new array(images/reading1.gif,images/reading2.gif,images/reading3.gif);
var thisad = 0;
function choosepic() {
    thisad = math.floor((math.random() * adimages.length));
    document.getelementbyid(adbanner).src = adimages[thisad];
rotate();
}
function rotate() {
    thisad++;
    if (thisad == adimages.length) {
        thisad = 0;
    }
    document.getelementbyid(adbanner).src = adimages[thisad];
settimeout(rotate, 3 * 1000);
}

JavaScript笔记之处理图像

推荐信息