导航:首页 > 万维百科 > 网页设计怎么设置向右的滚动效果

网页设计怎么设置向右的滚动效果

发布时间:2021-03-24 01:48:45

1、救助网页里的向右滚动是怎么做出来的?

给你一个相关的例子看看
<!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=gb2312" />
<title>-</title>
</head>

<body>
<div style="background:#999999;">
<div id="sty_1"></div>
</div>
<a href="#" id="mo">向左移动100px;</a>
<a href="#" id="mo1">向左移动200px;</a>
<script>
<!--
function $d(s){return document.getElementById(s);}
$d('sty_1').style.width="200px";
$d('sty_1').style.height="50px";
$d('sty_1').style.border="1px solid #000000";
$d('sty_1').style.marginLeft="500px";
var c="";
var mot;
function $i(obj){
var w=$d('sty_1').style.marginLeft;
var c=parseInt(w);
if(c>obj){
c<=0?c=0:c=c-3;
if(c==0){function(){clearTimeout(mot)}};
$d('sty_1').style.marginLeft=c+'px';
mot=setTimeout(function (){$i(obj)},10);
}
}
$d("mo").onclick=function(){
var mov=parseInt($d('sty_1').style.marginLeft)-100;
$i(mov);
}
$d("mo1").onclick=function(){
var mov=parseInt($d('sty_1').style.marginLeft)-200;
$i(mov);
}
//-->
</script>
</body>
</html>

2、如何给网页右侧的滚动条修改颜色

用谷歌浏览器或者新版浏览器,点开浏览器的查看,可以在里面更改html代码,把backgound,就是背景颜色,换颜色就可以了。

3、怎样在网页设计中把所需的文字从左到右滚动

14

<marquee>

width="300px"

height="200px"

behavior="scroll"

direction="left"

scrollamount="50"

loop="10"

限制滚动文字的范围

限制滚动文字的范围

限制滚动文字的行为(alternate:来回、scroll:循环滚动、slide:只滚动一次)

滚动的方向(left、right、down、up)

设置文字滚动的速度

设置滚动的次数
看看 有用吗?

4、在html中怎么样实现很多图片从左向右的滚动效果

纯html语言实现:
<marquee><img src=""/><img ...>......</marquee>
javascript实现:
<!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=gb2312" />
<title>图片滚动</title>
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
#content {
height: 125px;
width: 340px;
border: 1px solid #0000CC;
position:absolute;
top:50px;
left:50px;
}
#the_left {
background-color: #eeeeee;
float: left;
height: 125px;
width: 20px;
background-image: url(images/left.jpg);
background-repeat: no-repeat;
background-position: center;
}
#demo {
background-color: #e1e1e1;
float: left;
height: 125px;
width: 300px;
overflow:hidden;
}
#the_right {
background-color: #eeeeee;
float: left;
height: 125px;
width: 20px;
background-image: url(images/right.jpg);
background-repeat: no-repeat;
background-position: center;
}
#demo1 {
float: left;
height: 125px;
}
#indemo {
float: left;
height: 125px;
width: 1000px;
}
#demo2 {
float: left;
height: 125px;
}
a img{
filter:alpha(opacity=60);
border:0;
}
a:hover img{
filter:alpha(opacity=100);
}

-->
</style>
</head>
<body>

<div id="content">
<div id="the_left"></div>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="images/1.jpg"/></a>
<a href="#"><img src="images/2.jpg"/></a>
<a href="#"><img src="images/3.jpg"/></a>
<a href="#"><img src="images/4.jpg"/></a>
</div>
<div id="demo2"></div>
</div>
</div>
<div id="the_right"></div>
</div>
<script>
var flag;
var MyMar_left;
var MyMar_right;
var speed=5;
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");
var button_left=document.getElementById("the_left");
var button_right=document.getElementById("the_right");
//将demo1的内容赋值给demo2,实现无缝隙滚动
demo2.innerHTML=demo1.innerHTML;
//向左滚动方法
function Marquee_left(){
flag=0;
if(demo2.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft-=demo1.offsetWidth;
}else{
demo.scrollLeft++;
}
}
//向右滚动方法
function Marquee_right(){
flag=1;
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth;
else{
demo.scrollLeft--;
}
}
//左边按钮
button_left.onmouseover=function(){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
MyMar_left=setInterval("Marquee_left()",speed);
};
//右边按钮
button_right.onmouseover=function(){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
MyMar_right=setInterval("Marquee_right()",speed);
};
//鼠标放在图片上体制滚动
demo.onmouseover=function(){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
};
//鼠标移走恢复滚动,需要判断原先的移动方向
demo.onmouseout=function(){
if(flag==0){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
MyMar_left=setInterval("Marquee_left()",speed);
}if(flag==1){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
MyMar_right=setInterval("Marquee_right()",speed);
}
};

</script>
</body>
</html>

5、怎么让网页显示从左到右的滚动时间

14width="300px"height="200px"behavior="scroll"direction="left"scrollamount="50"loop="10"限制滚动文字的范围限制滚动文字的范围限制滚动文字的行为(alternate:来回、scroll:循环滚动、slide:只滚动一次)滚动的方向(left、right、down、up)设置文字滚动的速度设置滚动的次数看看有用吗?

6、菜鸟请教高手,网页制作中怎么让滚动条处于页面最右侧。。。

将你滚动条所在的位置,设置宽度为100%

与网页设计怎么设置向右的滚动效果相关的知识