文字图片滚动实现方法介绍及差别分析
发布时间：2023-10-26 14:55:39 所属栏目：经验 来源：
导读：关于文字和图片的滚动以及滚动实现的方式方法是老得不能再老的问题了。相信只要接触过网站网页的基本都知道和了解，但是全网都没有一个比较系统化的介绍和说明比较，今天361模板时间比较充足就给大家做个这样的教程。
|
关于文字和图片的滚动以及滚动实现的方式方法是老得不能再老的问题了。相信只要接触过网站网页的基本都知道和了解，但是全网都没有一个比较系统化的介绍和说明比较，今天361模板时间比较充足就给大家做个这样的教程。让大家系统的了解学习一下，主要针对新手，老鸟大神请绕道。 一、最早使用的<marquee>实现滚动 <marquee><h1 style="margin: 40px; font: 30px Microsoft Yahei; text-align: center;">简单的无缝向上滚动效果演示1</h1></marquee> 这里是使用的<marquee>实现最为简单的滚动，当然<marquee>可以附带很多属性: 1.direction属性：滚动方向(包括4个值：up、down、left、right) 说明：up：从下向上滚动；down：从上向下滚动；left：从右向左滚动；right：从左向右滚动。 语法： <marquee direction="滚动方向">...</marquee> 2.behavior属性：滚动方式(包括3个值：scroll、slide、alternate) 说明：scroll：循环滚动，默认效果；slide：只滚动一次就停止；alternate：来回交替进行滚动。 语法： <marquee behavior="滚动方式">...</marquee> 3.scrollamount属性：滚动速度(滚动速度是设置每次滚动时移动的长度，以像素为单位) 语法： <marquee scrollamount="5">...</marquee> 4.scrolldelay属性:设定滚动两次之间的延迟时间，值大了会有一步一停顿的效果(设置滚动的时间间隔，单位是毫秒) 语法： <marquee scrolldelay="100">...</marquee> 5.loop属性：设定滚动循环的次数(默认值是-1，滚动会不断的循环下去) 语法： <marquee loop="2">...</marquee> 例如： <marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee> <marquee loop="2" bgcolor="#CCCCCC">我只走两次哦</marquee> 6.width、height属性：设定滚动字幕的宽度、高度 语法： <marquee width="500" height="200">...</marquee> 7.bgcolor属性：设定滚动字幕的背景颜色(可以是颜色值，也可以是rgb()或rgba()函数) 语法： <marquee bgcolor="rgba(0,0,0,0.2)">...</marquee> 8.hspace、vspace属性：空白空间(相当于设置margin值) 说明：hspace：设定活动字幕里所在的位置距离父容器水平边框的距离，如hspace=“10”，即等同于：margin：0 10px； vspace：设定活动字幕里所在的位置距离父容器垂直边框的距离，如vspace=“10”，即等同于：margin：10px 0； 语法： <marquee hspace="10" vspace="10">...</marquee> (等同于：margin：10px；) 9.align属性：设定滚动字幕内容的对齐方式(包括9个值：absbottom、absmiddle、baseline、bottom、left、middle、right、texttop、top) 说明：absbottom：绝对底部对齐（与g、p等字母的最下端对齐） absmiddle：绝对中央对齐 baseline：底线对齐 bottom：底部对齐（默认） left：左对齐 middle：中间对齐 right：右对齐 texttop：顶线对齐 top：顶部对齐 语法： <marquee align="对齐方式">...</marquee> 10.face属性：设定滚动字幕的文字字体 语法： <marquee font="楷体_GB2312"></marquee> 11.color属性：设定滚动字幕的文字颜色 语法： <marquee color="#333"></marquee> 12.size属性：设定滚动字幕的文字字号 语法： <marquee size="3"></marquee> 13.STRONG属性：设定滚动字幕的文字加粗 语法： <marquee STRONG></marquee> 另外还有2个鼠标两个事件： onMouseOut="this.start()" 用来设置鼠标移出该区域时继续滚动 onMouseOver="this.stop()" 用来设置鼠标移入该区域时停止滚动 例如下面的这端滚动代码 <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()">简单的jQuery无缝向上滚动效果演示1</marquee> 二、JS+CSS实现简单的滚动 1、css代码如下： #scrollobj{ white-space:nowrap; overflow:hidden; width:300px; margin:0 auto; height:80px; line-height:80px; background-color: #FF0000; color: #FFFF00; font-size:30px; font-weight:800;} 2、JS代码如下 function scroll(obj){ var tmp=(obj.scrollLeft)++; if(obj.scrollLeft==tmp){ obj.innerHTML += obj.innerHTML; } if(obj.scrollLeft>=obj.firstChild.offsetWidth){ obj.scrollLeft=0; }}setInterval("scroll(document.getElementById('scrollobj'))",40); 里面的数字40是控制滚动速度的，可以根据自己的需要设置快慢。 3、HTML代码 <div id="scrollobj">简单的jQuery无缝向上滚动效果演示1!!! </div> 也可以参看《js向上滚动消息框代码 向上翻滚公告信息代码》。 三、JQ实现文字图片滚动 <!DOCTYPE html><html><head><meta charset="utf-8"><title>简单的jQuery无缝向上滚动效果演示</title><style>* {padding:0;margin:0;font-family:"微软雅黑";}li {list-style:none;}a {text-decoration:none;}img {border:none;}.box {padding-left:50px;background:url("images/xtb.png") no-repeat;margin-top:100px;margin-left:100px;}.winBox {width:300px;height:40px;overflow:hidden;position:relative;background:pink;}.scroll {/*width的大小是根据下面li的长度和多少个li而定的，需注意！*/width:1500px;position:absolute;left:0px;top:0px;}.scroll li {width:150px;float:left;line-height:40px;text-align:center;} </style><script src="http://www.cuoxin.com/jquery/jquery-1.7.1.js"></script><script type="text/javascript">$(function() { var num = 0; function goLeft() { //750是根据你给的尺寸，可变的 if (num == -750) { num = 0; } num -= 1; $(".scroll").css({ left: num }) } //设置滚动速度 var timer = setInterval(goLeft, 20); //设置鼠标经过时滚动停止 $(".box").hover(function() { clearInterval(timer); }, function() { timer = setInterval(goLeft, 20); })})</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head> <body> <div> <div> <ul> <li><a href="#">时尚休闲裤68元</a></li> <li><a href="#">羊呢绒套衫38元</a></li> <li><a href="#">新款雪地靴88元</a></li> <li><a href="#">加厚法兰绒108元</a></li> <li><a href="#">连裤袜19元2双</a></li> <li><a href="#">时尚休闲裤68元</a></li> <li><a href="#">羊呢绒套衫38元</a></li> <li><a href="#">新款雪地靴88元</a></li> <li><a href="#">加厚法兰绒108元</a></li> <li><a href="#">连裤袜19元2双</a></li> </ul> </div></div> </body></html> 好了，基本够用了，今天就给大家讲这些文字和图片的滚动代码，打完收工拉。 （编辑：聊城站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐
