溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
知識點：html標簽，css樣式屬性，代碼優化，行業規范，布局思路，javascript基礎，jquery方法，邏輯思維。
html代碼：
<div class="con">
<div class="top">
<img src="images/my.jpg" height="667" width="500" alt="關鍵詞" />
<p>經典課程集</p>
</div>
<div class="pic-list">
<div class="content">
<div class="pic"></div>
<div class="bq">
<span>2016/10/15</span>
<img src="images/r.png" />
<i></i>
</div>
</div>
<div class="content">
<div class="pic"></div>
<div class="bq">
<span>2016/10/15</span>
<img src="images/r.png" />
<i></i>
</div>
</div>
<div class="content">
<div class="pic"></div>
<div class="bq">
<span>2016/10/15</span>
<img src="images/r.png" />
<i></i>
</div>
</div>
<div class="content">
<div class="pic"></div>
<div class="bq">
<span>2016/10/15</span>
<img src="images/r.png" />
<i></i>
</div>
</div>
<div class="content">
<div class="pic"></div>
<div class="bq">
<span>2016/10/15</span>
<img src="images/r.png" />
<i></i>
</div>
</div>
<div class="content">
<div class="pic"></div>
<div class="bq">
<span>2016/10/15</span>
<img src="images/r.png" />
<i></i>
</div>
</div>
<div class="content">
<div class="pic"></div>
<div class="bq">
<span>2016/10/15</span>
<img src="images/r.png" />
<i></i>
</div>
</div>
<div class="content">
<div class="pic"></div>
<div class="bq">
<span>2016/10/15</span>
<img src="images/r.png" />
<i></i>
</div>
</div>
<div class="content">
<div class="pic"></div>
<div class="bq">
<span>2016/10/15</span>
<img src="images/r.png" />
<i></i>
</div>
</div>
<div class="content">
<div class="pic"></div>
<div class="bq">
<span>2016/10/15</span>
<img src="images/r.png" />
<i></i>
</div>
</div>
<div class="content">
<div class="pic"></div>
<div class="bq">
<span>2016/10/15</span>
<img src="images/r.png" />
<i></i>
</div>
</div>
<div class="content">
<div class="pic"></div>
<div class="bq">
<span>2016/10/15</span>
<img src="images/r.png" />
<i></i>
</div>
</div>
<div class="content">
<div class="pic"></div>
<div class="bq">
<span>2016/10/15</span>
<img src="images/r.png" />
<i></i>
</div>
</div>
</div>
</div>css代碼：
<style>
/*瀏覽器兼容問題*/
*{margin:0;/*外邊距*/padding:0;/*內邊距*/}
body{
background:url('images/bg.jpg') fixed;
/*background-attachment:;設置背景圖是否固定或者隨著頁面滾動*/
}
.con{/*以 . 開頭 class命名 類選擇器*/
width:900px;
margin:0 auto;/*上下外邊距0 左右自適應居中*/
}
.con .top{
background:#fff;
width:130px;
height:170px;
text-align:center;/*文本居中對齊*/
font-size:14px;
line-height:20px;
margin-left:150px;
padding-top:15px;
}
.con .top img{
width:100px;
height:auto;
margin:0 auto;
}
.con .pic-list{
width:600px;
border-left:3px solid #00ccff;/*邊框線*/
margin-left:215px;
padding-top:30px;
}
.con .pic-list .content{
width:600px;
height:400px;
margin-bottom:30px;
position:relative;/*相對定位 參照物*/
-webkit-animation:sc 2s;/*定義動畫*/
display:none;
}
.con .pic-list .content .pic{
width:590px;
height:400px;
margin-left:10px;
background:rgba(0,0,0,0.5);
border-radius:10px;/*小圓角*/
box-shadow:0px 0px 4px 4px #737373;/*水平方向 垂直方向 虛化度 范圍 顏色*/
}
.con .pic-list .content .bq{
width:120px;
height:30px;
position:absolute;/*絕對定位*/
top:100px;
left:-116px;
}
.con .pic-list .content .bq span{
display:block;
background:#000;
color:#fff;
width:90px;
height:30px;
text-align:center;
line-height:30px;
float:left;
}
.con .pic-list .content .bq img{
float:left;
margin-top:7px;
}
.con .pic-list .content .bq i{
float:right;
width:6px;
height:6px;
background:#00cc33;
border:2px solid #fff;
border-radius:50%;
margin-top:10px;
}
/*css3 動畫*/
@-webkit-keyframes sc{
from{-webkit-transform:rotate(220deg) scale(0.2)}
to{-webkit-transform:rotate(0deg) scale(1)}
}
</style>javascript代碼：
<script src="js/jquery.js"></script>
<script>
//jq里面如何獲取對象 $// jq函數 $('元素')
$('.content:lt(3)').show();//找到序列號小于3的元素 顯示
//滾動事件
$(window).scroll(function(){
var _top = $(window).scrollTop();//獲取滾動條高度
console.log( _top );
$('.content').each(function(){//遍歷
var _index = $(this).index()+1;//當前序列號
var _height = $(this).offset().top;//獲取到當前content到瀏覽器窗口頂部距離
if( _top < _height ){//優先原則
$('.content:lt('+_index+')').show();
$('.content:gt('+_index+')').hide();
return false;//t跳出遍歷
}
});
});
</script>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
