아주 좋은 마우스 슬라이딩 그림 효과 Javascript CSS_image 특수 효과

내가 원하는 효과를 디자인하는 첫 번째 단계!
이전에 만들었던 사진첩 효과를 FW를 사용하여 변경하고(http://www.jb51.net/blogview.asp?logID=628) 간단한 렌더링을 디자인했습니다!

두 번째 단계는 레이아웃입니다!

코드 복사 코드는 다음과 같습니다.

• 


• 


• 


• < ;img alt="이것은 아주 좋은 마우스 슬라이딩 그림 효과 Javascript CSS_image 특수 효과" src="http://files.jb51.net/upload/20090404034546145.gif" />


• ;
  
  

이때 효과를 확인하실 수 있습니다:

<div id="imgBox"> <ul> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546382.gif" class="lazy" alt="this is 001"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546959.gif" class="lazy" alt="this is 002"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546983.gif" class="lazy" alt="this is 003"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546145.gif" class="lazy" alt="this is 004"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546693.gif" class="lazy" alt="this is 005"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546360.gif" class="lazy" alt="this is 006"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546382.gif" class="lazy" alt="this is 007"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546959.gif" class="lazy" alt="this is 008"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546983.gif" class="lazy" alt="this is 009"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546145.gif" class="lazy" alt="this is 010"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546693.gif" class="lazy" alt="this is 011"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546360.gif" class="lazy" alt="this is 012"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546382.gif" class="lazy" alt="this is 013"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546959.gif" class="lazy" alt="this is 014"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546983.gif" class="lazy" alt="this is 015"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546382.gif" class="lazy" alt="this is 001"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546959.gif" class="lazy" alt="this is 002"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546983.gif" class="lazy" alt="this is 003"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546145.gif" class="lazy" alt="this is 004"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546693.gif" class="lazy" alt="this is 005"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546360.gif" class="lazy" alt="this is 006"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546382.gif" class="lazy" alt="this is 007"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546959.gif" class="lazy" alt="this is 008"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546983.gif" class="lazy" alt="this is 009"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546145.gif" class="lazy" alt="this is 010"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546693.gif" class="lazy" alt="this is 011"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546360.gif" class="lazy" alt="this is 012"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546382.gif" class="lazy" alt="this is 013"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546959.gif" class="lazy" alt="this is 014"></a></li> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546983.gif" class="lazy" alt="this is 015"></a></li> </ul> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

3단계, Javascript 디자인

코드 복사 코드는 다음과 같습니다.

<script> <BR>ScrollImg = function(imgBoxId){ <BR>this.imgBoxId = imgBoxId; //이미지의 가장 바깥쪽 DIV ID를 가져옵니다. . createTable(); //행 1개와 열 3개로 구성된 테이블 생성<BR>this.setSpan(); //이미지 뒤의 이미지에 ALT 파일 배치<BR>this.setOnclick(); 이벤트를 클릭하고 테이블에 내용을 넣으세요 <BR>this.$(this.imgBoxId).appendChild(this.table) //모두 완료<BR>} <BR><br>ScrollImg.prototype = { <br>$ :function(objId){ <BR>return document.getElementById(objId); <BR>}, <BR>$$:function(n){ <BR>return document.createElement(n)}, <BR> createTable:function(){ <BR>var table = this.$$('table') <BR>var tr = this.$$('tr') <BR>for(var k=0; k< 3; k ) tr.appendChild(this.$$('td')); <BR>var tbody = this.$$('tbody') <BR> table.appendChild(tbody); <BR>return table; <BR>}, <BR>setSpan:function(){ <BR>varlinks=this.$(this.imgBoxId).getElementsByTagName('a'); 🎜> for(var k=0; k<links.length; k ){ <BR>varspan = this.$$('span') <BR>span.appendChild(document.createTextNode(links[k]. getElementsByTagName( 'img')[0].alt)); <BR>links[k].appendChild(span); <BR>} <BR>return; <BR>}, <BR>setOnclick:function (){ <BR>var imgArray = ['left', ,'right']; <BR>var tds = this.table.getElementsByTagName('td') <BR>for(var k=0; k<tds.length; k ) { <BR>tds[k].setAttribute('vAlign', 'center') <BR>if(k == 1){ <BR>var div = this.$$('div') <BR> var ul = this.$(this.imgBoxId).getElementsByTagName('ul')[0]; <BR>div.appendChild(ul) <BR>tds[k].appendChild(div); 계속 <BR>} <BR><BR>var img = this.$$('img') <BR>img.setAttribute('src', 'http://www.jb51.net/attachments/month_0902/ ' imgArray [k] '.gif'); <BR>img.setAttribute('alt', imgArray[k]) <BR>img.style.cursor = '포인터' <br>img.onclick; ){ <br>var imgBox = this.parentNode.parentNode.getElementsByTagName('div')[0]; <BR>var ns = imgBox.scrollLeft; <BR>var tkey = 500>if(this.alt == '왼쪽'){ <BR>var left = setInterval(function(){ <BR>imgBox.scrollLeft = imgBox.scrollLeft - (tkey * 0.1); <BR>tkey = tkey * 0.9; <BR>if( tkey &lt ; 2)clearInterval(left); <BR>},50); <BR>} else { <BR>var right = setInterval(function (){ <BR>imgBox.scrollLeft (tkey * 0.1 ); <BR>tkey * 0.9; if(tkey < 2)clearInterval(right) <BR>} <BR>return; tds[ k].appendChild(img); <BR>} <BR>return; <BR>} <BR>} <BR><BR>var test = new ScrollImg('imgBox'); 스크립트> <BR><BR><BR>이때 효과를 살펴보겠습니다! <BR><div class="htmlarea"><TEXTAREA id="runcode68144"> <!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=utf-8" /> <title>www.zishu.cn <body> <div id="imgBox"> <ul> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546382.gif" class="lazy" alt="this is 001" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546959.gif" class="lazy" alt="this is 002" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546983.gif" class="lazy" alt="this is 003" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546145.gif" class="lazy" alt="this is 004" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546693.gif" class="lazy" alt="this is 005" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546360.gif" class="lazy" alt="this is 006" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546382.gif" class="lazy" alt="this is 007" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546959.gif" class="lazy" alt="this is 008" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546983.gif" class="lazy" alt="this is 009" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546145.gif" class="lazy" alt="this is 010" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546693.gif" class="lazy" alt="this is 011" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546360.gif" class="lazy" alt="this is 012" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546382.gif" class="lazy" alt="this is 013" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546959.gif" class="lazy" alt="this is 014" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546983.gif" class="lazy" alt="this is 015" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546382.gif" class="lazy" alt="this is 001" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546959.gif" class="lazy" alt="this is 002" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546983.gif" class="lazy" alt="this is 003" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546145.gif" class="lazy" alt="this is 004" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546693.gif" class="lazy" alt="this is 005" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546360.gif" class="lazy" alt="this is 006" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546382.gif" class="lazy" alt="this is 007" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546959.gif" class="lazy" alt="this is 008" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546983.gif" class="lazy" alt="this is 009" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546145.gif" class="lazy" alt="this is 010" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546693.gif" class="lazy" alt="this is 011" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546360.gif" class="lazy" alt="this is 012" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546382.gif" class="lazy" alt="this is 013" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546959.gif" class="lazy" alt="this is 014" /> <li><a href="http://www.jb51.net"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/20090404034546983.gif" class="lazy" alt="this is 015" /> </script>