html5 marquee <html lang=”zh-CHS”> <head> <meta charset=”utf-8″> <title>hello marquee</title> </head> <!– html中的marquee属性 时间: 2019-09-12阅读: 22140标签: 属性 该标签不是HTML3.2的一部分，并且只支持MSIE3以后内核，所以如果你使用非IE内核浏览器(如：Netscape)可能无法看到下面一些很有意思的效果，该标签是个容器标签。 语法： <marquee></marquee> 以下是一个最简单的例子，代码如下: –> <marquee><font size=+3 color=red>Hello, World</font></marquee> <!– 下面这两个事件经常用到： onMouseOut=”this.start()” ：用来设置鼠标移出该区域时继续滚动 onMouseOver=”this.stop()”：用来设置鼠标移入该区域时停止滚动 代码如下: <marquee onMouseOut=”this.start()” onMouseOver=”this.stop()”>onMouseOut=”this.start()” ：用来设置鼠标移出该区域时继续滚动 onMouseOver=”this.stop()”：用来设置鼠标移入该区域时停止滚动</marquee> 这是一个完整的例子： 代码如下: –> <marquee id=”affiche” align=”left” behavior=”scroll” bgcolor=”#FF0000″ direction=”up” height=”300″ width=”200″ hspace=”50″ vspace=”20″ loop=”-1″ scrollamount=”10″ scrolldelay=”100″ onMouseOut=”this.start()” onMouseOver=”this.stop()”> 这是一个完整的例子 </marquee> <!– 该标签支持的属性多达11个： align 设定<marquee>标签内容的对齐方式 absbottom：绝对底部对齐（与g、p等字母的最下端对齐） absmiddle：绝对中央对齐 baseline：底线对齐 bottom：底部对齐（默认） left：左对齐 middle：中间对齐 right：右对齐 texttop：顶线对齐 top：顶部对齐 代码如下: –> <marquee align=”absbottom”>align=”absbottom”：绝对底部对齐（与g、p等字母的最下端对齐）。 </marquee> <marquee align=”absmiddle”>align=”absmiddle”： 绝对中央对齐。 </marquee> <marquee align=”baseline”>align=”baseline”： 底线对齐。 </marquee> <marquee align=”bottom”>align=”bottom”： 底部对齐（默认）。 </marquee> <marquee align=”left”>align=”left”： 左对齐。 </marquee> <marquee align=”middle”>align=”middle”： 中间对齐。 </marquee> <marquee align=”right”>align=”right”： 右对齐。 </marquee> <marquee align=”texttop”>align=”texttop”： 顶线对齐。 </marquee> <marquee align=”top”>align=”top”： 顶部对齐。 </marquee> <!– behavior 设定滚动的方式： alternate： 表示在两端之间来回滚动。 scroll： 表示由一端滚动到另一端，会重复。 slide： 表示由一端滚动到另一端，不会重复。 代码如下: –> <marquee behavior=”alternate”>alternate：表示在两端之间来回滚动。 </marquee> <marquee behavior=”scroll”>scroll：表示由一端滚动到另一端，会重复。</marquee> <marquee behavior=”slide”>slide： 表示由一端滚动到另一端，不会重复。</marquee> <!– bgcolor 设定活动字幕的背景颜色，背景颜色可用RGB、16进制值的格式或颜色名称来设定。代码如下: –> <marquee bgcolor=”#006699″>设定活动字幕的背景颜色 bgcolor=”#006699″</marquee> <marquee bgcolor=”RGB(10%,50%,100%,)”>设定活动字幕的背景颜色 bgcolor=”rgb(10%,50%,100%,)”</marquee> <marquee bgcolor=”red”>设定活动字幕的背景颜色 bgcolor=”red”</marquee> <!– direction 设定活动字幕的滚动方向，代码如下: –> <marquee direction=”down”>设定活动字幕的滚动方向direction=”down”：向下</marquee> <marquee direction=”left”>设定活动字幕的滚动方向direction=”left”：向左</marquee> <marquee direction=”right”>设定活动字幕的滚动方向direction=”right”：向右</marquee> <marquee direction=”up”>设定活动字幕的滚动方向direction=”up”：向上</marquee> <!– height 设定活动字幕的高度，代码如下: –> <marquee height=”500″ direction=”down” bgcolor=”#CCCCCC”>设定活动字幕的高度height=”500″</marquee> <!– width 设定活动字幕的宽度，代码如下: –> <marquee width=”500″ bgcolor=”#CCCCCC”>设定活动字幕的宽度width=”500″</marquee> <!– hspace 设定活动字幕里所在的位置距离父容器水平边框的距离，代码如下: –> <table width=”500″ border=”1″ align=”center” cellpadding=”0″ cellspacing=”0″> <tr> <td><marquee hspace=”100″ bgcolor=”#CCCCCC”>hspace=”100″</marquee></td> </tr> </table> <!– vspace 设定活动字幕里所在的位置距离父容器垂直边框的距离,代码如下: –> <marquee vspace=”100″ bgcolor=”#CCCCCC”>hspace=”100″</marquee> <!– loop 设定滚动的次数，当loop=-1表示一直滚动下去，默认为-1,代码如下: –> <marquee loop=”-1″ bgcolor=”#CCCCCC”>我会不停地走。</marquee> <p> </p> <marquee loop=”2″ bgcolor=”#CCCCCC”>我只走两次哦</marquee> <!– scrollamount 设定活动字幕的滚动速度，单位pixels，代码如下: –> <marquee scrollamount=”10″ >scrollamount=”10″ </marquee> <marquee scrollamount=”20″ >scrollamount=”20″ </marquee> <marquee scrollamount=”30″ >scrollamount=”30″ </marquee> <!– scrolldelay 设定活动字幕滚动两次之间的延迟时间，单位millisecond（毫秒），值大了会有一步一停顿的效果。代码如下: –> <marquee scrolldelay=”10″ >scrolldelay=”10″ </marquee> <marquee scrolldelay=”100″ > scrolldelay=”100″</marquee> <marquee scrolldelay=”1000″>scrolldelay=”1000″ </marquee> // 页面小星星效果 <script> (function(window,document,undefined){ var hearts = []; window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback){ setTimeout(callback,1000/60); } })(); init(); function init(){ css(“.heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ”;width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}”); attachEvent(); gameloop(); } function gameloop(){ for(var i=0;i<hearts.length;i++){ if(hearts[i].alpha <=0){ document.body.removeChild(hearts[i].el); hearts.splice(i,1); continue; } hearts[i].y–; hearts[i].scale += 0.004; hearts[i].alpha -= 0.013; hearts[i].el.style.cssText = “left:”+hearts[i].x+”px;top:”+hearts[i].y+”px;opacity:”+hearts[i].alpha+”;transform:scale(“+hearts[i].scale+”,”+hearts[i].scale+”) rotate(45deg);background:”+hearts[i].color; } requestAnimationFrame(gameloop); } function attachEvent(){ var old = typeof window.onclick===”function” && window.onclick; window.onclick = function(event){ old && old(); createHeart(event); } } function createHeart(event){ var d = document.createElement(“div”); d.className = “heart”; hearts.push({ el : d, x : event.clientX – 5, y : event.clientY – 5, scale : 1, alpha : 1, color : randomColor() }); document.body.appendChild(d); } function css(css){ var style = document.createElement(“style”); style.type=”text/css”; try{ style.appendChild(document.createTextNode(css)); }catch(ex){ style.styleSheet.cssText = css; } document.getElementsByTagName(‘head’)[0].appendChild(style); } function randomColor(){ return “rgb(“+(~~(Math.random()*255))+”,”+(~~(Math.random()*255))+”,”+(~~(Math.random()*255))+”)”; } })(window,document); </script> </html>
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/87369.html
