Phiên bản đầy đủ: jsB@nk » Framework » jQuery » Bảng thông báo mờ ảo
URL: https://www.javascriptbank.com/flashing-rich-html-sticky-board.html
Bảng thông báo mờ ảo - một hiệu ứng rất hữu ích và thực tế để hiển thị lần lượt các nội dung quan trọng (hay thông báo) trên website của bạn, với hiệu ứng mờ dần khi xuất hiện và biến mất. Nội dung có thể được xây dựng sẵn trên cùng trang, hoặc có thể được lấy từ các trang khác thông qua kĩ thuật AJAX; hiệu ứng còn sử dụng cookie để lưu thông điệp cuối cùng mà người dùng đã nhấn.
Phiên bản đầy đủ: jsB@nk » Framework » jQuery » Bảng thông báo mờ ảo
URL: https://www.javascriptbank.com/flashing-rich-html-sticky-board.html
<style type="text/css">.tickerstyle{width:200px; height:180px; border:1px solid black; background:lightyellow; padding:8px; overflow:hidden;}.messagediv{display: none;background:lightyellow}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script><script type="text/javascript" name="richhtmlticker.js">/************************************************ Rich HTML Ticker- by JavaScript Kit (www.javascriptkit.com)* This notice must stay intact for usage* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code***********************************************//** Rich HTML Ticker- by JavaScript Kit (http://www.javascriptkit.com)* Freeware. Created Sept 13th, 08'* This credit must stay intact for use*/var richhtmlticker={loadingtext: '<em>Fetching Ticker Contents. Please wait...</em>', //Loading text if content is being fetched via Ajaxgetajaxcontent:function($, config){config.$ticker.html(this.loadingtext)$.ajax({url: config.msgsource,error:function(ajaxrequest){config.$ticker.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)},success:function(content){config.$ticker.html(content)richhtmlticker.setupticker(config)}})},rotate:function(config){if (config.$ticker.get(0)._hoverstate=="over"){setTimeout(function(){richhtmlticker.rotate(config)}, config.rotatespeed)}else{config.$messages.eq(config.currentmsg).fadeOut(config.animateduration, function(){config.currentmsg=(config.currentmsg<config.$messages.length-1)? config.currentmsg+1 : 0config.$messages.eq(config.currentmsg).fadeIn(config.animateduration, function(){setTimeout(function(){richhtmlticker.rotate(config)}, config.rotatespeed)})})}},getCookie:function(Name){ var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pairif (document.cookie.match(re)) //if cookie foundreturn document.cookie.match(re)[0].split("=")[1] //return its valuereturn null},setCookie:function(name, value){document.cookie = name+"="+value},setupticker:function(config){config.$messages=config.$ticker.find('div.'+config.msgclass).hide()config.currentmsg=Math.min(parseInt(richhtmlticker.getCookie(config.id) || 0), config.$messages.length-1)config.$messages.hide().eq(config.currentmsg).fadeIn(config.animateduration)setTimeout(function(){richhtmlticker.rotate(config)}, config.rotatespeed)$(window).bind('unload', function(){richhtmlticker.cleanup(config)})},define:function(config){ jQuery(document).ready(function($){config.$ticker=$('#'+config.id)if (config.$ticker.length==0)returnconfig.$ticker.css({overflow:'hidden'}).hover(function(){this._hoverstate="over"},function(){this._hoverstate="out"})if (config.msgsource=="inline"){richhtmlticker.setupticker(config)}else{richhtmlticker.getajaxcontent($,config)}})},cleanup:function(config){this.setCookie(config.id, config.currentmsg)}} //end richhtmlticker object//////////// Declare instance of Rich HTML Ticker (invoked when page has loaded): ///////////////////////////richhtmlticker.define({id: "myhtmlticker", //main ticker DIV idmsgclass: "messagediv", //CSS class of DIVs containing each ticker messagemsgsource: "inline", //Where to look for the messages: "inline", or "path_to_file_on_your_server"rotatespeed: 3000, //pause in milliseconds between rotationanimateduration: 1000 //duration of fade animation in milliseconds })/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/</script><div id="myhtmlticker" class="tickerstyle"><div class="messagediv"><b><a href="/loan-payment-calculator.html/en/">Loan Payment Calculator</a></b><br />A <a href="/javascript/">JavaScript</a> <a href="/javascript/calculation/calculator/">calculator code</a> that calculates your monthly loan payment.</div><div class="messagediv"><b><a href="/epoch-dhtml-calendar-index.html/en/">Epoch DHTML Calendar</a></b><br />Epoch is a flexible DHTML calendar that supports several display formats, such as inline on the page, as a DHTML date picker, or an calendar that with the ability to select multiple dates. Best of all, it's released under the GNU Lesser General Public License, so you can use and distribute this calendar for free inside your web pages and applications.</div><div class="messagediv"><b><a href="/newsscroller.html/en/">NewsScroller</a></b><br />A pausing <a href="/javascript/scroller/">news scroller</a>. Easy to implement, highly configurable, and hyperlink capable.</div><div class="messagediv"><b><a href="/robots-text-generator.html/en/">Robots Text Generator</a></b><br />This <a href="/javascript/utility/generator/">generator</a> creates the meta tag for robots. It also includes the code for the Googlebot.</div><div class="messagediv"><b><a href="/blur-name-typer.html/en/">Blur name Typer</a></b><br />This is a very stylish <a href="/title=DHTML">DHTML</a> ticker with an eyecatching blur effect by asking visitors type string to display.</div></div>
http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js