jquery实现简单的明星相册
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相册</title>
<style type="text/css">
h2{
padding-top: 35px;
}
body{
background-color: #FAFAFA;
}
.box{
width: 500px;
height:800px;
background-color: white;
box-shadow: 2px 2px 2px #999;
text-align: center;
margin: 20px auto;
}
.box ul{
margin:0;
padding:0;
/*将ul转为BFC独立块,使之不受内部浮动元素的影响*/
overflow: hidden;
}
.box ul li {
list-style-type: none;
float:left;
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 {
background-color: lightgreen;
}
.box .pic {
width: 315px;
height:560px;
border: 1px solid lightgray;
/*消除img标签底部的空间区*/
line-height: 1px;
margin: auto;
margin-bottom: 50px;
}
.box .pic img {
width: 100%;
height: 100%;
}
</style>
<!-- 外部引用JQ -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(){
var picUrl = $(this).attr('href')
var picInfo = $(this).attr('title')
var picName = $(this).html()
// 更新img标签的背景图片
$('#img').attr('src',picUrl)
// 更新P标签的内容
$('#info').html('<span style="color:coral">'+picName+':'+picInfo+'</span>')
return false
})
})
</script>
</head>
<body>
<div class="box">
<h2>动漫相册</h2>
<div class="pic">
<img src="" alt="" id="img">
</div>
<ul>
<li>
<a href="../0328/images/1.jpg" title="动漫人物一" class="click">人物一</a>
</li>
<li class="click">
<a href="../0328/images/2.jpg" title="动漫人物二" class="click">人物二</a>
</li>
<li class="click">
<a href="../0328/images/3.jpg" title="动漫人物三" class="click">人物三</a>
</li>
<li class="click">
<a href="../0328/images/4.jpg" title="动漫人物四" class="click">人物四</a>
</li>
</ul>
<p id='info'></p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图
总结
行内方法是无法调用$(document).ready(function()里面的方法。
要想使用a标签的点击事件，需要在$(document).ready(function()里面使用JQ编写a标签的点击事件。
reutrun false是防止点击a标签后页面跳转。