DIV CSS 佈局教程網
設為首頁
加入收藏
首頁
HTML基礎知識
CSS入門知識
JavaScript入門知識
DIV+CSS佈局
WEB網站前端
網頁腳本
網頁SEO優化
網頁制作工具
DIV+CSS佈局教程網
>>
網頁腳本
>>
JavaScript入門知識
>>
jQuery入門知識
>>
JQuery特效代碼
>> 簡單易用的基於jQuery版仿新浪微博向下滾動效果(附DEMO)
簡單易用的基於jQuery版仿新浪微博向下滾動效果(附DEMO)
編輯：JQuery特效代碼
<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>簡單易用的jQuery 寫的仿新浪微博 向下滾動效果</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; padding:2px;} #con ul li p{ margin-left:68px;line-height:1.5; padding:10px;} .clear{clear:both;height:0px;} --> </style> <body> <div id="con"> <ul> <li> <a href="#"><img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201110/2011101614515748.gif" /></a> <p class="vright"><a href="http://www.poluoluo.com">甜蜜情人節給點力——合肥網2011情人節.情人周11大钜獻_合肥網專題 - 專題頻道-合肥網</a></p> </li> <li> <a href="#"><img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201110/2011101614515748.gif" /></a> <p class="vright"><a href="http://www.poluoluo.com">甜蜜情人節給點力——合肥網2011情人節.情人周11大钜獻_合肥網專題 - 專題頻道-合肥網甜蜜情人節給點力——合肥網2011情人節.情人周11大钜獻_合肥網專題 - 專題頻道-合肥網</a> </li> <li> <a href="#"><img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201110/2011101614515748.gif" /></a> <p class="vright"> <a href="http://www.poluoluo.com">甜蜜情人節給點力——合肥網2011情人節.情人周11大钜獻_合肥網專題 - 專題頻道-合肥網甜蜜情人節給點力——合肥網2011情人節.情人周11大钜獻_合肥網專題 - 專題頻道-合肥網甜蜜情人節給點力——合肥網2011情人節.情人周11大钜獻_合肥網專題 - 專題頻道-合肥網</a> </p> </li> <li> <a href="#"><img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201110/2011101614515748.gif" /></a> <p class="vright"><a href="http://www.poluoluo.com">甜蜜情人節給點力——合肥網2011情人節.情人周11大钜獻_合肥網專題 - 專題頻道-合肥網甜蜜情人節給點力——合肥網2011情人節.情人周11大钜獻_合肥網專題 - 專題頻道-合肥網甜蜜情人節給點力——合肥網2011情人節.情人周11大钜獻_合肥網專題 - 專題頻道-合肥網合肥網甜蜜情人節給點力——合肥網2011情人節.情人周11大钜獻_合肥網專題 - 專題頻道-合肥網</a> </p> </li> </ul> </div> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
上一頁:
JQuery 選擇器、過濾器介紹
下一頁:
jQuery ready函數濫用分析
JQuery特效代碼
基於jQuery的圖片不完全按比例自動縮小
舉例來說第一種情況：如圖片大小為 600×350，顯示區域大小為 200×140，如果圖片根據目標寬
jquery如何實現在加載完iframe的內容後再進行操作
為iframe添加onload事件 ie使用attachEvent(onload,function(
jquery實現頁面圖片等比例放大縮小功能
html代碼結構:。 代碼如下:<a href=><img src=images/
相關文章
HTML初學簡單頁面結構
用vue實現簡單實時匯率計算功能
關於JSON與JSONP簡單總結
js 上傳文件預覽的簡單實例
js中獲取jsp表單中radio類型的值簡單實例
JS控制靜態頁面之間傳遞參數獲取參數並應用的簡單實例
封裝的dialog插件 基於bootstrap模態對話框的簡單擴展
關於原生js中bind函數的簡單實現
ajax編寫簡單的登錄頁面
把普通對象轉換成json格式的對象的簡單實例
jQuery基礎知識
JQuery入門技巧
JQuery特效代碼
JQuery常見問題
小編推薦
jquery實現盒子下拉效果示例代碼
Jquery 動態循環輸出表格具體方法
firefox浏覽器用jquery.uploadify插件上傳時報HTTP 302錯誤
鋒利的jQuery讀書筆記 第7章、第8章
jquery批量控制form禁用的代碼
滾動圖片效果 jquery實現回旋滾動效果
基於jquery的loading效果實現代碼
基於Jquery的文字自動截取（提供源代碼）
jquery實現可拖動DIV自定義保存到數據的實例
了解jQuery技巧來提高你的代碼
熱門推薦
StringTemplate遇見jQuery沖突的解決方法
基於jquery實現的文字向上跑動類似跑馬燈的效果
JQuery的$和其它JS發生沖突的快速解決方法
為jquery.ui.dialog 增加“自動記住關閉時的位置”的功能
jQuery移除元素自動解綁事件實現思路及代碼
jquery驗證手機號碼、郵箱格式是否正確示例代碼
jquery 3D球狀導航的文章分類
jQuery與其它庫沖突的解決方法
jquery實現網站超鏈接和圖片提示效果
大家都在看
使用PHP 5.0 輕松解析XML文檔（3）
axure小技巧:iphone的滑動解鎖效果
建議網頁設計師用CSS制作網站導航菜單
AngularJS實現textarea記錄只能輸入規定數量的字符並顯示
javascript設置連續兩次點擊按鈕時間間隔的方法
學習XML關於圖像超鏈接的制作
由ReactJS的Hello world說開來
JavaScript 事件管理
XML學習教程
|
jQuery入門知識
|
AJAX入門
|
Dreamweaver教程
|
Fireworks入門知識
|
SEO技巧
|
SEO優化集錦
|
Copyright ©
DIV+CSS佈局教程網
All Rights Reserved