标题 | js实现在同一窗口浏览图片 |
范文 | 在同一窗口浏览图片的方法有很多,本例要为大家介绍的是使用js获取img的src属性后进行替换,有此需要的朋友可以参考下 <!doctype html public -//w3c//dtd html 4.01 transitional//en > <html> <head> <meta http-equiv=content-type content=text/html; charset=utf-8> <title>insert title here</title> <style> h1{position:absolute;margin-left:150px;} ul{position:absolute;margin-top:50px;margin-left:80px;} li{float:left;list-style:none;padding:1em;} img{position:absolute;margin-top:100px;margin-left:100px;width:1000px;height:600px;} p{position:absolute;margin-top:800px;margin-left:550px;} </style> <script> function showcat(a){ var osrc=a.getattribute(href); var oimg=document.getelementbyid(img1); oimg.setattribute(src,osrc); var op=document.getelementbyid(p1); var otxt=a.getattribute(title); op.childnodes[0].nodevalue=otxt;; } </script> </head> <body> <h1>cat home</h1> <ul> <li> <a href=img/1.jpg title=我是白猫咪 onclick=showcat(this);return false;>白猫咪</a> </li> <li> <a href=img/2.jpg title=我是黑猫咪 onclick=showcat(this);return false;>黑猫咪</a> </li> <li> <a href=img/3.jpg title=我是花猫咪 onclick=showcat(this);return false;>花猫咪</a> </li> </ul> <img id=img1 src=img/4.jpg alt=猫咪/> <p id=p1>choose cat photo</p> </body> </html> |
随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板,是学习及工作的有利工具。