search

Home  >  Article  >  Web Front-end  >  Marquee_html/css_WEB-ITnose

Marquee_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:31:591071browse

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

 

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Hover图片旋转_html/css_WEB-ITnoseNext article：html5语义化标签_html/css_WEB-ITnose

Related articles

See more