jQuery模擬新浪微博首頁滾動(dòng)效果的方法

更新時(shí)間：2015年03月11日 15:04:41 作者：答復(fù)哈

這篇文章主要介紹了jQuery模擬新浪微博首頁滾動(dòng)效果的方法,實(shí)例分析了jQuery使用animate、css等方法實(shí)現(xiàn)滾動(dòng)特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery模擬新浪微博首頁滾動(dòng)效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript" src="js/jquery.min.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>無標(biāo)題文檔</title>

<script language="javascript">

$(function(){

        var scrtime;

         $("#con").hover(function(){

                clearInterval(scrtime);

        },function(){

        scrtime = setInterval(function(){

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

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

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

                $ul.find("li:last").prependTo($ul)

                $ul.find("li:first").hide();

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

                $ul.find("li:first").fadeIn(1000);

                });        

        },3000);

        }).trigger("mouseleave");

});

</script>

<style type="text/css">

<!--

*{ margin:0; padding:0;}

ul,li{ list-style-type:none;}

body{ font-size:13px; background-color:#999999;}

#con{ width:700px; height:400px; margin:10px auto; position:relative; border:1px #666 solid; background-color:#FFFFFF; 

overflow:hidden;}

#con ul{ position:absolute; margin:10px; top:0; left:0; padding:0;}

#con ul li{ width:100%;  border-bottom:1px #333333 dotted; padding:20px 0; overflow:hidden; }

#con ul li a{ float:left;  border:1px #333333 solid; padding:2px;}

#con ul li p{ margin-left:68px;line-height:1.5;  padding:10px;}

 -->

 </style>

<body>

<div id="con">

  <ul>

    <li> <a href="#"><img src="img/1.jpg" /></a>

        <p class="vright">人生若只如初見</p>

    </li>

    <li> <a href="#"><img src="img/2.jpg" /></a>

        <p class="vright">何事秋風(fēng)悲畫扇</p>

    </li>

    <li> <a href="#"><img src="img/3.jpg" /></a>

        <p class="vright">等閑變卻故人心</p>

    </li>

    <li> <a href="#"><img src="img/4.jpg" /></a>

        <p class="vright">卻道故人心易變</p>

    </li>

  </ul>

</div>

</body>

</html>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

分享15個(gè)大家都熟知的jquery小技巧
這篇文章主要分享了15個(gè)大家都熟知的jquery小技巧，幫助提高你jQuery應(yīng)用的簡(jiǎn)單小技巧，感興趣的小伙伴們可以參考一下
2015-12-12
jQuery實(shí)現(xiàn)Div拖動(dòng)+鍵盤控制綜合效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)Div拖動(dòng)+鍵盤控制綜合效果的方法,實(shí)例分析了jQuery操作div塊拖動(dòng)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
jQuery實(shí)現(xiàn)表格奇偶行顯示不同背景色就這么簡(jiǎn)單
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表格奇偶行顯示不同背景色的方法，使表格更加美觀，便捷的查找同行數(shù)據(jù)更，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
IE8兼容Jquery.validate.js的問題
本文主要介紹IE8兼容Jquery.validate.js兼容問題并提供哦了解決方法。需要的朋友來看下吧
2016-12-12
jQuery創(chuàng)建及操作xml格式數(shù)據(jù)示例
這篇文章主要介紹了jQuery創(chuàng)建及操作xml格式數(shù)據(jù),結(jié)合實(shí)例形式分析了jQuery針對(duì)xml格式數(shù)據(jù)的創(chuàng)建、解析、添加等相關(guān)操作技巧,需要的朋友可以參考下
2018-05-05
jQuery入門介紹之基礎(chǔ)知識(shí)
本文主要給大家介紹了些jQuery的基礎(chǔ)知識(shí)，算是一個(gè)入門的小知識(shí)庫，包含jQuery簡(jiǎn)介、對(duì)象轉(zhuǎn)換、以及基本選擇器和層次選擇器等知識(shí)點(diǎn)。
2015-01-01
JQuery中$.ajax()方法參數(shù)詳解及應(yīng)用
JQuery中$.ajax()方法想必大家并不陌生吧，在本文將為大家介紹下其參數(shù)及應(yīng)用示例，感興趣的朋友不要錯(cuò)過
2013-12-12
基于jQuery實(shí)現(xiàn)文本框縮放以及上下移動(dòng)功能
這里給大家分享一段個(gè)人覺著非常實(shí)用也經(jīng)常用于項(xiàng)目中的代碼，本代碼基于jQuery實(shí)現(xiàn)了文本框縮放以及上下移動(dòng)功能，給需要的網(wǎng)友們參考下吧
2014-11-11
基于jquery自定義圖片熱區(qū)效果
前陣子接到個(gè)需求，聯(lián)通網(wǎng)上營業(yè)廳經(jīng)常需要專題頁面做宣傳，但是由于專題頁面會(huì)有按鈕，以及各個(gè)圖片的鏈接，省分的人沒有html基礎(chǔ)，沒人維護(hù)，量又比較大，需要開發(fā)出一個(gè)可自定義圖片熱區(qū)鏈接的后臺(tái)，于是就有了這個(gè)
2012-07-07
jQuery實(shí)現(xiàn)簡(jiǎn)易的輸入框字?jǐn)?shù)計(jì)數(shù)功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)易的輸入框字?jǐn)?shù)計(jì)數(shù)功能,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁面元素屬性的獲取與計(jì)算相關(guān)操作技巧,需要的朋友可以參考下
2017-01-01