js 텍스트 목록 스크롤 효과 구현

12681 단어 js
오늘 추첨 명단 이 홈 페이지 에서 스크롤 하여 보 여 주 는 효 과 를 실현 하려 면 js 로 하 나 를 썼 습 니 다. 코드 는 다음 과 같 습 니 다.
html 코드:
<style type="text/css">

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

a,img{border:0;}

a,a:visited{color:#5e5e5e; text-decoration:none;}

a:hover{color:#b52725;text-decoration:underline;}

.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}

body{font:12px/180% Arial, Helvetica, sans-serif;}

/* ranklist */

.ranklist{height:200px;overflow:hidden;}

.ranklist li{height:26px;line-height:26px; padding-bottom:10px;  overflow:hidden;position:relative;padding:0 70px 0 30px;}

.ranklist li em{background:url(images/mun.gif) no-repeat;width:20px;height:16px;overflow:hidden;display:block;position:absolute;left:0;top:0;text-align:center;font-style:normal;color:#333;}

.ranklist li em{background-position:0 -16px;}

.ranklist li.top em{background-position:0 0;color:#fff;}

.ranklist li .num{position:absolute;right:0;top:0;color:#999;}

</style>

</head>

<body>

    



    <div class="ranklist" id="ranklist">

        <ul style="margin-top:0px;">

            <li class="top">

                <em>01</em><p><a href="http://www.17sucai.com/" target="_blank">js                 </a></p><span class="num">32   </span>

            </li>

            <li class="top">

                <em>02</em><p><a href="http://www.17sucai.com/" target="_blank">js      js       js      </a></p><span class="num">32   </span>

            </li>

            <li class="top">

                <em>03</em><p><a href="http://www.17sucai.com/" target="_blank">jquery    kxbdSuperMarquee                           banner    </a></p><span class="num">32   </span>

            </li>

            <li>

                <em>04</em><p><a href="http://www.17sucai.com/" target="_blank">javascript                、      </a></p><span class="num">32   </span>

            </li>

            <li>

                <em>05</em><p><a href="http://www.17sucai.com/" target="_blank"> javascript                   </a></p><span class="num">32   </span>

            </li>

            <li>

                <em>06</em><p><a href="http://www.17sucai.com/" target="_blank">jquery hover                    </a></p><span class="num">32   </span>

            </li>

            <li>

                <em>07</em><p><a href="http://www.17sucai.com/" target="_blank">flash    3D                   </a></p><span class="num">32   </span>

            </li>

            <li>

                <em>08</em><p><a href="http://www.17sucai.com/" target="_blank">js lazyload            </a></p><span class="num">32   </span>

            </li>

            <li>

                <em>09</em><p><a href="http://www.17sucai.com/" target="_blank">FlippingBook        ,              </a></p><span class="num">32   </span>

            </li>

            <li>

                <em>10</em><p><a href="http://www.17sucai.com/" target="_blank">    jquery    flash           </a></p><span class="num">32   </span>

            </li>

        </ul>

    </div>

js 코드:
<script type="text/javascript">

    var scrtime;

    function scrollTextList() {

        /// <summary>

        ///       

        /// </summary>

        scrtime = window.setInterval(function () {

            var $ul = $("#ranklist ul");



            var liHeight = $ul.find("li:first").height();

            $ul.animate({ marginTop: -liHeight + "px" }, 500, function () {



                $ul.find("li:first").insertAfter($ul.find("li:last"));

                $ul.css({ marginTop: 0 });

            });

        }, 2000);

    }

    $(function () {

        scrollTextList();

        $("#ranklist").mouseover(function () {

            clearInterval(scrtime);

        }).mouseout(function () {

            scrollTextList();

        });

       

    });

</script>

좋은 웹페이지 즐겨찾기