js为加载图片的实现过程

最新推荐文章于 2022-11-14 12:07:33 发布

ap0406708

最新推荐文章于 2022-11-14 12:07:33 发布

阅读量1k

点赞数

分类专栏： java图片文章标签： border html button javascript 浏览器 up

本文链接：https://blog.csdn.net/ap0406708/article/details/3290365

版权

java图片专栏收录该内容

1 篇文章 0 订阅

订阅专栏

通过这个操作,自己对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

设置或获取对象的文本。

ap0406708

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js为加载图片的实现过程

通过这个操作,自己对js有了更深一层的理解.js是什么呢? js是操作浏览器的语言.有什么用呢? 可以在客户的游览器动态加载一些内容上去.它是怎么样做的? 先要明白一些基本的原理,游览器显示html文本,是将它的以下是详细的操作过程. 一.问题提出,想将下面代码改为用js在运行时加载
复制链接

扫一扫

专栏目录