欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

^{<sub id="0wdhy"></sub>}

^{<thead id="0wdhy"></thead>}

<sub id="0wdhy"><rt id="0wdhy"></rt></sub>

完美兼容各大瀏覽器的jQuery仿新浪圖文淡入淡出間歇滾動(dòng)特效

更新時(shí)間：2014年11月12日 14:39:36 投稿：hebedich

本文是作者學(xué)習(xí)jQuery之后練手之作，兼容各大瀏覽器，非常的精美實(shí)用，這里放出來給小伙伴們，有需要的直接拿走，別跟我客氣^_^

1、效果及功能說明仿新浪微博圖片文字列表上下淡進(jìn)淡出間歇上下滾動(dòng)

2、實(shí)現(xiàn)原理首先要設(shè)定div內(nèi)只能顯示4個(gè)圖片那么多出來的圖片會(huì)自動(dòng)隱藏然后在給圖片添加一個(gè)動(dòng)畫的事件讓他們可以滾動(dòng)的播放出來上下滾動(dòng)效果播放就是li標(biāo)簽里面的內(nèi)容圖片和文字把每一個(gè)li看成一個(gè)整體在滾動(dòng)播放的時(shí)候進(jìn)入div內(nèi)的顯示出來在最后離開div的時(shí)候隱藏在給整個(gè)動(dòng)畫效果設(shè)定一個(gè)時(shí)間就可以完整的運(yùn)行。

3、運(yùn)行環(huán)境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游覽器下都可實(shí)現(xiàn)

4、所有圖片的壓縮包新建一個(gè)文件后將包解壓放進(jìn)文件夾圖片的壓縮包在頁面的最下方可以看到并下載下載后無需修改文件夾名因?yàn)楸旧砭鸵呀?jīng)寫好了和html5內(nèi)的路徑相吻合

5、將創(chuàng)建html文件保存的時(shí)候?qū)⒕幋a類型換成(UTF-8有簽名)這樣可以讓部分中文正常的顯示出來，將保存類型(T)換成(所有文件(*.*))，將html5和解壓后的圖片文件夾放在同一個(gè)文件夾內(nèi)效果

6、代碼

復(fù)制代碼代碼如下:

<!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=">
<script type="text/javascript">
(function($){
    $.fn.simpleSpy = function (limit, interval){
        limit = limit || 4;
        /*讓div始終顯示4個(gè)單位的高度*/
        interval = interval || 4000;
        /*控制每個(gè)動(dòng)畫效果的時(shí)間4000毫秒就是4秒從最下面的圖片消失到第5張圖片的從上面顯示出來一個(gè)動(dòng)畫2秒一共4秒的時(shí)間*/
        return this.each(function(){
            var $list = $(this),
            /*獲得所有列表項(xiàng)目的緩存*/
            items = [],
            /*未初始化*/
            currentItem = limit,
            total = 0,
            /*初始化以后*/
            height = $list.find('> li:first').height();
            /*列表限制li元素*/
            $list.find('> li').each(function(){
            /*獲得緩存*/
                items.push('<li>' + $(this).html() + '</li>');
                /*獲得所有列表的li里面的緩存*/
            });
            total = items.length;
            /*始終顯示在緩存里的li*/
            $list.wrap('<div class="spyWrapper" />').parent().css({height : height * limit});
            /*控制div在圖片消失的時(shí)候依然保持同樣的高度不會(huì)因?yàn)閐iv的消失而變化*/
            $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
            /*通過調(diào)用遍歷方法獲得所有l(wèi)i元素在實(shí)現(xiàn)移除的方法*/
            function spy(){
            /*開始第二個(gè)圖片從最上方插入的效果*/
                var $insert = $(items[currentItem]).css({height : 0,opacity : 0,display : 'none'}).prependTo($list);
                /*插入一個(gè)新的div，透明度和高度為零*/
                $list.find('> li:last').animate({ opacity : 0}, 1000, function(){
                /*通過遍歷插入一個(gè)動(dòng)畫出現(xiàn)的效果時(shí)間為1秒*/
                    $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
                    /* 增加新的第一個(gè)div的高度*/
                    $(this).remove();
                    /*這個(gè)移除的效果是什么呢就是在當(dāng)我們第一次加載完頁面的時(shí)候都會(huì)有幾個(gè)只有圖片沒有屬性值的li 清除就是在第一個(gè)動(dòng)畫結(jié)束后把沒有屬性的li給刪除掉沒有屬性的就是沒有高的沒有動(dòng)畫效果的li*/
                });
                currentItem++;
                /*永遠(yuǎn)在第一個(gè)li位置顯示出現(xiàn)的是下一個(gè)li圖片*/
                if(currentItem >= total){
                /*如果4張圖片大于或等于所有的大于或等于整個(gè)圖片的的話*/
                    currentItem = 0;
                    /*那么就從0開始*/
                }
                setTimeout(spy, interval)
                /*在ul和4秒內(nèi)完成*/
            }
            spy();
            /*效果的整個(gè)開關(guān)*/
        });
    };
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function(){
    $('ul.spy').simpleSpy();
    /*ul.spy調(diào)用simpleSpy()模版方法*/
});
</script>
</head>
<body>
<div class="demo">
    <h2>jquery仿新浪微博圖片文字列表間隙滾動(dòng)淡進(jìn)淡出滾動(dòng)</h2>
    <div id="sidebar">
        <ul class="spy">
            <li>
                <a href="http://www.dbjr.com.cn/" title="View round"><img width="70" height="70" src="images/1.png" title="" /></a>
                <h5><a href="http://www.dbjr.com.cn/" title="View round">round</a></h5>
                <p class="info">Nov 29th 2008 by neue</p>
            </li>
            <li>
                <a href="http://www.dbjr.com.cn/" title="View reflet"><img width="70" height="70" src="images/2.png" title="" /></a>
                <h5><a href="http://www.dbjr.com.cn/" title="View reflet">reflet</a></h5>
                <p class="info">Nov 29th 2008 by neue</p>
            </li>
            <li>
                <a href="http://www.dbjr.com.cn/" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="images/3.png" title="" /></a>
                <h5><a href="http://www.dbjr.com.cn/" 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.dbjr.com.cn/" title="View Untitled"><img width="70" height="70" src="images/4.png" title="" /></a>
                <h5><a href="http://www.dbjr.com.cn/" title="View Untitled">Untitled</a></h5>
                <p class="info">Nov 29th 2008 by mike1052</p>
            </li>
            <li>
                <a href="http://www.dbjr.com.cn/" title="View My Tutorial's Library"><img width="70" height="70" src="images/5.png" title="" /></a>
                <h5><a href="http://www.dbjr.com.cn/" title="View My Tutorial's Library">My Tutorial's Library</a></h5>
                <p class="info">Nov 29th 2008 by FrancescoOnAir</p>
            </li>
            <li>
                <a href="http://www.dbjr.com.cn/" 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.dbjr.com.cn/" 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.dbjr.com.cn/" 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.dbjr.com.cn/" 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.dbjr.com.cn/" title="View Sandy — your free personal email assistant"><img width="70" height="70" src="images/8.png" title="" /></a>
                <h5><a href="http://www.dbjr.com.cn/" 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.dbjr.com.cn/" title="View Values of n Blog"><img width="70" height="70" src="images/9.png" title="" /></a>
                <h5><a href="http://www.dbjr.com.cn/" title="View Values of n Blog">Values of n Blog</a></h5>
                <p class="info">Nov 29th 2008 by John Doe</p>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

怎么樣，效果相當(dāng)不錯(cuò)吧。

您可能感興趣的文章:

相關(guān)文章

js彈出框輕量級(jí)插件jquery.boxy使用介紹
今天我介紹一個(gè)輕量級(jí)的插件 boxy!它可以把美工設(shè)計(jì)的彈出框很容易的體現(xiàn)出來，而且兼容性還不錯(cuò),感興趣的朋友可以了解下
2013-01-01
JQuery form表單提交前驗(yàn)證單選框是否選中、刪除記錄時(shí)驗(yàn)證經(jīng)驗(yàn)總結(jié)(整理)
這篇文章主要介紹了JQuery form表單提交前驗(yàn)證單選框是否選中、刪除記錄時(shí)驗(yàn)證經(jīng)驗(yàn)總結(jié)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-06-06
Jquery刪除css屬性的簡(jiǎn)單方法
下面小編就為大家?guī)硪黄狫query刪除css屬性的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-12-12
jQuery對(duì)val和atrr("value")賦值的區(qū)別介紹
jQuery中val和atrr(value),對(duì)瀏覽器的區(qū)別，有默認(rèn)值的情況下，如果用val()賦值了，那么當(dāng)修改這個(gè)值得時(shí)候，google不能獲取最新的值，但是ie可以
2014-09-09
jQuery實(shí)現(xiàn)根據(jù)身份證號(hào)獲取生日、年齡、性別等信息的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)根據(jù)身份證號(hào)獲取生日、年齡、性別等信息的方法,涉及jQuery字符串相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
解決jQuery使用JSONP時(shí)產(chǎn)生的錯(cuò)誤
這篇文章主要介紹了解決jQuery使用JSONP時(shí)產(chǎn)生的錯(cuò)誤，需要的朋友可以參考下
2015-12-12
基于jQuery實(shí)現(xiàn)頁面搜索功能
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)頁面搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-07-07
分享jQuery網(wǎng)頁元素拖拽插件
這篇文章主要介紹了jQuery網(wǎng)頁元素拖拽插件的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-06-06
Jquery綁定事件(bind和live的區(qū)別介紹)
Jquery中綁定事件有三種方法click、bind、live第一種方法很好理解，其實(shí)就和普通JS的用法差不多，只是少了一個(gè)on而已第二、三種方法都是綁定事件
2013-08-08
jQuery照片伸縮效果不影響其他元素的布局
jQuery照片伸縮效果，不是單純的圖片放大縮小，不影響其他元素的布局,需要的朋友可以參考下
2014-05-05

最新評(píng)論