快捷導(dǎo)航

JS旋轉(zhuǎn)圖片陣類

更新時(shí)間：2008年09月28日 14:29:03 作者：

非常漂亮的旋轉(zhuǎn)圖片陳效果代碼，已封裝成類，方便調(diào)用

<!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>JS旋轉(zhuǎn)圖片陣效果 brought to you by 斬夢(mèng)人.天天 qq:22062019</title> <style type="text/css"> body{background:black;color:white;font-family: Arial, Helvetica, sans-serif;font-size:16px;line-height:29px} span{border:1px solid gray;background:#333;padding:4px;font-weight:bold;} </style></head> <body> <span>使用方法</span>: 首先定義一個(gè)imgRound類: <span>var rt = new imgRound("imgContainer", 120, 90, 500, 220, 230, 0.01)</span> 然后使用定時(shí)函數(shù)調(diào)用imgRound實(shí)例的roundMove方法: <span>setInterval(function(){rt.roundMove()}, 20)</span>  <div   class="ublnpf9mb"   id="imgContainer" style="width:600px;height:300px;border:1px solid red"> <img src="http://www.lululu520.cn/blueidea/images/s1.jpg"/> <img src="http://www.lululu520.cn/blueidea/images/s2.jpg"/> <img src="http://www.lululu520.cn/blueidea/images/s3.jpg"/> <img src="http://www.lululu520.cn/blueidea/images/s4.jpg" link="http://www.baidu.com" target="_blank"/> <img src="http://www.lululu520.cn/blueidea/images/s5.jpg" link="http://www.google.com"/> <img src="http://www.lululu520.cn/blueidea/images/s1.jpg"/> <img src="http://www.lululu520.cn/blueidea/images/s2.jpg"/> <img src="http://www.lululu520.cn/blueidea/images/s3.jpg"/> </div> 參數(shù)說明: initRound(id,w,h,x,y,r,dv,rh,ah); id: 容器ID w: 圖片寬度 h: 圖片高度 x: 圓心水平位置 y: 圓心垂直位置 r: 圓圈半徑 dv: 旋轉(zhuǎn)速度 rh: 垂直距離 (可選,默認(rèn)為10) ah: 旋轉(zhuǎn)方向 (可選,1:順時(shí)針,2:逆時(shí)針,默認(rèn)為1) <body></html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: