您的位置：首页 > Web前端 > JavaScript

js为加载图片的实现过程

2008-11-13 13:19 666 查看
通过这个操作,自己对js有了更深一层的理解.js是什么呢?

js是操作浏览器的语言.有什么用呢?

可以在客户的游览器动态加载一些内容上去.它是怎么样做的?

先要明白一些基本的原理,游览器显示html文本,是将它的<>标签都在内存中建成对象用来显示.加上游览器本身的对象,我们就可以用js用操作这些对象,从而达到添加删除html标签对象,给html对象的属性赋值,加内容等.

以下是详细的操作过程.

一.问题提出,想将下面代码改为用js在运行时加载.

<html>

<head>

<title>

test marquee!

</title>

</head>

<body>

<marquee id="zhao" direction="up" scrollamount=6 scrolldelay=50 scrollAmount=10 onmouseout="this.start()" onmouseover="this.stop()" width="177px" style="height: 540px">

<img id="ImgUserControl1_img1" border="0" src="DefaultImg/企业首页图片1.jpg" style="height:150px;width:177px;border-width:0px;WIDTH: 177px; HEIGHT: 150px" /><BR />

<img id="ImgUserControl1_img2" border="0" src="DefaultImg/企业首页图片2.jpg" style="height:150px;width:177px;border-width:0px;WIDTH: 177px; HEIGHT: 150px" /><BR />

<img id="ImgUserControl1_img3" border="0" src="DefaultImg/企业首页图片3.jpg" style="height:150px;width:177px;border-width:0px;WIDTH: 177px; HEIGHT: 150px" /><BR />

<img id="ImgUserControl1_img4" border="0" src="DefaultImg/企业首页图片4.jpg" style="height:150px;width:177px;border-width:0px;WIDTH: 177px; HEIGHT: 150px" /><BR />

<img id="ImgUserControl1_img5" border="0" src="DefaultImg/企业首页图片5.jpg" style="height:150px;width:177px;border-width:0px;WIDTH: 177px; HEIGHT: 150px" /><BR />

</marquee>

</body>

</html>

二.查看 DHTML对象,看marquee标签对象有什么方法可以在用js 得到后用来加入文本.有什么事件可以起到运行时加载的.

A:添加html内容(insertAdjacentHTML和insertAdjacentText)

运行时触发的事件是body 的onload

http://www.phpx.com/man/dhtmlcn/objects/BODY.html

http://www.w3school.com.cn/js/js_reference.asp

三.查一下这方法怎么样用.因为上面网站查到的只有方法而没有参数.

原型：insertAdajcentHTML(swhere,stext)

insertAdjacentHTML方法：在指定的地方插入html标签语句
参数：
swhere: 指定插入html标签语句的地方，有四种值可用：
1.beforeBegin: 插入到标签开始前

2.afterBegin:插入到标签开始标记之后

3.beforeEnd:插入到标签结束标记前

4.afterEnd:插入到标签结束标记后

stext：要插入的内容

insertAdjacentText方法与insertAdjacentHTML方法类似，只不过只能插入纯文本，参数相同

<html>

<head>

<script language="javascript">

function myfun()

{

var obj = document.getElementById("btn1");

obj.insertAdjacentHTML("afterEnd","<br><input name=/"txt1/">");

}

</script>

</head>

<body>

<input name="txt">

<input id="btn1" name="btn1" type="button" value="更多..." onclick="myfun()">

</body>

</html>

http://hi.baidu.com/inpunis/blog/item/9016fe2de0b07531349bf794.html

四..写出了代码

<html>

<head>

<title>

test marquee!

</title>

<SCRIPT language=javascript>

function myfun()

{

var zhao= document.getElementById("zhao");

for(i = 1;i<=5;i++)

{

zhao.insertAdjacentHTML("beforeEnd","<img id='ImgUserControl1_img" + i + "' border='0' src='DefaultImg/企业首页图片" + i + ".jpg' style='height:150px;width:177px;border-width:0px;WIDTH: 177px; HEIGHT: 150px' /><BR />");

}

}

</SCRIPT>

</head>

<body onload="myfun()">

<marquee id="zhao" direction="up" scrollamount=6 scrolldelay=50 scrollAmount=10 onmouseout="this.start()" onmouseover="this.stop()" width="177px" style="height: 540px">

</marquee>

<input id="btn1" name="btn1" type="button" value="更多..." onclick="myfun()">

</body>

</html>

js还可以用HTML元素的属性去设置

innerHTML设置或获取位于对象起始和结束标签内的 HTML。

innerText设置或获取位于对象起始和结束标签内的文本。

outerHTML设置或获取对象及其内容的 HTML 形式。
outerText设置或获取对象的文本。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航