五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > javascript/jquery圖片滾動代碼（無縫、平滑、上下左右滾動）寫法

javascript/jquery圖片滾動代碼（無縫、平滑、上下左右滾動）寫法

文章來源：365jz.com     點擊數(shù)：587    更新時間：2018-01-10 09:01   參與評論
常用JS圖片滾動（無縫、平滑、上下左右滾動）

代碼大全innerHTML:    設(shè)置或獲取位于對象起始和結(jié)束標簽內(nèi)的 HTML

scrollHeight: 獲取對象的滾動高度。 
 
scrollLeft:   設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離 
 
scrollTop:    設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離 
 
scrollWidth: 獲取對象的滾動寬度 
 
offsetHeight: 獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的高度 
 
offsetLeft:   獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側(cè)位置 
 
offsetTop:    獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置 
 
offsetWidth: 獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的寬度 
 
以下包含四種方向的滾動代碼，粗體部分需要自行修改，可修改成更復雜的代碼，如圖文混排、加邊框、限制圖片大小等。 
 
增大width時，應該相應增加一些圖片（應該是使所有圖片組成的總寬度大于設(shè)定的width），即使是重復的，否則會在滾動一會兒后停下來，圖片不宜太大，否則在IE下滾動緩慢!  


實例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>向上下左右不間斷無縫滾動圖片的效果(兼容火狐和IE)</title>

</head>

<body>

<div id="colee" style="overflow:hidden;height:253px;width:410px;">

<div id="colee1">

<p><img src="images/445566.jpg"></p>

<p><img src="images/445566.jpg"></p>

<p><img src="images/445566.jpg"></p>

<p><img src="images/445566.jpg"></p>

<p><img src="images/445566.jpg"></p>

<p><img src="images/445566.jpg"></p>

</div>

<div id="colee2"></div>

</div>

<script>

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(){

//當滾動至colee1與colee2交界時

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

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

}else{

colee.scrollTop++

}

}

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

//鼠標移上時清除定時器達到滾動停止的目的

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

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

colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}

</script>


<!--向上滾動代碼結(jié)束-->

<br>


<!--下面是向下滾動代碼-->


<div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">

<div id="colee_bottom1">

<p><img src="images/445566.jpg"></p>

<p><img src="images/445566.jpg"></p>

<p><img src="images/445566.jpg"></p>

<p><img src="images/445566.jpg"></p>

<p><img src="images/445566.jpg"></p>

<p><img src="images/445566.jpg"></p>

</div>

<div id="colee_bottom2"></div>

</div>

<script>

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.offsetTop-colee_bottom.scrollTop>=0)

colee_bottom.scrollTop+=colee_bottom2.offsetHeight

else{

colee_bottom.scrollTop--

}

}

var MyMar2=setInterval(Marquee2,speed)

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

colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}

</script>



<!--向下滾動代碼結(jié)束-->

<br>


<!--下面是向左滾動代碼-->




<div id="colee_left" style="overflow:hidden;width:500px;">

<table cellpadding="0" cellspacing="0" border="0">

<tr><td id="colee_left1" valign="top" align="center">

<table cellpadding="2" cellspacing="0" border="0">

<tr align="center">

<td><p><img src="images/445566.jpg"></p></td>

<td><p><img src="images/445566.jpg"></p></td>

<td><p><img src="images/445566.jpg"></p></td>

<td><p><img src="images/445566.jpg"></p></td>

<td><p><img src="images/445566.jpg"></p></td>

<td><p><img src="images/445566.jpg"></p></td>

</tr>

</table>

</td>

<td id="colee_left2" valign="top"></td>

</tr>

</table>

</div>

<script>

//使用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.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是對象的可見寬度

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

else{

colee_left.scrollLeft++

}

}

var MyMar3=setInterval(Marquee3,speed)

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

colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}

</script>




<!--向左滾動代碼結(jié)束-->




<br>




<!--下面是向右滾動代碼-->

<div id="colee_right" style="overflow:hidden;width:500px;">

<table cellpadding="0" cellspacing="0" border="0">

<tr><td id="colee_right1" valign="top" align="center">

<table cellpadding="2" cellspacing="0" border="0">

<tr align="center">

<td><p><img src="images/445566.jpg"></p></td>

<td><p><img src="images/445566.jpg"></p></td>

<td><p><img src="images/445566.jpg"></p></td>

<td><p><img src="images/445566.jpg"></p></td>

<td><p><img src="images/445566.jpg"></p></td>

</tr>

</table>

</td>

<td id="colee_right2" valign="top"></td>

</tr>

</table>

</div>

<script>

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.offsetWidth

else{

colee_right.scrollLeft--

}

}

var MyMar4=setInterval(Marquee4,speed)

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

colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}

</script>




<!--向右滾動代碼結(jié)束-->

</body>

</html>


jquery無縫向上滾動實現(xiàn)代碼

實例2：

JS部份
 
$(function(){ 
var $this = $(".renav"); 
var scrollTimer; 
$this.hover(function(){ 
clearInterval(scrollTimer); 
},function(){ 
scrollTimer = setInterval(function(){ 
scrollNews( $this ); 
}, 2000 ); 
}).trigger("mouseout"); 
}); 
function scrollNews(obj){ 
var $self = obj.find("ul:first"); 
var lineHeight = $self.find("li:first").height(); 
$self.animate({ "margin-top" : -lineHeight +"px" },600 , function(){ 
$self.css({"margin-top":"0px"}).find("li:first").appendTo($self); 
}) 
}

HTML部份
 
<style type="text/css"> 
.renav{ 
width:200px; 
height:150px; 
line-height:21px; 
overflow:hidden; 
background:#FFFFFF; 
} 
.renav li{ 
height:21px; 
} 
</style> 
<div class="renav"> 
<ul style="margin-top: 0px;"> 
<li><a>羅氏</a></li> 
<li><a>瑞聲達</a></li> 
<li><a>圖片1</a></li> 
<li><a>圖片2</a></li> 
<li><a>圖片3</a></li> 
<li><a>圖片4</a></li> 
<li><a>西門子</a></li> 
<li><a>歐姆龍</a></li> 
</ul> 
</div>
html文字滾動代碼

<marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" direction="up" >
<div align="left" ><br />
</div >
<center ><font face="黑體" color="#008000" size="4" ></font ></center >
<div align="left" ><br />
</div >
<center >
<p ><font color="#ff6600" size="4" >滾動文字</font ></p >
<p ><font color="#ff4500" size="4" >滾動文字</font ></p >
<p ><font color="#ff3300" size="4" >滾動文字</font ><br />
<br />
</p >
</marquee >

marquee 參數(shù)：
BGColor：滾動文本框的背景顏色。
Direction：滾動方向設(shè)置，可選擇Left、Right、up和down。
scrolldelay：每輪滾動之間的延遲時間，越大越慢。
scrollamount：一次滾動總的時間量，數(shù)字越小滾動越慢。
Behaviour：滾動的方式設(shè)置，三種取值：Scroll（循環(huán)滾動） lide（單次滾動）、Alternate（來回滾動）。
Align：文字的對齊方式設(shè)置。可選擇Middle(居中)、Bottom(居下)還是Top(居上)。
Width：滾動文本框的寬度，輸入一個數(shù)值后從后面的單選框選擇in Pixels(按像素)或是in Percent(按百分比)。
Height：滾動文本框的高度，輸入一個數(shù)值后從后面的單選框選擇in Pixels(按像素)或是in Percent(按百分比)。
loop：滾動次數(shù)。默認為infinite
hspace、vspace：前后、上下的空行。


1.建立第一個滾動字幕。代碼：

<marquee scrollAmount=2 width=300>風景線</marquee>

2.各參數(shù)詳解：
a)scrollAmount。它表示速度，值越大速度越快。如果沒有它，默認為6，建議設(shè)為1～3比較好。
b)width和height，表示滾動區(qū)域的大小，width是寬度，height是高度。特別是在做垂直滾動的時候，一定要設(shè)height的值。
c)direction。表示滾動的方向，默認為從右向左：←←←。可選的值有right、down、up。滾動方向分別為：right表示→→→，up 表示↑，down表示↓。
d)scrollDelay，這也是用來控制速度的，默認為90，值越大，速度越慢。通常scrollDelay是不需要設(shè)置的。
e)behavior。用它來控制屬性，默認為循環(huán)滾動，可選的值有alternate(交替滾動)、slide(幻燈片效果，指的是滾動一次，然后停止 滾動)


3.實例：
a)如何給滾動字幕加超鏈接？這跟平時的超鏈接是完全一樣的。只要在文字外面加上<a href=***>和</a>就可以了。如下效果，代碼是<marquee scrollAmount=2 width=300><a href=http://theartemis.cn>中央電視臺</a></marquee>，點擊中央電視臺就可以進入 了：
中央電視臺

b)如何制作當鼠標停留在文字上，文字停止?jié)L動？
代碼如：

<marquee scrollAmount=2 width=300 onmouseover=stop() onmouseout=start()>文字內(nèi)容</marquee>

c)交替效果。代碼如：

<marquee scrollAmount=2 width=99 behavior=alternate>文字內(nèi)容</marquee>


d)多行文本向上滾動。代碼如：

<marquee scrollAmount=2 width=300 height=160 direction=up>·早晨好??！<br>·空氣好清新啊<br>·你還好嗎<p>·<a href=http://theartemis.cn>靚麗風景線</a></marquee>


圖片滾動
用<img src=相對路徑/文件名>的語句。并且要注意圖片名不要中文，要注意區(qū)分英文大小寫。

圖片做超鏈接
用<a href=>和</a>把<img>包圍，并且img必須設(shè)border=0，否則圖片會出現(xiàn)藍框。正確的例子如：& amp; lt;a href=http://www.webshu.com><img src=http://theartemis.cn/j/01.jpg border=0></a>
其中a href=表示超鏈接，這是最常用的。練習的方法也很簡單，就是平時用FP或DW做網(wǎng)頁的時候，要多查看源代碼。


多張圖片排列滾動
通常圖片和圖片之間用<br>(回行)或<p style=margin-top:9>(精確調(diào)整圖片間的距離)來鏈接。也可以把你的圖片先用表格排版，然后把這個表格的所有語句也加入到 marquee中，讓這個表格來滾動。 

代碼

<script>document.write('<marquee scrollAmount=2 width=340 height=160 direction=up onmouseover=stop() onmouseout=start()><a href=http://theartemis.cn><img src=http://theartemis.cn/j/01.jpg border=0></a></marquee>')</script>



如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答??！ 點擊進入論壇

發(fā)表評論 (587人查看，0條評論)
請自覺遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī)，嚴禁發(fā)布色情、暴力、反動的言論。
昵稱：
最新評論
------分隔線----------------------------

其它欄目

· 建站教程
· 365學習

業(yè)務咨詢

· 技術(shù)支持
· 服務時間：9:00-18:00
365建站網(wǎng)二維碼

Powered by 365建站網(wǎng) RSS地圖 HTML地圖

copyright © 2013-2024 版權(quán)所有 鄂ICP備17013400號