jq 마우스 스크롤 효과 구현

12904 단어 그림
짧은 10여 줄의 코드로 멋진 이미지 스크롤 코드를 실현했다. 이 효과를 실현하는 것은 어렵지 않다. 생각만 옳으면 모든 것이 쉽다. 더 이상 말하지 말고 코드에 올라가서 효과를 보자!
html 구조:
<ul class="list">

        <li><img src="images/10.jpg" alt="" /><a href="#"><span>1</span></a></li>

        <li><img src="images/11.jpg" alt="" /><a href="#"><span>2</span></a></li>

        <li><img src="images/12.jpg" alt="" /><a href="#"><span>3</span></a></li>

        <li><img src="images/13.jpg" alt="" /><a href="#"><span>4</span></a></li>

        <li><img src="images/10.jpg" alt="" /><a href="#"><span>5</span></a></li>

        <li><img src="images/11.jpg" alt="" /><a href="#"><span>6</span></a></li>

        <li><img src="images/12.jpg" alt="" /><a href="#"><span>7</span></a></li>

        <li><img src="images/13.jpg" alt="" /><a href="#"><span>8</span></a></li>

        

    </ul>

 
css 코드:
 *{ margin:0; padding:0;}

    .list{ width:640px; margin:100px auto; border:1px solid #ddd; overflow:hidden;}

    .list li{ float:left; width:150px; height:80px; overflow:hidden; list-style:none; margin:5px; display:inline; position:relative;}

    .list li img{ float:left; width:150px; height:80px; border:none;}

    .list li a{ position:absolute; left:0; top:0; width:150px; height:0; background:#999; margin-top:40px; display:inline; text-align:center; line-height:80px; overflow:hidden; color:#fff; text-decoration:none;}

jq 코드(jq 라이브러리 가져오기 참고):
 $(function () {

            $('.list li').hover(function () {

                $(this).children('a,img').stop();

                $(this).children('img').stop().animate({ 'marginTop': 40, 'height': 0 }, 200, function () {

                    $(this).siblings('a').stop().animate({ 'height': 80, 'marginTop': 0 }, 200);

                });



            }, function () {

                $(this).children('a,img').stop();

                $(this).children('a').stop().animate({ 'height': 0, 'marginTop': 40 }, 200, function () {

                    $(this).siblings('img').stop().animate({ 'marginTop': 0, 'height': 80 }, 200);



                });

            });



        });

간단한 jq 코드 몇 마디 아니에요?친, 코피 내려와서 효과 좀 볼까!

좋은 웹페이지 즐겨찾기