鼠标划过不同的题目会有不同的图片和解说,可以连接到不同的网站,
分享一下我的代码:
> 웹 프론트엔드 > JS 튜토리얼 > js_javascript 기술로 구현된 전환 패널의 예제 코드

js_javascript 기술로 구현된 전환 패널의 예제 코드

WBOY
풀어 주다: 2016-05-16 17:32:02
원래의
1070명이 탐색했습니다.

최근에 Miaowei Classroom의 js 영상을 보고 조금 지식을 얻었는데 여기에 요약해보겠습니다. 이제 막 배우기 시작했는데 최적화하는 방법을 모르겠습니다. 조언을 해주시면 됩니다. 하하, 다시 한 번 감사드립니다. 하지만
효과는 다음과 같습니다:
js_javascript 기술로 구현된 전환 패널의 예제 코드
다른 질문에 마우스를 올리면 다른 그림과 설명이 나타납니다.
내 코드 공유 :

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



제목 없는 문서
"text/javascript">
window.onload= function(){
var obj=document.getElementById('menu').getElementsByTagName('li');/*다음을 사용하여 컨테이너의 모든 li 요소를 가져옵니다. id 메뉴*/
var con=document.getElementById ('content').getElementsByTagName('img')[0];/*content에 나타나는 첫 번째 img 객체 가져오기*/
var hreff=document. getElementById('content').getElementsByTagName('a' )[0];
var hrefLink=new Array('http://www.baidu.com','http://weibo.com/2622932383/profile ?topnav=1&wvr=5','http:/ /www.taobao.com','http://google.com.hk')/*연결된 모든 배열 저장*/
varwords=new Array(' 내 작은 고장난 차', '잡초가 무성한 것은 희망이다', '꼬마 친구들이 찾고 있다', '쇠줄이 먼 곳으로 이어진다');/*각 사진의 해설이 배열에 저장됩니다*/
var pContent=document.getElementById('content').getElementsByTagName('p')[0];/*설명을 저장하는 p 요소 가져오기*/
var i=0>for(i=0 ;i{
obj[i].index=i
obj[i].onmouseover=function(){
con.src='images/photo ' (this.index 1) '.jpg';
pContent.innerHTML=words[this.index];
hreff.href=hrefLink[this.index]; >}



;

내 작은 고장난 자동차








관련 라벨:
js
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿