JavaScript는 기본적으로 IE6과 호환되며 스크롤 텍스트 기능을 제어할 수 있습니다.
- 小云云원래의
- 2018-02-05 16:17:541476검색
1. 기본 목표
아래와 같이 텍스트가 0.05초마다 15px~400px 영역에서 5px픽셀씩 원활하게 스크롤되도록 할 수 있습니다. 우주는 문제 없습니다. 지구의 px와 우주의 px를 말한 다음 두 개의 버튼을 설정하고 "중지"를 클릭하면 정지됩니다. Start'를 눌러 시작하게 되며, 'Start'를 클릭하면 버그가 발생하지 않으며, 이 상태를 계속 유지하면 'Stop' 상태가 되며, 'Start'를 클릭하면 버그가 발생하지 않습니다. "그만", 문제 없습니다.
2. HTML 레이아웃
코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>marquee</title> </head> <body> <p>sssssss</p> <p id="marquee" style="padding-left:0px;">marquee</p> <p>sssssss</p> <button onclick="return marquee_move_stop()">停止</button> <button onclick="return marquee_move_start()">开始</button> </body> </html>
아이디어는 아래와 같습니다. 사진 한 장이 천 단어의 가치가 있습니다. 더 이상 말하지 않겠습니다. 코드와 사진을 직접 비교해 보세요.
3. 스크립트 부분
전체 컨트롤의 핵심입니다.
<script>
//设置其滚动速度是5px/0.05s，这样能够实现无缝滚动，不会一卡一卡的。
var speed=5;
var marqueeTimer=setInterval("marquee_move()",50);
//这个变量主要是用来下面控制滚动开始与停止的两个函数
var isMarqueeMove=true;
//滚动的核心函数
function marquee_move(){
//这么长的代码主要是为了把带px的padding-left转化为一个可以操作的数
//如padding-left:0px;经过这一行代码之后var marquee_x=0;
var marquee_x=parseInt(document.getElementById("marquee").style.paddingLeft.substring(0,document.getElementById("marquee").style.paddingLeft.indexOf("px")));
//如果滚过400px这个位置，那就向反方向走，反之亦然
if(marquee_x>400){
speed=-5;
}
//这里不要设置成0，可能会产生越界bug
if(marquee_x<15){
speed=5;
}
//文字向右滚5px
document.getElementById("marquee").style.paddingLeft=marquee_x+speed+"px";
}
//下面控制滚动开始与停止的两个函数
//之所以要立flag，是因为marqueeTimer=setInterval("marquee_move()",50);多次被执行，滚动会变得很快和无法控制
//后方的计时器不会替换到前方的计时器
function marquee_move_stop(){
if(isMarqueeMove){
clearTimeout(marqueeTimer);
isMarqueeMove=false;
}
}
function marquee_move_start(){
if(!isMarqueeMove){
marqueeTimer=setInterval("marquee_move()",50);
isMarqueeMove=true;
}
}
</script>4. 요약
1. CSS에서 -가 있는 모든 속성은 자바스크립트에서 대문자로 변경되어야 합니다. 예를 들어 CSS의 왼쪽 패딩은 자바스크립트에서 paddingLeft입니다.
2. 이 구성 요소를 완성하려면 왼쪽 패딩을 사용하여 절대 위치를 설정할 필요가 없으며 이 구성 요소를 배치하는 방법을 고려해야 합니다.
3. 이 작업은 브라우저의 백분율 너비 내에서 스크롤되는 것이 가장 좋습니다. 결국 JavaScript에서 브라우저의 너비를 빼면 다양한 호환성 문제가 발생할 수 있습니다. 또는 고정된 값을 설정하면 이 코드는 짧습니다.
첨부: HTML의 비교적 인기 없는 태그 및 속성
1. f32b48428a809b51f04d3228cdf461fa 태그는 가로 구분선을 추가할 수 있습니다. 너비, 크기, 색상, 정렬(값이 뒤에 옴)을 포함하는 단일 마크 레이블 noshade(직접 추가됨(예: 텍스트 상자에서 비활성화되어 이 수평선에 그림자가 없음을 나타냄)) f32b48428a809b51f04d3228cdf461fa标签能够添加一条水平分隔线。单标记标签，拥有属性width,size,color,align（后接值）noshade（直接添加，如文本框的disabled，表示这条水平线是无阴影的）
2.ed126914ed1419bab26abf7cf307b7b9标签已经被微软废除了。
微软这个家伙在最新的IE8下已经放弃对MARQUEE的支持了（我这里很无语，MARQUEE是微软自己创造出来的，现在火狐都支持了，它自己不干了）
用marquee有诸多问题的。DW给你提示是警告你慎重。
如下面的代码在IE8的滚动是存在问题的，当图片滚完之后会自动刷新，相当难看，无法现实无缝滚动。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滚动</title> </head> <body> <marquee width=250px behavior="scroll"> <a href="http://www.163.com" rel="external nofollow" ><img src="img0.jpg" width=100 hspace=50/></a> <a href="http://www.baidu.com" rel="external nofollow" ><img src="img28.jpg" width=100px /></a> </marquee> </body> </html>
3.8e99a69fbe029cd4e2b854e244eab143标签是强调标签，基于内容。a4b561c25d9afb9ac8dc4d70affff419是物理样式。2cdea26b4c3988e37d674b56660962a7b96cac025db4031319c29e1eb68f19d6双标记标签能分别使字体上标与下标
4.©是代表版权字符©，®则是注册商标， 是空格
5.对于图片，其hspace属性能够设置图片与图片之间的间距。
6.6c04bd5ca3fcae76e30b72ad730ca86d
<marquee> ; 태그는 Microsoft에서 더 이상 사용되지 않습니다. <p><span style="color: #0000ff">Microsoft는 최신 IE8에서 MARQUEE에 대한 지원을 중단했습니다. (말문이 막힙니다. MARQUEE는 Microsoft 자체에서 만들어졌고 이제 Firefox는 이를 지원하고 있으며 더 이상 지원하지 않습니다.) </span></p>marquee of 사용에 많은 문제가 있습니다. DW는 주의하라고 경고하는 팁을 제공합니다. <p></p>IE8에서 다음 코드의 스크롤에 문제가 있습니다. 사진을 스크롤하면 자동으로 새로 고쳐지는데, 이는 매우 보기 흉하고 원활한 스크롤을 달성할 수 없습니다. <p><a href="http://www.php.cn/div-tutorial-361742.html" target="_self"></a></p>rrreee<p>3. <code>8e99a69fbe029cd4e2b854e244eab143 태그는 내용을 기반으로 하는 강조 태그입니다. a4b561c25d9afb9ac8dc4d70affff419는 물리적 스타일입니다. 사진 사이의 간격을 설정하는 기능입니다. 6. 6c04bd5ca3fcae76e30b72ad730ca86d 태그에는 방문한 하이퍼링크와 방문하지 않은 하이퍼링크의 색상을 각각 설정할 수 있는 vlink 속성이 있으며, topmargin은 각각 문서의 왼쪽 여백과 위쪽 여백을 지정할 수 있습니다.
7.08a496ad8e2f10f98f1a89cd5d20c854a2550709feb08fac1e80b795b4196785 검색 엔진에서 크롤링하는 키워드 및 웹 페이지 설명을 설정할 수 있습니다.
관련 권장 사항:
위 내용은 JavaScript는 기본적으로 IE6과 호환되며 스크롤 텍스트 기능을 제어할 수 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!