码迷,mamicode.com
首页 > 编程语言 > 详细

javaScript学习:图片库

时间:2016-08-16 21:46:25      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:

Html:

 1 <h1>Snapshots</h1>
 2 <ul>
 3     <li><a href="images/1.jpg" onclick="show(this);return false;" title="one" >第一张图片</a></li>
 4     <li><a href="images/2.jpg" onclick="show(this);return false;" title="two" >第二张图片</a></li>
 5     <li><a href="images/3.jpg" onclick="show(this);return false;" title="three" >第三张图片</a></li>
 6     <li><a href="images/4.jpg" onclick="show(this);return false;" title="four" >第四张图片</a></li>
 7 </ul>
 8     <!--onclick事件函数触发后返回的是false 所以链接不会被打开  -->
 9     <a href="http://www.baidu.com" onclick="return false">click me to baidu</a>
10 <img id="pla" src="images/6.jpg" / alt="图片库">

JavaScript:

 1 <script type="text/javascript">
 2         /*
 3         把这个函数命名为showPic,给这个函数的参数命名为whichpic
 4         获取pla的位置,把把它赋给变量placeholder
 5        使用setAttribute方法对placeholder元素的src属性进行刷新
 6         }*/
 7         function show(pic){
 8             var sour = pic.getAttribute(‘href‘);
 9             var placeholder  = document.getElementById(‘pla‘);
10             placeholder.setAttribute(‘src‘,sour);
11         }
12 </script>

 

javaScript学习:图片库

标签:

原文地址:http://www.cnblogs.com/powerplay/p/5777691.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!