Javascript는 동적 사이드바 code_javascript 기술을 구현합니다.
- WBOY원래의
- 2016-05-16 16:59:191729검색
일반적으로 마우스오버 시 마우스 호버, 마우스아웃 시 마우스 제거를 2회 사용하면 완료됩니다.
먼저 HTML 구조입니다
코드 복사 코드는 다음과 같습니다.
< div id= "div1">
사이드바
그런 다음 CSS 스타일:
코드 복사 코드는 다음과 같습니다.
#div1{
너비:150px ;
높이:200px;
배경:#999999;
위치:절대;
왼쪽:-150px;}
범위{
너비:20px;
높이:70px ;
줄 높이:23px;
배경:#09C;
위치:절대;
오른쪽:-20px;
상단:70px;}
그림과 같이 기본 스타일 사이드바가 숨겨져 있습니다.
마우스를 안으로 넣으면 다음과 같습니다.
전체 코드는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
< ;script>
window.onload=function(){
var odiv=document.getElementById('div1');
odiv.onmouseover=function()
{
startmove (0,10);//첫 번째 매개변수는 div의 왼쪽 속성의 대상 값입니다. 두 번째 매개변수는 매번 이동할 픽셀 수입니다.
}
odiv.onmouseout= function ()
{
startmove(-150,-10);
}
}
var 타이머=null;
function startmove(target,speed)
{
var odiv=document.getElementById('div1');
clearInterval(timer);
타이머=setInterval(function (){
if(odiv.offsetLeft ==target)
{
clearInterval(timer);
}
else
odiv.style.left=odiv.offsetLeft 속도 'px';
}
)
}
사이드바
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.