Heim > Artikel > Web-Frontend > Marquee_html/css_WEB-ITnose
Marquee_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:591015Durchsuche
<!doctype html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Marquee</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/default.css"> <link rel="stylesheet" href="css/liMarquee.css"> <style type="text/css"> .str_wrap{ padding-left: 3em; padding-right: 3em; background: #fefefe; height: 3em; line-height: 3em; font-size: 1.2em; } </style> <!--[if IE]> <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--></head><body> <div class="htmleaf-container"> <header class="htmleaf-header"> <h1>Marquee</h1> <div class="htmleaf-links"> <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a> <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Text-Link-Effects/201508102386.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a> </div> <div class="htmleaf-demo center"> <a href="index.html" class="current">Deaulf</a> <a href="index2.html">垂 直</a> <a href="index3.html">图片和HTML元素</a> <a href="index4.html">从XML中获取数据</a> </div> </header> <div class="htmleaf-content"> <h3>Default</h3> <div class="str1 str_wrap"> Javascript是一种通用的脚本编程语言，也是一种基于（Object）和事件驱动并具有安全性能的脚本语言。 </div> <h3>从左到右显示</h3> <div class="str2 str_wrap"> Javascript代码嵌入在HTML页面中，它把静态页面转变为支持用户交互并响应事件的活页面。 </div> <h3>修改速度</h3> <div class="str3 str_wrap"> Javascript最早称作LiveScript，由Netscape Communications 和 Sun Microsystems联合开发。 </div> <section class="htmleaf-demo"> <a class="speedChange" data-scrollamount="30" href="#">慢速 (30px/sec)</a> <a class="speedChange" data-scrollamount="90" href="#">中等速度 (90px/sec)</a> <a class="speedChange" data-scrollamount="250" href="#">快速 (250px/sec)</a> </section> <h3>禁止使用鼠标拖动文本</h3> <div class="str4 str_wrap"> 上面的跑马灯文本可以使用鼠标来拖动，这里的被禁止了！ </div> <h3>禁用鼠标滑过时暂停文本动画</h3> <div class="str5 str_wrap"> 这里的跑马灯文字在鼠标滑过或悬停时不会暂停。。。 </div> <h3>暂停和播放功能</h3> <div class="str6 str_wrap"> Javascript和HTML关系密切，它们都由浏览器来处理。 </div> <section class="htmleaf-demo"> <button class="btnPause">暂 停</button> <button class="btnPlay">播 放</button> </section> </div> </div> <script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> <script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script> <script src="js/jquery.liMarquee.js"></script> <script> $(window).load(function(){ $('.str1').liMarquee(); $('.str2').liMarquee({ direction: 'right' }); var stringEl = $('.str3').liMarquee(); $('.speedChange').on('click',function(){ var speedChange = $(this); var dataSpeed = speedChange.data('scrollamount'); stringEl.trigger('mouseenter'); stringEl.data({scrollamount:dataSpeed}); stringEl.trigger('mouseleave'); return false; }); $('.str4').liMarquee({ drag: false }); $('.str5').liMarquee({ hoverstop: false }); $('.str6').liMarquee(); $('.btnPause').on('click',function(){ $('.str6').liMarquee('pause'); }); $('.btnPlay').on('click',function(){ $('.str6').liMarquee('play'); }) }); </script> </body></html>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Hover图片旋转_html/css_WEB-ITnoseNächster Artikel：html5语义化标签_html/css_WEB-ITnose