Welcome, Old Sport!

带加载的伸缩效果

by ilikecss ON 2012/04/18 5806

带加载的伸缩效果

今天制作了一款带加载的伸缩效果,可用于显示和隐藏文字,如果你想在博客文章上用此效果我也不介意,只要你喜欢。脚本已经封装,喜欢的朋友可以在文章最后下载。

Step1. 创建HTML

<ul class="posts">
     // 循环li部分
    <li class="post">
    <div class="excerpt"><p>test test test test test test test test test test</p></div>  
    <a href="#"><img width="700" height="240" title="" alt="Titanic 3d" src="img/Titanic-3d-Rose.jpg"></a></li>
</ul>

Step2. 创建CSS

#content ul.posts { 
	width: 700px; 
	margin: 0 auto;
}
#content ul.posts li.post a {
    color: #333333;
    padding: 0;
}
#content .posts .excerpt {
    display: none;
    padding: 0 0 10px;
}
#content ul.posts li.post div.load-excerpt {
    background: #507596;
    height: 3px;
    position: absolute;
    top: -5px;
    width: 300px;
}
#content .posts .excerpt p {
    padding: 0 10px 0.5em;
	line-height: 150%;
}
#content ul.posts li.post {
    background: #FFFFFF;
    color: #666666;
    height: 240px;
    margin-bottom: 20px;
    position: relative;
}

Step3. 插入jQuery和脚本包

<script src="js/script.js" type="text/javascript"></script>
7条评论
  1. #1

    金刚禅狮子吼说道:

    好久没有素材下了了~ :roll:

  2. #2

    loethen说道:

    :smile: 效果不错

  3. #3

    Q_Queenie说道:

    楼主很专业!!
    本人只会很简单的CSS
    而且总是出错
    :lol:




TOP