cari

Rumah  >  Artikel  >  hujung hadapan web  >  Marquee_html/css_WEB-ITnose

Marquee_html/css_WEB-ITnose

WBOY
WBOYasal
2016-06-24 11:31:591073semak imbas

<!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>

 

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Hover图片旋转_html/css_WEB-ITnoseArtikel seterusnya：html5语义化标签_html/css_WEB-ITnose

Artikel berkaitan

Lihat lagi