博主信息
博文 49
粉丝 0
评论 1
访问量 55980
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
js实战体验课明星相册 ----2018年03月30日 0点40分
失去过去的博客
原创
892人浏览过

1.jpg2.jpg3.jpg4.jpg

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<style type="text/css">
		*{
			margin: 0;padding: 0;
		}
		.box{
			margin: 20px auto;
			background: #ECECEC;
			width: 600px;
			height: 700px;
			box-shadow: 10px 10px 10px 5px #ACACAC;
			text-align: center;
			border-radius:30px ;
		}
		.box .header ul{
			
			list-style: none;
		}
		.box .header ul li{
				border-radius:30px ;
			float: left;
			background: skyblue;
		}
		.box .header ul li a{
			display: block;
			height: 30px;
			width: 150px;
			color: #000000;
			text-decoration: none;
			line-height: 30px;
		
		}
		.box .header ul li:hover{
			background-color: coral;
			font-size: 1.2em;
			border-radius:30px ;
			box-shadow: 10px 10px 10px 5px #ACACAC;
		}
		.pic img{
			width: 100%;
			height: 540px;
		}
	</style>
	<title>1.相册案例实战</title>
</head>
<body>
	<!--
    	作者:1083396620@qq.com
    	时间:2018-03-29
    	描述:
    	创建DOM结构
    	
    -->
	<div class="box">
		<h1>明星相册</h1>
		
		<div class="header">
			<ul>
				<li><a href="images/1.jpg" title="《仙剑奇侠传》,《步步惊心》,《轩辕剑之天之痕》,《女医·明妃传》。。。" onclick="change(this);return false">刘诗诗</a></li>
				<li><a href="images/2.jpg" title="《射雕英雄传》,《雪山飞狐》,《逃学威龙2》,《大话西游之大圣娶亲》。。。" onclick="change(this);return false">朱茵</a></li>
				<li><a href="images/3.jpg" title="《漂亮的李慧珍》,《三生三世十里桃花》,《烈火如歌》,《克拉恋人》。。。" onclick="change(this);return false">迪丽热巴</a></li>
				<li><a href="images/4.jpg" title="《你是我的命运》,《爱情雨》,《王在相爱》,《武神赵子龙》。。。" onclick="change(this);return false">林允儿</a></li>
			</ul>
		</div>
		<div class="pic">
			<img src="images/zwt.jpg" alt="img" id="Img"/>
		</div>		
		<div class="footer">
			<p id="til"></p>
		</div>
		
		
	</div>
	
	
</body>
</html>
<script type="text/javascript">
	function change(pic){
		var getpic = pic.href
		var gettit = pic.title
		var getclasspic =document.getElementById('Img')
		var getidtil = document.getElementById("til")
		var getname = pic.innerHTML
		getclasspic.src = getpic
		getidtil.innerHTML =  getname+':'+'<span style="color:coral">'+ gettit+'</span>'
	}
	
	
</script>

运行实例 »

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


批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学