1、網頁設計中所有JS特效的加入 如何做得(軟體Dreamwear)
像下面這樣寫,包含在<head></head>標簽裡面,其中src="js/control.js",js就文件夾,control.js是js特效文件,這里因為control.js文件在js這個文件夾下,所以要進入該文件找到它。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>網站名</title>
<link rel="stylesheet" href="styles/base-top.css" type="text/css" />
<link rel="stylesheet" href="styles/base-content.css" type="text/css" />
<link rel="stylesheet" href="styles/base-foot.css" type="text/css" />
<script src="js/jquery-1.4.2.js"></script>
<script language="javascript" src="js/control.js"> </script>
<script language="JavaScript" src="js/filter.js"> </script>
</head>
2、網頁設計 調用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>
3、網頁製作圖片特效,滑鼠放上去圖片出現內發光效果。希望是js特效。不要flash。謝謝
<input type="image" src="images/1.gif" onmousemove="this.src='images/2.gif'" onmouseout="this.src='images/1.gif'" />
4、html動態網頁設計,也就是考察javascript語言。以下是題目,怎麼製作一個多幅圖片切換的特效。
setTimeout()方法是定時執行抄某一個函數,所以你就可以根據這個方法這樣寫,我大概說一下思路。
var num = 0;
function testImg(){
var imgs = document.getElementByTageName("img");//img是圖片引入標簽裡面的src是圖片路徑
imgs[num].style.display='true';
if(num>imgs.length){
return false;
} else {
num ++;
setTimeout(" testA()",500);
}
}
function initImg(){
setTimeout(" testA()",500);
}
5、用JavaScript製作一個注冊網頁,能驗證的,效果能跟下面圖片一樣的,謝謝,希望是完整代碼。
<!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" >
function nm(){
name = document.getElementById("name").value
if(name==''){
document.getElementById("namelable").style.color="red"
document.getElementById("namelable").innerHTML='不能為空'
return false;
}else{
document.getElementById("namelable").innerHTML=''
return true;
}
}
function p(){
var pwd = document.getElementById("pwd").value
if(pwd==''){
document.getElementById("pwdlable").style.color="red"
document.getElementById("pwdlable").innerHTML='不能為空'
return false;
}else{
document.getElementById("pwdlable").innerHTML=''
return true;
}
}
function p1(){
var pwd = document.getElementById("pwd").value;
var pwd1 = document.getElementById("pwd1").value;
if(pwd==pwd1){
document.getElementById("pwdlable1").innerHTML=''
return true;
}else{
document.getElementById("pwdlable1").style.color="red"
document.getElementById("pwdlable1").innerHTML='不能為空'
return false;
}
}
function su(){
if(nm()&p()&p1()){
}
}
</script>
</head>
<body>
姓名<input type="text" id="name" onblur="nm()"/>
<label id="namelable"></label>
<br />
設置密碼:<input type="password" id="pwd" onblur="p()"/>
<label id="pwdlable"></label>
<br />
重置密碼:<input type="password" id="pwd1" onblur="p1()"/> <label id="pwdlable1"></label>
<br />
<input type="button" value="提交" onclick="su()"/>
</body>
</html>
6、網頁製作:誰給我發個js實現圖片橫向滾動的源代碼?
<div id=demo style="width:800px; overflow:hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id=demo1>
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>
</tr>
</table>
</td>
<td id=demo2></td>
</tr>
</table>
</div>
<script>
var speed=20;
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
function Marquee(){
if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
else{
document.getElementById("demo").scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed)
document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)}
document.getElementById("demo").onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
id為demo的div 寬度是在版面上要顯示出的寬度,這個是必須定義的,還有overflow:hidden這個也是必須的
內容放在demo1的td裡面
你放進去滾動的內容寬度必須大於demo的寬度才能滾動,當然這個寬度隨你自己定
理論上是可以放無限寬的數據
滑鼠懸停就停止滾動,離開繼續滾動
7、網頁設計中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"。
如果這塊你看不懂,我覺得你的程序基礎知識似乎還差不少啊,再多看看
8、網頁製作 怎麼改變圖片的大小?用js腳本
高度是 height,
你最少寫了三個 heigt =.=
9、我准備找工作,會CSS+div製作網頁,JS能修改,網頁也做過不少,都是靜態頁面加上個特效,沒有設計圖.PS修圖會
掌握的技能不很全面造成的
你是做前端開發的 ps fl 設計類必須掌握的
html css js 也是要掌握的