집 >웹 프론트엔드 >JS 튜토리얼 >jQuery는 광고 콘텐츠의 페이드인 및 페이드아웃 효과를 구현합니다.

jQuery는 광고 콘텐츠의 페이드인 및 페이드아웃 효과를 구현합니다.

php中世界最好的语言원래의: 2018-04-25 17:50:071582검색

이번에는 광고 콘텐츠의 페이드 인 및 페이드 아웃 효과를 구현하기 위한 jQuery를 가져오겠습니다. 광고 콘텐츠의 페이드 인 및 페이드 아웃 효과를 구현하기 위한 jQuery의 주의사항은 무엇입니까? , 살펴 보겠습니다.

1. 효과 및 기능 설명은 Sina Weibo 사진 텍스트 목록을 위아래로 모방하고 페이드 인 및 아웃되며 간헐적으로 위아래로 스크롤됩니다.

2. 구현 원칙: 먼저 4개의 사진만 p에 표시되도록 설정해야 합니다. 너무 많은 사진이 자동으로 숨겨지고 스크롤 및 재생이 가능하도록 사진에 애니메이션 이벤트를 추가합니다. 위아래 스크롤 효과는 li 태그의 콘텐츠 사진과 텍스트를 전체적으로 재생합니다. 스크롤할 때 p를 입력하고 표시합니다. 마지막으로 p를 그대로 둡니다. 숨길 때 전체 애니메이션 효과가 완전히 실행되는 시간을 설정합니다.

3. 실행 환경

IE6 IE7 IE8 이상에서는 Firefox 및 Google Chrome 브라우저에서 구현 가능합니다.

4. 모든 사진의 압축 패키지에 대한 새 파일을 생성하고 패키지의 압축을 풀어서 폴더에 넣습니다. 그림의 패키지는 페이지 하단에서 확인하고 다운로드할 수 있습니다. 폴더 이름은 이미 작성되어 있으며 html5의 경로와 일치하므로 다운로드 후 수정할 필요가 없습니다. 파일, 인코딩 유형을 (UTF-8 서명)로 변경하면 일부 중국어가 정상적으로 표시될 수 있습니다. 저장 유형(T)을 (모든 파일(*.*))로 변경하고 html5 및 압축 해제된 이미지 폴더를 동일한 폴더에 대한 효과는

6. 코드

<!DOCTYPE HTML">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
*{margin:0;padding:0;
list-style-type
:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.demo{width:500px;margin:30px auto 0 auto;}
.demo h2{font-size:16px;color:#333;height:52px;
line-height
:24px;}
/* sidebar */
#sidebar{color:#AFB0B1;background:#0D171A;float:left;margin:0 0 24px;padding:15px 10px 10px;width:300px;}
#sidebar li{height:90px;overflow:hidden;}
#sidebar li h5{color:#A5A9AB;font-size:1em;
margin-bottom
:0.5em;}
#sidebar li h5 a{color:#fff;text-decoration:none;}
#sidebar li img{float:left;border:solid 3px #fff;
margin-right
:8px;display:inline;}
#sidebar li .info{color:#B1B1B1;font-size:1em;}
#sidebar .spyWrapper{height:100%;overflow:hidden;position:relative;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
(function($){ 
    $.fn.simpleSpy = function (limit, interval){
        limit = limit || 4;
        /*让p始终显示4个单位的高度*/
        interval = interval || 4000;
        /*控制每个动画效果的时间4000毫秒就是4秒 从最下面的图片消失到第5张图片的从上面显示出来一个动画2秒一共4秒的时间*/
        return this.each(function(){
            var $list = $(this),
            /*获得所有列表项目的缓存*/
            items = [], 
            /*未初始化*/
            currentItem = limit,
            total = 0, 
            /*初始化以后*/
            height = $list.find(&#39;> li:first&#39;).height();
            /*列表限制li元素*/
            $list.find(&#39;> li&#39;).each(function(){
            /*获得缓存*/
                items.push(&#39;<li>&#39; + $(this).html() + &#39;</li>&#39;);
                /*获得所有列表的li里面的缓存*/
            });
            total = items.length;
            /*始终显示在缓存里的li*/
            $list.wrap(&#39;<p class="spyWrapper" />&#39;).parent().css({height : height * limit});
            /*控制p在图片消失的时候依然保持同样的高度不会因为p的消失而变化*/
            $list.find(&#39;> li&#39;).filter(&#39;:gt(&#39; + (limit - 1) + &#39;)&#39;).remove();
            /*通过调用遍历方法获得所有li元素在实现移除的方法*/
            function spy(){
            /*开始第二个图片从最上方插入的效果*/
                var $insert = $(items[currentItem]).css({height : 0,opacity : 0,display : &#39;none&#39;}).prependTo($list);
                /*插入一个新的p，透明度和高度为零*/
                $list.find(&#39;> li:last&#39;).animate({ opacity : 0}, 1000, function(){
                /*通过遍历插入一个动画出现的效果 时间为1秒*/
                    $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
                    /* 增加新的第一个p的高度*/
                    $(this).remove();    
                    /*这个移除的效果是什么呢 就是在当我们第一次加载完页面的时候都会有几个只有图片没有属性值的li 清除就是在第一个动画结束后把没有属性的li给删除掉 没有属性的就是 没有高的 没有动画效果的li*/
                });
                currentItem++;
                /*永远在第一个li位置显示出现的是下一个li图片*/
                if(currentItem >= total){
                /*如果4张图片大于或等于所有的大于或等于整个图片的的话*/
                    currentItem = 0;
                    /*那么就从0开始*/
                }
                setTimeout(spy, interval)
                /*在ul和4秒内完成*/
            }
            spy();
            /*效果的整个开关*/
        });
    };   
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function(){
    $(&#39;ul.spy&#39;).simpleSpy();
    /*ul.spy调用simpleSpy()模版方法*/
});
</script>
</head>
<body>
<p class="demo">
    <h2>jquery仿新浪微博图片文字列表间隙滚动淡进淡出滚动</h2>
    <p id="sidebar">
        <ul class="spy">
            <li>
                <a href="http://www.jb51.net/" title="View round"><img width="70" height="70" src="images/1.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View round">round</a></h5>
                <p class="info">Nov 29th 2008 by neue</p>
            </li>
            <li>
                <a href="http://www.jb51.net/" title="View reflet"><img width="70" height="70" src="images/2.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View reflet">reflet</a></h5>
                <p class="info">Nov 29th 2008 by neue</p>
            </li>
            <li>
                <a href="http://www.jb51.net/" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="images/3.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View Kate Moross Little Big Planet">Kate Moross Little Big Planet</a></h5>
                <p class="info">Nov 29th 2008 by neue</p>
            </li>
            <li>
                <a href="http://www.jb51.net/" title="View Untitled"><img width="70" height="70" src="images/4.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View Untitled">Untitled</a></h5>
                <p class="info">Nov 29th 2008 by mike1052</p>
            </li>
            <li>
                <a href="http://www.jb51.net/" title="View My Tutorial&#39;s Library"><img width="70" height="70" src="images/5.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View My Tutorial&#39;s Library">My Tutorial&#39;s Library</a></h5>
                <p class="info">Nov 29th 2008 by FrancescoOnAir</p>
            </li>
            <li>
                <a href="http://www.jb51.net/" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/6.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5>
                <p class="info">Nov 29th 2008 by John Doe</p>
            </li>
            <li>
                <a href="http://www.jb51.net/" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/7.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5>
                <p class="info">Nov 29th 2008 by John Doe</p>
            </li>
            <li>
                <a href="http://www.jb51.net/" title="View Sandy — your free personal email assistant"><img width="70" height="70" src="images/8.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View Sandy — your free personal email assistant">Sandy — your free</a></h5>
                <p class="info">Nov 29th 2008 by John Doe</p>
            </li>
            <li>
                <a href="http://www.jb51.net/" title="View Values of n Blog"><img width="70" height="70" src="images/9.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View Values of n Blog">Values of n Blog</a></h5>
                <p class="info">Nov 29th 2008 by John Doe</p>
            </li>
        </ul>
    </p>
</p>
</body>
</html>

이 기사의 사례를 읽으신 후 방법을 익히셨을 것이라 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!