首頁 > 生活講堂

圖片滾動代碼(圖片滾動代碼js)

更新時間:2023-02-28 19:17:45 閱讀：評論：0

網(wǎng)頁中的滾動圖片的代碼怎么寫？

網(wǎng)頁中的滾動圖片的代碼有上下左右四個方向，分別是：

<head>

<----->

</head>

<body>

<！--向上滾動代碼開始-->

</div>

</div>

var speed=30;

var colee2=document.getElementById("colee2");

var colee1=document.getElementById("colee1");

var colee=document.getElementById("colee");

colee2.innerHTML=colee1.innerHTML; //克隆colee1為colee2

function Marquee1(){

//當(dāng)滾動至colee1與colee2交界時

if(colee2.offtTop-colee.scrollTop<=0){

colee.scrollTop-=colee1.offtHeight; //colee跳到最頂端

}el{

colee.scrollTop++

}

var MyMar1=tInterval(Marquee1,speed)//設(shè)置定時器

//鼠標(biāo)移上時清除定時器達(dá)到滾動停止的目的

colee.onmouover=function() {clearInterval(MyMar1)}

//鼠標(biāo)移開時重設(shè)定時器

colee.onmouout=function(){MyMar1=tInterval(Marquee1,speed)}

</script>

</div>

</div>

var speed=30

var colee_bottom2=document.getElementById("colee_bottom2");

var colee_bottom1=document.getElementById("colee_bottom1");

var colee_bottom=document.getElementById("colee_bottom");

colee_bottom2.innerHTML=colee_bottom1.innerHTML

colee_bottom.scrollTop=colee_bottom.scrollHeight

function Marquee2(){

if(colee_bottom1.offtTop-colee_bottom.scrollTop>=0)

colee_bottom.scrollTop+=colee_bottom2.offtHeight

el{

colee_bottom.scrollTop--

}

var MyMar2=tInterval(Marquee2,speed)

colee_bottom.onmouover=function() {clearInterval(MyMar2)}

colee_bottom.onmouout=function() {MyMar2=tInterval(Marquee2,speed)}

</script>

</tr>

</table>

</td>

</tr>

</table>

</div>

//使用div時，請保證colee_left2與colee_left1是在同一行上.

var speed=30//速度數(shù)值越大速度越慢

var colee_left2=document.getElementById("colee_left2");

var colee_left1=document.getElementById("colee_left1");

var colee_left=document.getElementById("colee_left");

colee_left2.innerHTML=colee_left1.innerHTML

function Marquee3(){

if(colee_left2.offtWidth-colee_left.scrollLeft<=0)//offtWidth 是對象的可見寬度

colee_left.scrollLeft-=colee_left1.offtWidth//scrollWidth 是對象的實(shí)際內(nèi)容的寬，不包邊線寬度

el{

colee_left.scrollLeft++

}

var MyMar3=tInterval(Marquee3,speed)

colee_left.onmouover=function() {clearInterval(MyMar3)}

colee_left.onmouout=function() {MyMar3=tInterval(Marquee3,speed)}

</script>

</tr>

</table>

</td>

</tr>

</table>

</div>

var speed=30//速度數(shù)值越大速度越慢

var colee_right2=document.getElementById("colee_right2");

var colee_right1=document.getElementById("colee_right1");

var colee_right=document.getElementById("colee_right");

colee_right2.innerHTML=colee_right1.innerHTML

function Marquee4(){

if(colee_right.scrollLeft<=0)

colee_right.scrollLeft+=colee_right2.offtWidth

el{

colee_right.scrollLeft--

}

var MyMar4=tInterval(Marquee4,speed)

colee_right.onmouover=function() {clearInterval(MyMar4)}

colee_right.onmouout=function() {MyMar4=tInterval(Marquee4,speed)}

</script>

擴(kuò)展資料：

代碼就是程序員用開發(fā)工具所支持的語言寫出來的源文件，是一組由字符、符號或信號碼元以離散形式表示信息的明確的規(guī)則體系。代碼設(shè)計的原則包括唯一確定性、標(biāo)準(zhǔn)化和通用性、可擴(kuò)充性與穩(wěn)定性、便于識別與記憶、力求短小與格式統(tǒng)一以及容易修改等。源代碼是代碼的分支，某種意義上來說，源代碼相當(dāng)于代碼。

現(xiàn)代程序語言中，源代碼可以書籍或磁帶形式出現(xiàn)，但最為常用格式是文本文件，這種典型格式的目的是為了編譯出計算機(jī)程序。計算機(jī)源代碼最終目的是將人類可讀文本翻譯成為計算機(jī)可執(zhí)行的二進(jìn)制指令，這種過程叫編譯，它由通過編譯器完成。

源代碼（也稱源程序），是指一系列人類可讀的計算機(jī)語言指令。

源代碼是相對目標(biāo)代碼和可執(zhí)行代碼而言的。源代碼就是用匯編語言和高級語言寫出來的地代碼。目標(biāo)代碼是指源代碼經(jīng)過編譯程序產(chǎn)生的能被cpu直接識別二進(jìn)制代碼。可執(zhí)行代碼就是將目標(biāo)代碼連接后形成的可執(zhí)行文件，當(dāng)然也是二進(jìn)制的。

在現(xiàn)代程序語言中，源代碼可以是以書籍或者磁帶的形式出現(xiàn)，但最為常用的格式是文本文件，這種典型格式的目的是為了編譯出計算機(jī)程序。計算機(jī)源代碼的最終目的是將人類可讀的文本翻譯成為計算機(jī)可以執(zhí)行的二進(jìn)制指令，這種過程叫做編譯，通過編譯器完成。

參考資料：百度百科-計算機(jī)代碼

html圖片向左無縫隙循環(huán)滾動代碼

用css3實(shí)現(xiàn)循環(huán)滾動效果：

css：

#wrap{

width:200px;

height:150px;

border:1pxsolid#000;

position:relative;

margin:100pxauto;

overflow:hidden;

}

#list{

position:absolute;

left:0;

top:0;

margin:0;

padding:0;

animation:move12sinfinitelinear;

-webkit-animation:move12sinfinitelinear;

width:500%;

}

#listli{

list-style:none;

width:200px;

height:150px;

border:0;

float:left;

}

@-webkit-keyframesmove{

0%{

left:0;

}

100%{

left:-800px;

}

@keyframesmove{

0%{

left:0;

}

100%{

left:-800px;

}

#wrap:hover#list{

-webkit-animation-play-state:paud;/*動畫暫停播放*/

}

html：

<divid="wrap">

<ulid="list">

</ul>

</div>

擴(kuò)展資料：

animation（動畫）屬性：

語法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

參數(shù)：

1、animation-name：指定要綁定到選擇器的關(guān)鍵幀的名稱。

2、animation-duration：動畫指定需要多少秒或毫秒完成。

3、animation-timing-function：設(shè)置動畫將如何完成一個周期。

值：

linear：動畫從頭到尾的速度是相同的。

ea：默認(rèn)。動畫以低速開始，然后加快，在結(jié)束前變慢。

ea-in：動畫以低速開始。

ea-out：動畫以低速結(jié)束。

ea-in-out：動畫以低速開始和結(jié)束。

cubic-bezier(n,n,n,n)：在 cubic-bezier 函數(shù)中自己的值。可能的值是從 0 到 1 的數(shù)值。

4、animation-delay：設(shè)置動畫在啟動前的延遲間隔。

5、animation-iteration-count ：定義動畫的播放次數(shù)。

值：

n：一個數(shù)字，定義應(yīng)該播放多少次動畫。

infinite：指定動畫應(yīng)該播放無限次（永遠(yuǎn)）。

讓圖片從右到左滾動的網(wǎng)頁代碼是怎么樣的？

往左是：
<marquee><img
src="你的圖片地址"></marquee>
往右是：
<marquee
direction=right><img
src="你的圖片地址"></marquee>
往上是：
<marquee
direction=up><img
src="你的圖片地址"></marquee>
往下是：
<marquee
direction=down><img
src="你的圖片地址"></marquee>
如果需要在當(dāng)鼠標(biāo)移動到圖片上時停止?jié)L動，就在<marquee>里加onmouover=stop()
onmouout=start()，
例如<marquee
direction=down
onmouover=stop()
onmouout=start()><img
src="你的圖片地址"></marquee>

實(shí)現(xiàn)網(wǎng)頁圖片向右滾動且鼠標(biāo)移上去就停止?jié)L動的代碼

在
標(biāo)簽里添加onMouOver="this.stop()" onMouOut="this.start()"即可。
1.
onmouover="this.stop()指的是當(dāng)你的鼠標(biāo)移到你定義好的對象時.該對象會停止當(dāng)前的動作。
2.
onmouout="this.start()指的是當(dāng)你的鼠標(biāo)移開你定義好的對象時,該對象會重新剛才的動作。
代碼如下，可以實(shí)現(xiàn)你說的當(dāng)鼠標(biāo)房子圖片上停止?jié)L動的效果

網(wǎng)頁設(shè)計圖片滾動代碼

素材的準(zhǔn)備。為了更好的表現(xiàn)網(wǎng)站的風(fēng)格和特色，具備一些更富表現(xiàn)力和吸引力的圖片是必不可少的。同理，準(zhǔn)備了一些與網(wǎng)頁主題密切相關(guān)的圖片，用于做為實(shí)現(xiàn)圖片滾動效果的素材。

打開Dreamweaver8，新建一網(wǎng)頁文件，并保存為名為“index.html"文件。

切換至代碼編輯界面，輸入如下代碼：

對應(yīng)效果如圖所示：

新建一CSS樣式表文件，并將該文件保存到與“index.html”相同的目錄下，文件名稱為“MyStyle.css"。

在新建的樣式表文件"MyStyle.css”文件中輸入如下代碼：
* { padding:0; margin:0;} /*設(shè)置所有對像的內(nèi)邊距為0*/
body { text-align:center;} /*設(shè)置頁面居中對齊*/
#photo-list {
/* 6張圖片的寬度（包含寬度、padding、border、圖片間的留白）
計算：6*(100+2*2+1*2+9) - 9
之所以減去9是第6張圖片的右邊留白 */
width:681px;

/* 圖片的寬度（包含高度、padding、border）
計算：100+2*2+1*2 */
height:106px;
margin:50px auto;
overflow:hidden; /*溢出部份將被隱藏*/
border:1px dashed #ccc;
}
#photo-list ul { list-style:none;}
#photo-list li { float:left; padding-right:9px;}

#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}

對應(yīng)文件內(nèi)容如圖所示：

在網(wǎng)頁文件"index.html"中添加對該樣式表的引用：

此時網(wǎng)頁效果如圖所示：

新建一個JS文件，并將該文件另存為“MoveEffect.js"。

在”MoveEffect.js“文件中輸入如下所示代碼：
var id = function(el) { return document.getElementById(el); },
c = id('photo-list');
if(c) {
var ul = id('scroll'),
lis = ul.getElementsByTagName('li'),
itemCount = lis.length,
width = lis[0].offtWidth, //獲得每個img容器的寬度
marquee = function() {
c.scrollLeft += 2;
if(c.scrollLeft % width <= 1){ //當(dāng) c.scrollLeft 和 width 相等時，把第一個img追加到最后面
ul.appendChild(ul.getElementsByTagName('li')[0]);
c.scrollLeft = 0;
};
},
speed = 50; //數(shù)值越大越慢
ul.style.width = width*itemCount + 'px'; //加載完后設(shè)置容器長度
var timer = tInterval(marquee, speed);
c.onmouover = function() {
clearInterval(timer);
};
c.onmouout = function() {
timer = tInterval(marquee, speed);
};
};

然后在主頁文件"index.html”中添加對該“MoveEffect.js”文件的引用。

代碼如圖所示：

打開“index.html”網(wǎng)頁文件，最終效果如果所示：

文字在圖片上滾動的代碼是什么？

在圖片上添加上下滾動文字的源代碼：

<DIV><TABLE style="WIDTH: 500px; HEIGHT: 375px" width=500 border=0><TBODY><TR><TD
background=圖片地址 height=375><P><MARQUEE style="WIDTH: 500px; HEIGHT: 375px" scrollAmount=1
scrollDelay=50 direction=up width=500 height=375>圖片上的文字</MARQUEE></P></TD></TR></TBODY>

代碼說明：
1，width=寬度 height=高度的數(shù)值為圖片顯示的大小比例，必須根據(jù)圖片實(shí)際大小調(diào)整；如圖片尺寸為1024：768的，其代碼中的寬度和高度，也必須變更為1024：768；圖片尺寸為500：375的，其代碼中的寬度和高度，就必須變更為500：375，否則顯示出來的畫面不完整；而且代碼里四組寬，高數(shù)值變更要統(tǒng)一；
2，scrollAmount=1 為字速，數(shù)值越大字的運(yùn)行速度越快；
3，border=0> 為邊框數(shù)值，0為無邊框；填上數(shù)字就變?yōu)橛羞吙颍覕?shù)字的大小，就是邊框的寬窄度；
4，direction=up 為字的行走方向 up=上 down=下；如要調(diào)整為左右方向的話 left=左 right=右
那字體就會從圖片頂端成單行通過；
5，滾動文字行與行之間不要有空行；

具體操作方法如下：
第一步：先要找到做文章背景圖片的圖片網(wǎng)絡(luò)地址，否則文章做了一半才去找圖片地址就麻煩了；
第二步：進(jìn)入發(fā)表文章窗口；
第三步：勾選“顯示源代碼”（至關(guān)重要!）；
第四步：在編輯欄內(nèi)原有代碼后面添加上列代碼（代碼里應(yīng)先加好圖片地址和你需要加入的文字）；
第五步：取消“顯示源代碼”的選擇，就會在編輯欄里看到圖片和文字效果了；
第六步：最后，點(diǎn)擊發(fā)表文章就OK了；

最后還有一條，如果不想讓文字滾動的話，那就只須按以上方法操作到第四步時，把準(zhǔn)備好的文章（包括已處理好字的大小，字體，顏色），直接復(fù)制到圖片上，點(diǎn)擊發(fā)表文章即可；當(dāng)然，代碼里“圖片上的文字”這幾個字應(yīng)預(yù)先去掉。

本文發(fā)布于:2023-02-28 18:46:00，感謝您對本站的認(rèn)可！

本文鏈接：http://m.newhan.cn/zhishi/a/167758306543815.html

版權(quán)聲明：本站內(nèi)容均來自互聯(lián)網(wǎng)，僅供演示用，請勿用于商業(yè)和其他非法用途。如果侵犯了您的權(quán)益請與我們聯(lián)系，我們將在24小時內(nèi)刪除。

本文word下載地址：圖片滾動代碼(圖片滾動代碼js).doc

本文 PDF 下載地址：圖片滾動代碼(圖片滾動代碼js).pdf

上一篇：雙系統(tǒng)怎么切換

下一篇：返回列表