JS 遍历(获取点击的是第几个li)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery弹出层垂直居中效果</title>

<style>

*{ margin:0; padding:0; list-style:none; border:0;}

.imgs img{ border:0; width:200px; height:200px;}

.imgs{margin:20px;} 

.zzsc {position: fixed;left: -100%;right:100%;top:0;bottom: 0;text-align: center;font-size: 0; z-index:9999; display:none;}

.zzsc:after {content:"";display: inline-block;vertical-align: middle;height: 100%;width: 0;}

.content{display: inline-block; *display: inline; *zoom:1; vertical-align: middle;position: relative;right: -100%;}

.content_mark{ width:100%; height:100%; position:fixed; left:0; top:0; z-index:555; background:#000; opacity:0.5;filter:alpha(opacity=50); display:none;}

</style>

<script type="text/javascript" src="http://luxury.bjhoutai.com/js/jquery-1.8.2.min.js"></script> 

</head>

<body>

<div class="imgs"> 

<img src=‘http://luxury.bjhoutai.com/images/ad_auto.jpg‘ />

<img src=‘http://luxury.bjhoutai.com/images/ad_home.jpg‘ />

<img src=‘http://luxury.bjhoutai.com/images/ad_nba.jpg‘ />

<img src=‘http://luxury.bjhoutai.com/images/ad_stock.jpg‘ />

<img src=‘http://luxury.bjhoutai.com/images/ad_yuetu.jpg‘ />  

</div> 

<!-- 弹出层部分begin -->

<div class="zzsc">

  <div class="content"><img src="http://luxury.bjhoutai.com/images/ad_home.jpg" /></div>

</div>

<div class="content_mark"></div>

<!-- 弹出层部分end -->  

<script>      

$(‘.imgs img‘).each(function(i) {       

$(this).click(function(){ 

$(‘.zzsc‘).show(0); 

$(‘.zzsc .content‘).children(‘img‘).attr("src",$(‘.imgs‘).children(‘img:eq(‘+i+‘)‘).attr(‘src‘)); 

$(‘.content_mark‘).show(0);

});

}); 

$(‘.content_mark‘).click(function(){

$(‘.zzsc‘).hide(0);

$(‘.content_mark‘).hide(0);

}); 

</script> 

</body>

</html>

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。