집 > 기사 > 웹 프론트엔드 > jQuery는 Microsoft 홈페이지에서 마우스 변경을 모방하는 슬라이딩 창 효과를 구현합니다_jquery

jQuery는 Microsoft 홈페이지에서 마우스 변경을 모방하는 슬라이딩 창 효과를 구현합니다_jquery

WBOY원래의: 2016-05-16 15:37:231236검색

이 기사의 예에서는 Microsoft 홈페이지를 모방하고 마우스 변경을 감지하는 슬라이딩 창 효과의 jQuery 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

마이크로소프트 홈페이지를 흉내내고 마우스 변화를 감지하는 jQuery 슬라이딩 창입니다. 마우스를 놓으면 창이 왼쪽으로 늘어나 마우스를 떼면 원래 상태로 돌아옵니다. Microsoft 웹사이트. 코드를 살펴본 후에는 코드를 쉽게 제거할 수 있으며 감히 혼자만 보관할 수 없습니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/jquery-f-microsoft-web-nav-demo/

구체적인 코드는 다음과 같습니다.

<!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>
<title>jQuery仿微软首页感应鼠标变化的滑动窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.box{width:100px;height:100px;position:absolute;right:0;color:#fff;}
.box1{top:100px;background:#000;}
.box2{top:250px;background:#333;}
.box3{top:400px;background:#666;}
.box4{top:550px;background:#999;}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
</head>
<body>
<div class="box box1">应用</div>
<div class="box box2">下载</div>
<div class="box box3">Windows Phone</div>
<div class="box box4">Office</div>
<script type="text/javascript">
$('.box').each(function(){
 $(this).hover(function(){
  $(this).stop().animate({width:'150'},1000);
 },function(){
  $(this).stop().animate({width:'100'},1000);
 });
});
</script>
</body>
</html>

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.

성명：

이전 기사：JS는 하늘색 간단한 세로 탭 클릭 전환 효과를 구현합니다_javascript 기술다음 기사：JS는 하늘색 간단한 세로 탭 클릭 전환 효과를 구현합니다_javascript 기술

jQuery는 Microsoft 홈페이지에서 마우스 변경을 모방하는 슬라이딩 창 효과를 구현합니다_jquery

관련 기사