重点:
1/调取js的方法<script type="text/javascript"></script>
2/var: 用于申明一个变量
3/document.getElementById:函数,用于获取某个ID
4/innerHTML:获取该标签上的文本内容
5/var XX=pic.title(变量获取到指定的title)
6/ xx.src(变量的图片路径)
7/dd.innerHTML='<span style=color:red>'+picName+':'+picInfo+'</span>'
(注明:文本或html内容,需要用两个单引号括住,innerHTML里面可以写html代码)
代码部分:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2.实战:明星相册</title> <style type="text/css"> .box { width: 500px; height: 700px; background-color: #efefef; border: 1px solid lightgray; margin: 20px auto; text-align: center; color: #636363; box-shadow: 2px 2px 2px #999; } .box ul { margin:0; padding:0; /*将ul转为BFC独立块,使之不受内部浮动元素的影响*/ overflow: hidden; } .box ul li { list-style-type: none; float:left; /*width: 100px;*/ /*height: 40px;*/ background-color: skyblue; margin-left: 20px; } .box ul li a { /*将a转为块元素,并设置为li的宽高,这样可以使整个li可以被点击*/ display: block; width: 100px; height: 40px; line-height: 40px; color: white; text-decoration: none; } .box ul li:hover { font-size:1.2em; background-color: coral; } .box .pic { width: 450px; height:450px; border: 1px solid lightgray; /*消除img标签底部的空间区*/ line-height: 1px; margin: auto; margin-top: 50px; } .box .pic img { width: 100%; height: 100%; } .box .pic img:hover { /*border-radius: 50%;*/ } </style> </head> <body> <!-- 知识点: 1.js代码可以写在哪里?2.js如何调用的? 3.js函数的使用语法--> <div class="box"> <h2>明星相册</h2> <ul> <!-- <li><a href="../images/zly.jpg" onclick="document.getElementById('img').src = this.href;return false">赵丽颖</a></li> --> <li> <a href="../img/js/zly.jpg" title="《楚乔传》,《花千骨》,《陆贞传奇》..." onclick="changePic(this);return false">赵丽颖</a> </li> <li> <a href="../img/js/gyy.jpg" title="《倚天屠龙记》,《咱们经婚吧》,《爱无悔》..." onclick="changePic(this);return false">高圆圆</a> </li> <li> <a href="../img/js/sl.jpg" title="《那年花开月正圆》,《甑环传》,《玉观音》..." onclick="changePic(this);return false">孙俪</a> </li> <li><a href="../img/js/fbb.jpg" title="《还珠格格》,《武媚娘传奇》,《我不是潘金莲》..." onclick="changePic(this);return false">范冰冰</a></li> </ul> <div class="pic"> <img src="../images/zwt.png" alt="" id="img"> </div> <p id='info'></p> </div> <script type="text/javascript"> function changePic(pic){ var picImg=pic.href var img=document.getElementById('img') img.src=picImg var picInfo=pic.title var picName=pic.innerHTML var dd=document.getElementById('info') dd.innerHTML='<span style=color:red>'+picName+':'+picInfo+'</span>' } </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例