導航:首頁 > 萬維百科 > 網頁設計js添加圖片

網頁設計js添加圖片

 發布時間：2020-11-28 23:59:54

1、如何用jsp或javascript製作一個上頁面？可更換頁面中的圖片。

jsp是在伺服器上跑的，可以直接輸出一些一段html，展示圖片，要更換圖片的話，需要用到瀏覽器上的技術，如javascript，更換圖片節點的src屬性就可以了。

2、網頁設計中javascript——濾鏡效果

HTML基本代碼，咱不多說，相信你也懂……
說說JS部分，
變數 i 是用來代表將要上場的圖片的，【document.getElementById("img1").src="img/"+i+".jpg"; //設置該圖片容器中的圖片，根據I的值修改圖片】這段代碼控制上場的圖片，（這里也有個要求，就是要求你希望上場的圖片的名都是類似1.jpg、2.jpg、3,jpg、4.jpg……這樣的規則的，並且是放在img這個目錄下的）。
【if(i>11) {i=1;} 】這段開始部分的代碼，意味著，將要上場的圖片最多是11張；
變數 j 是用來代表濾鏡效果類型的，所以【var j=Math.random()*22+1;//圖片隨機產生】這個的注釋是錯誤的，應該是「控制濾鏡效果隨機產生」。
接下來，【document.getElementById("img1").style.filter="RevealTrans (Transition="+j+")"; //設置IMG1這個放圖片的容器的動態隨機濾鏡效果】正如注釋所寫，是為IMG1這個容器添加濾鏡效果的。假如，j=20，那代碼不就是【document.getElementById("img1").style.filter="RevealTrans (Transition=20)"; 】了？其中【.style.filter="RevealTrans (Transition=20)"】就是添加濾鏡的關鍵代碼，函數RevealTrans和其參數Transition，你需要再多去看看相關資料就能明白了。
IE下的濾鏡變換效果有很多，似乎總共有22種，這里Transition=20就是選擇其中的一種而已嘛，就這么簡單。
【document.getElementById("img1").src="img/"+i+".jpg"; 】就是為IMG1這個容器添加圖片，不多解釋了。
總之，JS部分的代碼實現兩個功能，第一是為IMG1添加濾鏡效果並應用和啟動這個效果，第二是添加圖片（也就是圖片的地址嘛）。你對不懂的地方，我想應該是容器的 filter 屬性，你需要自己去查看相關資料了。

最後我要提醒你的是，這個濾鏡效果只有在IE下有效，別的瀏覽器是沒任何效果的。

補充：
+i+、+j+：這里的加號是鏈接符，表示把兩邊的字元串鏈接起來；
看源代碼中， "img/"+i+".jpg"，這里的 i 不就是個變數而已嘛，假如現在i=5，那麼這段代碼不就是 "img/"+5+".jpg"，最後的結果就是 "img/5.jpg"。
「+」號能作為算術運算符，也能作為字元串的鏈接符，例如++i，j++就是算術運算符，產生的結果是變數自加1吧，又例如"abc"+"def"就是字元串鏈接符，產生的結果就是把這兩個字元串鏈接起來，結果是"abcdef"。

如果這塊你看不懂，我覺得你的程序基礎知識似乎還差不少啊，再多看看

3、網頁設計請教，如何將html文件和圖片完全載入後再展示網頁? 有什麼代碼或Js之類?

在index.html 加三個浮動窗口載入1.html,2.html,3.html。當1.html載入完了 就跳轉到1.html

4、javascript 網頁設計 怎麼在同一位置顯示幾張不同的圖片（圖片自動變換）。

<script>
var arr=new Array()
arr[0]="1.jpg"; //這里放圖片路徑
arr[1]="2.jpg";
arr[2]="3.jpg";
arr[3]="4.jpg";
arr[4]="5.jpg";
var i=0;
function image_()
{
var ima=document.getElementById("image");
ima.src=arr[i]
i++;
if(i==5)
i=0
setTimeout("image_()",1000) //一秒鍾調用一次
}

</script>
<body onLoad="image_()">
<img id="image" src="1.jpg" width="140" height="105">
</body>

5、網頁製作 怎麼改變圖片的大小？用js腳本

高度是 height,
你最少寫了三個 heigt =.=

6、網頁製作，頁面設計，我在網頁 body裡面設置了背景圖片，如何用js讓背景圖片每隔幾秒就換一次

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
.bg1 { background:#eee;}
.bg2 { background:#ccc;}
</style>

<SCRIPT LANGUAGE="JavaScript">
<!--
function SetBackground()
{
var obj = document.getElementsByTagName("body")[0];
if (obj.className == "bg1") obj.className = "bg2";
else obj.className = "bg1";
}
window.setInterval(SetBackground,1000);
//-->
</SCRIPT>
</HEAD>

<BODY>

</BODY>
</HTML>

修改.bg1 { background:#eee;} .bg2 { background:#ccc;} 背景改成你的圖片就行了

7、製作網頁上面的滾動圖片是不是要用到js

是的

<style>    
*{ margin:0; padding:0; list-style:none;}    
#box{ width:534px; height:300px; position:relative; margin:50px auto; overflow:hidden;}    
#box ul{ position:absolute; left:0; top:0;}    
#box ul li{ float:left; width:534px; height:300px;}    
#box ul li img{ height:300px;}    
#box a{ transition:.2s all ease;}    
#box .prev,#box .next{position:absolute;  top:50%; z-index:2; height:80px; line-height:80px; background:rgba(0,0,0,0.6); color:#fff; width:80px; text-align:center; margin-top:-40px; display:-none;}    
#box .prev{ left:0;}    
#box .next{ right:0;}    
#box a:hover{ background:rgba(255,0,0,0.4);}    
#box ol{ position:absolute; width:120px; left:50%; margin-left:-60px; bottom:10px;}    
#box ol li{ width:20px; height:20px; background:#f60; float:left; margin:2px; text-align:center; text-indent:-9999px; border-radius:50%;}    
#box ol li.active{ background:#fff;}    
</style>    
<script>    
window.onload=function(){    
var oBox=document.getElementById('box');    
var oPrev=document.getElementById('prev');    
var oNext=document.getElementById('next');    
var oUl=oBox.getElementsByTagName('ul')[0];    
var aLi=oUl.children;    
var oOl=oBox.getElementsByTagName('ol')[0];    
var aBtn=oOl.children;    
var timer = null;    
var iNow=0;    
var left=0;    
    
//復制一份內容    
oUl.innerHTML+=oUl.innerHTML;    
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';    
    
var W=oUl.offsetWidth/2;    
    
//選項卡    
for(var i=0; i<aBtn.length; i++){    
(function(index){    
aBtn[i].onclick=function(){    
if(iNow%aBtn.length==aBtn.length-1 && index==0){    
iNow++;
    
}    
if(iNow%aBtn.length==0 && index==aBtn.length-1){    
iNow--;
    
}    
iNow=Math.floor(iNow/aBtn.length)*aBtn.length+index;    
tab();    
}    
})(i);    
}    
    
function tab(){    
for(var i=0; i<aBtn.length; i++){    
aBtn[i].className='';    
}    
if(iNow<0){    
aBtn[(iNow%aBtn.length+aBtn.length)%aBtn.length].className='active';    
}else{    
aBtn[iNow%aBtn.length].className='active';
    
}    
//oUl.style.left=-iNow*aLi[i].offsetWidth+'px';    
move(oUl,-iNow*aLi[i].offsetWidth);
    
}    
    
//next    
oNext.onclick=function(){    
iNow++;    
tab();    
//document.title=iNow;    
};    
oPrev.onclick=function(){    
iNow--;    
tab();    
    
//document.title=iNow;    
};    
    
oNext.onmouseleave = oPrev.onmouseleave = function(){    
timer = setInterval(function(){    
tab();    
iNow++;    
},2000);    
};    
oNext.onmouseenter = oPrev.onmouseenter = function(){    
clearInterval(timer);    
};    
    
oNext.onclick();    
clearInterval(timer);    
timer = setInterval(oNext.onclick,2000);    
    
function move(obj,iTarget){    
var count=Math.round(500/30);    
var start=left;    
var dis=iTarget-start;    
var n=0;    
clearInterval(obj.timer);    
    
obj.timer=setInterval(function(){    
n++;    
    
var a=1-n/count;    
left=start+dis*(1-Math.pow(a,3));    
    
if(left<0){    
obj.style.left=left%W+'px';
    
}else{    
obj.style.left=(left%W-W)%W+'px';
    
}    
    
if(n==count){    
clearInterval(obj.timer);
    
}    
},30);    
}    
};    
</script>    
</head>    
<body>    
<div id="box">    
<a href="javascript:;" class="prev" id="prev">prev</a>    
   <a href="javascript:;" class="next" id="next">next</a>    
<ul>    
    <li><img src="img/0.jpg"></li>    
    <li><img src="img/1.jpg"></li>    
    <li><img src="img/2.jpg"></li>    
    <li><img src="img/3.jpg"></li>    
    <li><img src="img/4.jpg"></li>    
   </ul>    
   <ol>    
    <li class="active">0</li>    
       <li>1</li>    
       <li>2</li>    
       <li>3</li>    
       <li>4</li>    
   </ol>    
</div>

8、網頁設計 js 實現點擊按鈕，輸入坐標添加圖片

當然有！天津啊圖片js完成讀入資料庫需要後台語言完成這個是需要前後台配合的

9、網頁設計 調用JS改變圖片

你可以把圖片命名為1-n 然後每點一次增加1，到達最後一張時，讓他等於1

<html>
<head>
<script type="text/javascript">
var count=0;
function Change(){
count++;
if(count>18){
count=1;
}
i = document.getElementById("image");
j = document.getElementById("txt");
j.value="當前專照片第"+count+"張";
if(count<10){
i.src="../../image/00"+count+".jpg";
}else{
i.src="../../image/0"+count+".jpg";
}
}
</script>
</head>

<body onload="Change();">
<p>點擊圖片，切屬換到下一張，最後一張的下一張是第一張</p>
<p><input id="txt" type="text" /></p>
<div>
<img id="image" name="image" src="" onclick="Change();" />
</div>
</body>
</html>

10、網頁裡面就一張室內設計圖片 怎麼在這個頁面加些動畫效果呢 。比如js效果 或者啥的

很多時候會反圖片當背景,上面加個透明適合的flash
也有用JS圖片特效,把多張圖片做個切換的效果

與網頁設計js添加圖片相關的知識