特效描述:利用jQuery实现 新闻滚动播报。利用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> </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>