導航:首頁 > 萬維百科 > 網頁設計怎麼設置向右的滾動效果

網頁設計怎麼設置向右的滾動效果

發布時間: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%

與網頁設計怎麼設置向右的滾動效果相關的知識