Heim  >  Artikel  >  Web-Frontend  >  JavaScript-Notizen zur Verarbeitung von Bildern

JavaScript-Notizen zur Verarbeitung von Bildern

高洛峰
高洛峰Original
2016-11-26 09:37:53947Durchsuche

 JavaScript最常见也最显著的用途之一是在网页上添加动画,从而在视觉上更具有吸引力。其中有翻转器效果,广告条应用。记录两个实用的示例:
     (一)在循环广告条中添加链接
     这样可以让访问者通过点击链接进入与广告相关的站点。
广告条所需的HTML
[html]
         
 
 
    Rotating Banner with Links 
     
 
 
   

 
           
 
 
 

以下的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];//将当前文档窗口设置为文本字符串
http://www">http://www.加上adURL的的值                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]
 
 
    Rotating Random Banner 
     
 
 
   

 
        Ad Banner 
   


Das folgende js-Skript (script02.js) kann Bilder ausgehend von einem zufälligen Bildfenster anzeigen . onload = ChoosePic;


var adImages = new Array("images/reading1.gif","images/reading3.gif");

function ChoosePic() {
thisAd = Math.floor((Math.random() * adImages.length));
document.getElementById("adBanner").src = adImages[thisAd ] ;

rotieren();
}

Funktion rotieren() {
if (thisAd == adImages.length) {
thisAd = 0 ;
}
document.getElementById("adBanner").src = adImages[thisAd];

setTimeout(rotate, 3 * 1000);



Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn