利用jQuery实现新闻滚动播报插件代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/BreakingNews.css"/>

2. 引入JS

<script src="js/jQuery.js"></script>
<script src="js/BreakingNews.js"></script>

3. HTML代码

	<div class="highlight">
    	<h1>Breaking News Ticker</h1>
    </div>
	<div class="container">
        <div class="BreakingNewsController easing" id="breakingnews1">
        	<div class="bn-title"></div>
            <ul>
                <li><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry bu deneme text metinidir</a></li>
                <li><a href="#">It is a long established fact that a reader will be distracted</a></li>
                <li><a href="#">Many desktop publishing packages</a></li>
                <li><a href="#">All the Lorem Ipsum generators on the Internet tend to repeat predefined</a></li>
                <li><a href="#">The standard chunk of Lorem Ipsum used</a></li>
                <li><a href="#">English versions from the 1914 translation by H. Rackham.</a></li>
            </ul>
            <div class="bn-arrows"><span class="bn-arrows-left"></span><span class="bn-arrows-right"></span></div>	
        </div>
		<p>&nbsp;</p>
        <div class="BreakingNewsController easing" id="breakingnews2">
        	<div class="bn-title"></div>
            <ul>
                <li><a href="#">1. Lorem Ipsum is simply dummy text of the printing and typesetting industry</a></li>
                <li><a href="#">2. It is a long established fact that a reader will be distracted</a></li>
                <li><a href="#">3. Many desktop publishing packages</a></li>
                <li><a href="#">4. All the Lorem Ipsum generators on the Internet tend to repeat predefined</a></li>
                <li><a href="#">5. The standard chunk of Lorem Ipsum used</a></li>
                <li><a href="#">6. English versions from the 1914 translation by H. Rackham.</a></li>
                <li><a href="#">7. Bu metin deneme amaçlıdır  the standard chunk of Lorem Ipsum used</a></li>
            </ul>
            <div class="bn-arrows"><span class="bn-arrows-left"></span><span class="bn-arrows-right"></span></div>	
        </div>
    </div> 
  <!-- ----------------------------------------------------- -->  
    <div class="wrapper">
    	<h2>Get Code</h2>
        <div class="valuesform">
        	<label>Title<br /><input type="text" value="BREAKING NEWS" id="title"/></label>
            <label>Title Color<br /><input type="text" id="titlecolor" value="#FFF"/></label>
            <label>Title Background Color<br /><input type="text" id="titlebgcolor" value="#099"/></label>
            <label>Background Color<br /><input type="text" id="background" value="#FFF"/></label>
            <label>Link Color<br /><input type="text" id="linkcolor" value="#333"/></label>
            <label>Link Hover Color<br /><input type="text" id="linkhovercolor" value="#099"/></label>
            <label>Font Size (px)<br /><input type="text" id="fonttextsize" value="16"/></label>
            <label>Is Bold?<br /><select id="isbold"> <option value="false">False</option> <option value="true">True</option> </select></label>
            <label>Border<br /><input type="text" id="border" value="solid 2px #099"/></label>
            <label>Width (%)<br /><input type="text" id="width" value="100"/></label>
            <label>Auto Play<br /><select id="autoplay"> <option value="false">False</option> <option selected="selected" value="true">True</option> </select></label>
            <label>Timer (1*1000=1 sec)<br /><input type="text" id="timer"  value="3000"/></label>
            <label>Effect<br /><select id="effect"> <option value="fade">Fade</option> <option value="slide">Slide</option> </select></label>
            <button id="apply">GET CODE</button>
        </div>
        <div class="content">
        	<pre><code>
            </code></pre>
        </div>
    </div>
<script>
	$(document).ready(function(){
		$("#breakingnews1").BreakingNews();
		$("#breakingnews2").BreakingNews({
			background		:'#FFF',
			title			:'BREAKING NEWS',
			titlecolor		:'#FFF',
			titlebgcolor	:'#099',
			linkcolor		:'#333',
			linkhovercolor	:'#099',
			fonttextsize	:16,
			isbold			:false,
			border			:'solid 1px #099',
			width			:'100%',
			timer			:2000,
			autoplay		:true,
			effect			:'slide'
		});
		$('#apply').click(function(e) {
           addValues(); 
        });
		addValues();
	});	
function addValues()
{
	var params='Add : jQuery.js\n'+
				'Add : BreakingNews.js\n'+
				'Add : BreakingNews.css\n\n\n'+
				'$("#breakingnews").BreakingNews({\n\n'+
				'	background		:"'+$("#background").val()+'",\n'+
				'	title			:"'+$("#title").val()+'",\n'+
				'	titlecolor		:"'+$("#titlecolor").val()+'",\n'+
				'	titlebgcolor		:"'+$("#titlebgcolor").val()+'",\n'+
				'	linkcolor		:"'+$("#linkcolor").val()+'",\n'+
				'	linkhovercolor		:"'+$("#linkhovercolor").val()+'",\n'+
				'	fonttextsize		:'+parseInt($("#fonttextsize").val())+',\n'+
				'	isbold			:'+($("#isbold").val() == "true" ? true : false)+',\n'+
				'	border			:"'+$("#border").val()+'",\n'+
				'	width			:"'+$("#width").val()+"%"+'",\n'+
				'	timer			:'+parseInt($("#timer").val())+',\n'+
				'	autoplay		:'+($("#autoplay").val() == "true" ? true : false)+',\n'+
				'	effect			:"'+$("#effect").val()+'",\n\n'+
			'});\n';
	$('.content pre code').html(params);
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>