<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery 文字滾動大全 單行滾動 多行滾動 帶按鈕控制滾動</title> <script type="text/javascript" src="http://mengyibandemei.blog.163.com/blog/js/jquery-1.5.2.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} ul,li{list-style-type:none;} body{font:12px/180% Arial, Helvetica, sans-serif;} a{color:#333;text-decoration:none;} a:hover{color:#3366cc;text-decoration:underline;} .demopage{width:730px;margin:0 auto;} .demopage h2{font-size:14px;margin:20px 0;} /* scrollDiv */ .scrollDiv{height:25px;/* 必要元素 */line-height:25px;border:#ccc 1px solid;overflow:hidden;/* 必要元素 */} .scrollDiv li{height:25px;padding-left:10px;} #s2,#s3{height:100px;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js "></script> </head> <body> <div class="demopage"> <h2>jquery 文字上下滾動--單行 批量多行 文字圖片上下翻滾 | 單行滾動 <a href="http://mengyibandemei.blog.163.com/blog/" style="color:#f70">@by wangbaoguo88@126.com</a></h2> <div class="scrollDiv" id="s1"> <ul> <li><a href="http://mengyibandemei.blog.163.com/">jquery 滾動條 Scrollbar 設置瀏覽器默認滾動條樣式</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery 圖片切換 switchable 帶左右按鈕控制分頁索引圖片切換</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery powerFloat萬能浮動框提示插件 支持圖片、文字、ajax異步加載、表單驗證等</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery 彈出層插件 ThickBox 多功能彈出層插件支持圖片、ajax、內嵌內容彈等</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery 表單美化 jquery tzCheckbox 復選框美化 自定義默認復選框</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery HTML5 幻燈片插件 用 Canvas 制作類似百葉窗拍攝快門攝影拍攝效果</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery 圖片放大鏡 圖片類似放大鏡效果鼠標滑過小圖異步加載中圖、大圖</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery 圖片幻燈片 點擊小圖顯示大圖異步加載 支持按鈕播放</a></li> </ul> </div><!--scrollDiv end--> <script type="text/javascript"> function AutoScroll(obj) { $(obj).find("ul:first").animate({ marginTop: "-25px" }, 500, function() { $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this); }); } $(document).ready(function() { setInterval('AutoScroll("#s1")', 3000); }); </script> <h2>jquery 文字上下滾動--單行 批量多行 文字圖片上下翻滾 | 多行滾動 <a href="http://mengyibandemei.blog.163.com/blog/" style="color:#f70">@by wangbaoguo88@126.com</a></h2> <div class="scrollDiv" id="s2"> <ul> <li><a href="http://mengyibandemei.blog.163.com/">jquery Xslider 插件焦點圖片特效圖片淡隱淡現、圖片上下滾動、圖片左右滾動、選項卡</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery 文字連續滾動 節奏感十足的齒輪式滾動圖片展示與文字內容特效展示</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery cycle 循環幻燈片插件多功能幻燈片插件支持多種幻燈片特效</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery輕量級進度條 progressbar 帶動畫顯示的進度過程的jquery進度條特效</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery菜單特效 鼠標滑過菜單區域圖標和文本類似flash動畫酷炫移動展示</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery 圖片切換 自動切換顯示隱藏show/hide帶左右按鈕與分頁索引按鈕控制圖片自動切換顯示隱藏show/hide</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery圖片特效 slide banner焦點圖片切換圖片上下翻滾、圖片左右翻滾、圖片淡隱淡現3種圖片滾動特效</a></li> <li><a href="http://mengyibandemei.blog.163.com/">javascript jscolor colorpicker js顏色選擇器插件10多種調用顏色方法與取值</a></li> </ul> </div> <script type="text/javascript"> //滾動插件 (function($) { $.fn.extend({ Scroll: function(opt, callback) { //參數初始化 if (!opt) var opt = {}; var _this = this.eq(0).find("ul:first"); var lineH = _this.find("li:first").height(), //獲取行高 line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滾動的行數，默認為一屏，即父容器高度 speed = opt.speed ? parseInt(opt.speed, 10) : 500, //卷動速度，數值越大，速度越慢（毫秒） timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滾動的時間間隔（毫秒） if (line == 0) line = 1; var upHeight = 0 - line * lineH; //滾動函數 scrollUp = function() { _this.animate({ marginTop: upHeight }, speed, function() { for (i = 1; i <= line; i++) { _this.find("li:first").appendTo(_this); } _this.css({ marginTop: 0 }); }); } //鼠標事件綁定 _this.hover(function() { clearInterval(timerID); }, function() { timerID = setInterval(scrollUp, timer); }).mouseout(); } }); })(jQuery); $(document).ready(function() { $("#s2").Scroll({ line: 4, speed: 500, timer: 4000 }); }); </script> <h2>jquery 上下滾動--單行 批量多行 文字圖片上下翻滾 | 可控制向前向后的多行滾動 <a href="http://mengyibandemei.blog.163.com/blog/" style="color:#f70">@by wangbaoguo88@126.com</a></h2> <div class="scrollDiv" id="s3"> <ul> <li><a href="http://mengyibandemei.blog.163.com/">jquery colorpicker 插件顏色選擇器 點擊顏色選擇顏色值與顏色相應變化</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery評論星星打分特效、鼠標滑過星星顯示評論信息</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery圖片切換滾動 水平手風琴切換滾動鼠標滑過圖片水平切換</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery 圖片切換滾動特效帶分頁索引按鈕控制左右圖片切換滾動</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery篩選器插件選項卡 css3制作一個漂亮的HTML5篩選容器插件選項卡</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery 圖片特效用CSS3和HTML5制作仿動畫頭條報紙縮小到放大翻轉圖片展示</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery特效基於jquery幻燈片插件制作一個泡沫幻燈片圖片展示特效</a></li> <li><a href="http://mengyibandemei.blog.163.com/">jquery 圖片幻燈片仿IBM首頁焦點圖切換，類似flash動態效果圖片切換</a></li> </ul> </div> <span id="btn1" >點擊向上滾動</span> <span id="btn2">點擊向下滾動</span> <script type="text/javascript"> (function($) { $.fn.extend({ Scroll: function(opt, callback) { //參數初始化 if (!opt) var opt = {}; var _btnUp = $("#" + opt.up); //Shawphy:向上按鈕 var _btnDown = $("#" + opt.down); //Shawphy:向下按鈕 var timerID; var _this = this.eq(0).find("ul:first"); var lineH = _this.find("li:first").height(), //獲取行高 line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滾動的行數，默認為一屏，即父容器高度 speed = opt.speed ? parseInt(opt.speed, 10) : 500; //卷動速度，數值越大，速度越慢（毫秒） timer = opt.timer //?parseInt(opt.timer,10):3000; //滾動的時間間隔（毫秒） if (line == 0) line = 1; var upHeight = 0 - line * lineH; //滾動函數 var scrollUp = function() { _btnUp.unbind("click", scrollUp); //Shawphy:取消向上按鈕的函數綁定 _this.animate({ marginTop: upHeight }, speed, function() { for (i = 1; i <= line; i++) { _this.find("li:first").appendTo(_this); } _this.css({ marginTop: 0 }); _btnUp.bind("click", scrollUp); //Shawphy:綁定向上按鈕的點擊事件 }); } //Shawphy:向下翻頁函數 var scrollDown = function() { _btnDown.unbind("click", scrollDown); for (i = 1; i <= line; i++) { _this.find("li:last").show().prependTo(_this); } _this.css({ marginTop: upHeight }); _this.animate({ marginTop: 0 }, speed, function() { _btnDown.bind("click", scrollDown); }); } //Shawphy:自動播放 var autoPlay = function() { if (timer) timerID = window.setInterval(scrollUp, timer); }; var autoStop = function() { if (timer) window.clearInterval(timerID); }; //鼠標事件綁定 _this.hover(autoStop, autoPlay).mouseout(); _btnUp.css("cursor", "pointer").click(scrollUp).hover(autoStop, autoPlay); //Shawphy:向上向下鼠標事件綁定 _btnDown.css("cursor", "pointer").click(scrollDown).hover(autoStop, autoPlay); } }) })(jQuery); $(document).ready(function() { $("#s3").Scroll({ line: 4, speed: 500, timer: 2000, up: "btn1", down: "btn2" }); }); </script> </div><!--demopage end--> </body> </html>
常見的文字滾動實例【jquery】
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。