jquery는 탐색 메뉴 마우스 프롬프트 기능을 구현합니다.
- php中世界最好的语言원래의
- 2018-04-25 10:55:281526검색
이번에는 탐색 메뉴의 마우스 프롬프트 기능을 구현하기 위한 jquery를 가져오겠습니다. 탐색 메뉴의 마우스 프롬프트 기능을 구현하기 위한 jquery용 notes는 무엇입니까? 다음은 실제 사례입니다.
이것은 일반적으로 "링크 프롬프트"로 알려진 멋진 탐색 메뉴 마우스 프롬프트 효과입니다. 탐색 메뉴의 링크 위에 마우스를 놓으면 링크가 가리키는 웹 페이지의 대략적인 내용이 표시되어 사용자에게 도달하라는 메시지를 표시합니다. 원하는 페이지.
먼저 실행 중인 효과의 스크린샷을 살펴보겠습니다.
구체적인 코드는 다음과 같습니다.
<!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>链接提示特效</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
</script>
<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.menu {
margin: 100px 0 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.menu a {
padding: 14px 10px;
display: block;
color: #000000;
width: 144px;
text-decoration: none;
font-weight: bold;
background: url(images/button.gif) no-repeat center center;
}
.menu li em {
background: url(images/hover.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}
</style>
</head>
<body>
<ul class="menu">
<li>
<a href="http://www.baidu.com">Web Designer Wall</a>
<em>A wall of design ideas, web trends, and tutorials</em>
</li>
<li>
<a href="#">Best Web Gallery</a>
<em>Featuring the best CSS and Flash web sites</em>
</li>
<li>
<a href="#">N.Design Studio</a>
<em>Blog and design portfolio of WDW designer, Nick La</em>
</li>
</ul>
</body>
</html>
더 흥미로운 정보를 보려면 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. , PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!
추천 자료:
jQuery는 양식의 텍스트 버튼에 특수 효과 모음을 구현합니다.
Jquery는 페이지를 열 때 무작위 선택 전환을 구현합니다
위 내용은 jquery는 탐색 메뉴 마우스 프롬프트 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.