Html 标题滚动效果实现 marquee标签属性

来源：互联网发布：剑三花姐捏脸数据编辑：程序博客网时间：2024/05/21 13:04

开发时遇到一个问题，同一个网页可能在不同的环境下打开，亦可能是PC端，又亦是手机端。而在手机端时由于手机型号不同的分辨率也尽然不同，导致标题显示时无法显示完全，或撑大原标签导致界面变形。

问题描述：

使用PC端打开界面无影响，宽度足够，使用不同型号的手机打开显示效果不一致，有的显示不完全有的撑开变形，总的来说就是程序出现了特别显眼的Bug。

图就不上了，应该都能理解是个什么情况。

代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"  name="viewport" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" content="ie=edge"/><base href="<%=basePath%>"><title>资料下载</title></head><body><div style="width: 100%;height: 40px;"><div style="width: 33%;text-align: left;float: left;background-image:url('${pageContext.request.contextPath }/app/images/03.png'); background-repeat: repeat-x;"><a href="javascript:void(0);"> <img id="back" onclick="javascript :history.back(-1)"src="${pageContext.request.contextPath }/app/images/back1.png" style=" margin-left: 10px;height: 40px;"height="40"></a></div><div style="width: 33%;height:40px;text-align:center;float: left;background-color:#c1c1c1;line-height:40px;">${datumDown.file_name}</div><div style="width: 33%;height:40px;float: left;background-color:#c1c1c1;"> </div></div><div align="center" style="width: 100%;height: 90%;">${datumDown.content }</div></body></html>

通过代码可以发现，正常情况下使用PC端打开是完全没有任何问题的，

但更改到了手机端时，标题长途在五个字显示正常，一旦字数超过了某个限制就会出现如下，

没错，它被挤变形了，变形了，而且越小的分辨率变得越离谱。

问题解决：

想到了使用滚动条的方式，如若标签内字体所容纳超过了外部的承受范围，则让他已滚动条的方式进行滚动避免变形。

直接怼代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"  name="viewport" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" content="ie=edge"/><script type="text/javascript"src="${pageContext.request.contextPath }/easyui/jquery.min.js"></script><base href="<%=basePath%>"><title>资料下载</title></head><body><script type="text/javascript">   $(function(){   var divwidth = $("#div").width();   var marqueewidth = $("span").width();   var value = $("#value").text();   if((divwidth-marqueewidth)<20){  //判断间距是否合理   $("#div").html("<marquee behavior='alternate' scrolldelay='250' style='width:auto;padding:0px 20px 0px 20px;'>"+value+"</marquee>");   }   });   </script>  <div style="width: 100%;height: 40px;"><div style="width: 27%;text-align: left;float: left;background-image:url('${pageContext.request.contextPath }/app/images/03.png'); background-repeat: repeat-x;"><a href="javascript:void(0);"> <img id="back" onclick="javascript :history.back(-2)"src="${pageContext.request.contextPath }/app/images/back1.png" style=" margin-left: 10px;height: 40px;"height="40"></a></div><div id="div" style="width: 53%;height:40px;text-align:center;float: left;background-color:#c1c1c1;line-height:40px;"><span id="value">${datumDown.file_name}</span></div><div style="width: 20%;height:40px;float: left;background-color:#c1c1c1;"> </div></div><div align="center" style="width: 100%;height: 90%;">${datumDown.content}</div></body></html>

其中，使用了marquee标签，无需我们再为此进行特殊编码，亦达到目的，运行后

进行前后滚动，以此达到标题不越界效果，并达到了美观一说。

附上marquee属性等：

marquee
功能：
使文字或者图片等产生移动效果
语法：
<marquee loop="value1" behavior="value2" ....> displaydata </marquee>
注<marquee>是成对标记

truespeed 未知意义

loop
设定跑马灯的次数

behavior
设定走动方式
① scroll 跑到尽头后再重新开始(默认)
② slide 跑完一次就不跑了
③ alternate 以左右来回移动的方式跑

direction
设定跑马灯移动方向
① left 从右向左(默认方式)
② right 从左向右

scrolldelay
设定移动速度,用来设定延迟时间
数值越大,速度越慢(默认为90)
单位以毫秒来计算

scrollamount
设定移动速度,跑马灯移动距离
数值越大,速度越慢(默认为6)
以移动的pixel为单位

width
调整跑马灯的宽度

height
调整跑马灯的高度

bgcolor
设定跑马灯的背景颜色

<MARQUEE> 只适用于 IE ，叫做"跑马灯" 如 Status Bar 的那种，意指走动或卷动的文字，其参数设定比较多。
<marquee behavior="SCROLL" direction="LEFT" bgcolor="#0000FF" height="30" width="150" hspace="0" vspace="0" loop="INFINITE" scrollamount="30" scrolldelay="500">Hello</marquee>

behavior="SCROLL"
决定文字的卷动方式，可选值为：
SCROLL 一般卷动，是内定值。
SLIDE 如幻灯片，一格格的，文字一接触左边便全消失。
ALTERNATE 文字向左右两边撞来撞去。

direction="LEFT"
设定文字設定文字的卷动方向，LEFT 表示向左，是内定值，RIGHT 表示向右。

bgcolor="#0000FF"
设定文字卷动范围的背景颜色，颜色值可参考【调色原理】。

height="30" width="150"
>设定文字卷动范围，可采用相对或绝对，如 30% 或 30 等，单位为像素。

hspace="0" vspace="0"
设定文字的水平及垂直空白位置。

loop="INFINITE"
设定文字卷动次数，其值可以是正整数或 INFINITE，INFINITE 是默认值，表示无限次。

scrollamount="30"
每「格」文字间的间隔，单位是像素。

scrolldelay="500"
文字卷动的停顿时间，单位是毫秒。

以上marquee标签属性等转载至：http://blog.sina.com.cn/s/blog_49692d0d0100mqno.html

0 0