导航:首页 > 万维百科 > 网页设计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添加图片相关的知识