js讓長圖變成動畫效果

㈠ js實現圖片自動的滾動效果

把你的代碼放在「內容」中間就可以了 寬度600px，你自己可以改寬度
<DIV id=demoleft style="OVERFLOW: hidden; WIDTH:600px;">
<TABLE border="0" align="left" cellPadding="0" cellSpacing="0" cellspace="0">
<TBODY>
<TR>
<TD width="600" align=middle vAlign=top id=demo1left>
<!--內容-->
<table width="600" height="120" border="0" cellpadding="0" cellspacing="0">
<tr>
<%
set rs=server.CreateObject("adodb.recordset")
rs.open "select top 8 * from cp_aboutus where userid="&hid&" order by updatetime desc,articleid desc ",conn,1,1
if not rs.eof then
dim hang
hang = 0
do while not rs.eof
hang = hang + 1
%>
<td>
<table width="110" height="115" border="0" align="center" cellpadding="0" cellspacing="0" id="table12">
<tr>
<td width="110" height="87"><%if rs("headpic")<>"" then%><a href="huicpshow.asp?hid=<%=hid%>&id=<%=rs("articleid")%>" title="<%=rs("title")%>" target="_blank"><img src="<%=rs("headpic")%>" width="110" height="87" border="0" /></a><%else response.Write "<table width=110 height=87 border=0 cellpadding=0 cellspacing=0><tr><td height=23 bgcolor=#EBEBEB align=center>暫無圖片</td></tr></table>" end if%></td>
</tr>

<tr>
<td align="center"><a href="huicpshow.asp?hid=<%=hid%>&id=<%=rs("articleid")%>" title="<%=rs("title")%>" target="_blank"><%=rs("title")%></a></td>
</tr>
</table>
</td>
<%
rs.movenext
loop
end if
rs.close
set rs=nothing
%>
</tr>
</table>

<!--end 內容-->
</TD>
<TD width="102" vAlign=top id=demo2left></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<SCRIPT>
var speed=18//速度數值越大速度越慢,demo2.offsetWidth=demo1.offsetWidth=固定值
var demoleft = document.getElementById("demoleft");
var demo2left = document.getElementById("demo2left");
var demo1left = document.getElementById("demo1left");
demo2left.innerHTML=demo1left.innerHTML
function Marquee(){
if(demo2left.offsetWidth-demoleft.scrollLeft<=0)//其實demo.scrollLeft是有 最大值的，和demo0.width,引用的圖片的width有關系。demo過了一半（每半內容一樣的），重新開始循環
demoleft.scrollLeft-=demo1left.offsetWidth
else{
demoleft.scrollLeft++//不斷的增加，相當於父容器的滾動條不斷是縮小；但由於OVERFLOW: hidden; （滾動條不可見）
}
}
var MyMarleft=setInterval(Marquee,speed)
demoleft.onmouseover=function() {clearInterval(MyMarleft)}
demoleft.onmouseout=function() {MyMarleft=setInterval(Marquee,speed)}
</SCRIPT>

㈡ jquery.fullpage.min.js 這個全屏滾動插件，怎麼讓頁面初始化也就是第一頁就有動畫效果

把第一頁的 <li data-menuanchor="page1" class="active"> 裡面的class="active" 去掉 默認一開始就不顯示第一個了
如果第一頁不顯示了，在頁面初始化的內地方 給它加容上active這個class屬性 就能實現初始化第一頁就有動畫效果了

afterRender以你的代碼給你舉個例子

$.fn.fullpage({

slidesColor: ['#fff', '#fff', '#fff', '#fff', '#fff'],

anchors: ['page1', 'page2', 'page3', 'page4', 'page5'],

menu: '#menu',
afterRender: function(){
alert('ok');
}
});

純手打，有問題歡迎咨詢

給你一個參考地址：
http://www.dowebok.com/78.html

㈢ js實現圖片滾動效果

<SCRIPT language="JavaScript">
var speed=50; //設置滾動速度
demo2.innerHTML=demo1.innerHTML //復制dome1為dome2
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0) //當滾動至dome1與dome2交界時
demo.scrollTop-=demo1.offsetHeight //dome跳到最頂端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed) //設置定時器
demo.onmouseover=function() {clearInterval(MyMar)}//滑鼠移上時清除定時器達到滾動停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//滑鼠移開時重設定時器，繼續滾動
</SCRIPT>

<div id="demo" style="overflow: hidden; height: 600; width: 180; background: #214984; color: #ffffff">
<div id="demo1" align="center">
<!-- 定義圖片 -->
</div>
<div id="demo2" align="center"></div>
</div>

㈣ 求js一組圖片圍繞一個長方形的圖片循環滾動

這里有一個無縫滾動效果方向可以自己設置可以設置定高定寬停頓你把文字改成圖片就行裡面有源碼可以參考參考資料：/=12229

㈤ JavaScript單擊圖片,圖片以動畫形式放大為原來的1.5倍,動畫時間為3秒怎麼做

1、點擊JavaScript圖片。
2、通過點擊之中換成img的src屬性。
3、換成屬性之後，將圖片設置成動畫形式放大原來的1.5倍。
4、在設置中找到動畫時間，將動畫時間設為3秒即可。

㈥ js製作滑鼠移動到圖片上的動畫

//html
onmouseover=mouseOver()換成onmouseover=mouseOver(this)
onmouseout=mouseOut()換成onmouseout=mouseOut(this)
//js更改透明度即可，不需要換圖片
functionmouseOver(obj){
obj.style.opacity=0.5;
}
functionmouseOut(obj){
obj.style.opacity=1;
}

㈦ 如何用Paper.js製作網頁動畫

這里介紹一種簡單的編譯達到同樣的強大效果的動畫製作：

計算機喜歡干凈簡潔。不管是報表，統計，或者函數曲線，他們總是使用簡潔明了的線條；而現實是，所有物理世界的物體是混沌的。樹葉離開枝丫，水珠四濺 ，花朵迎風搖曳 － 所有這些物理世界的互動感覺簡單，因為我們已經習慣這些。但是實際上哪怕是那一霎那的風，都是混沌的，她的演算法非常復雜。這篇文章裡面，我們要製作蒲公英種子微風舞動的動畫。

(Image: Arnoldius)

動畫製作的蒲公英沒有辦法模擬物理的復雜性，實際上她看上去更加自然如果我們不試圖去模擬。我們將要製作一朵給你同樣感覺的花朵但是省略了很多細節。

Paper.js

使用 canvas 標簽 製作簡單圖形. 創建你的canvas:（寬：300，高：300）

1
2
<canvas id="canvas" width="300" height="300"></canvas>
//加入JavaScript:
1
2
//定義二維動畫
var canvas = $('#canvas')[0].getContext("2d");
1
2
3
4
5
6
7
8
9
// 05－06：圓心x＝100，圓心y＝100, 半徑＝15，初始角度＝0，結束＝360。,反時針。
canvas.beginPath();
canvas.arc(100, 100, 15, 0, Math.PI*2, true);

// 結束
canvas.closePath();

// 填色
canvas.fill();
掌握canvas的基本就很容易做這些，但是如果你要製作更加復雜的東西，你需要高級編譯語言像Paper.js

Paper.js 是一個 JavaScript庫用來製作繪圖和動畫， 一種Adobe Illustrator使用的基於Scriptographer的腳本語言 . 它自稱是「矢量圖腳本語言中的瑞士軍刀」（ 「The Swiss Army Knife of Vector Graphics Scripting,」 ），其中重點突出矢量。

圖形製作中有兩種：矢量圖和柵格圖。柵格圖就像你照相機拍出來的圖片，如果你放大看，就是顏色填充的方格。矢量圖是有點連線組成的。他們是不同的線條租和形狀組，根據不同的指令繪圖。如果用矢量圖，如圖，這個Z放大後還是線條光滑，色澤飽滿。相比較，左邊的柵格圖就很模糊了。