博客列表 >2018/03/28js基础:明星相册制作

2018/03/28js基础:明星相册制作

梁凯达的博客
梁凯达的博客原创
2018年04月09日 12:02:34930浏览

重点:

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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议