jQuery 부동 광고 구현 코드

3756 단어 jQuery유동 광고
실현 방법:

<!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> </title>
<style type="text/css">
#qqonline{
background-color:red;
border: 1px solid #fcc;
position:absolute;
top:100px;
left:16px;
width:100px;
height:120px;
}
#qqonline1{
background-color:red;
border: 1px solid #fcc;
position:absolute;
top:100px;
right:16px;
width:100px;
height:120px;
}
</style>
<script src="../js/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
$(this).scroll(function() { // scroll
var bodyTop = 0;
if (typeof window.pageYOffset != 'undefined') {
bodyTop = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
{
bodyTop = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
bodyTop = document.body.scrollTop;
}
$("#qqonline").css("top", 100 + bodyTop) // CSS top , , “ ”
$("#qqonline").text(bodyTop); // , scrollTop
$("#qqonline1").css("top", 100 + bodyTop)
$("#qqonline1").text(bodyTop);
});
</script>
</head>
<body style="height:1800px"><!-- BODY , -->
<form id="form1" runat="server">
</form>
<div id="qqonline">
QQ
</div>
<div id="qqonline1">
QQfsdf
</div>
</body>
</html>
jquery 의 유동 광고 제어 코드 를 바탕 으로 최근 에 jquery 와 접촉 하여 피상 적 인 것 을 배 웠 습 니 다.boss 의 수 요 를 만족 시 키 기 위해 상대 적 으로 화면 이 정지 되 어 있 는 부동 층 을 만 들 었 습 니 다.코드 를 여기에 기록 하여 나중에 jquery 코드 를 사용 하지 않도록 jquery 라 이브 러 리 의 지원 이 있어 야 실 행 될 수 있 습 니 다.제 가 글 을 쓸 때 jquery 버 전 은 1.3.2 입 니 다.다른 버 전이 완벽 하 게 실 행 될 수 있 는 지 는 보장 되 지 않 습 니 다.코드 의 기본 원 리 는 주석 에 적 혀 있 습 니 다.만약 당신 이 알 아 보지 못 한다 면,자 바스 크 립 트 와 jquery 의 기본 지식 을 보충 해 야 합 니 다.너무 많이 쓰 지 않 아 도 됩 니 다.왜냐하면 제 가 이 걸 쓸 때 아무것도...$(document).ready(function(){$(window).scroll(function(){/이 함 수 는 브 라 우 저 스크롤 바 를 감시 할 수 있 습 니 다.스크롤 바 만 움 직 이면,이 함 수 는 var diffY=$(window).scrollTop();/페이지 의 현재 위치 와 스크롤 바 상단 의 거리[scrollTop()]var diffH=$(window).height()/4;/디자이너 가 원 하 는 플 로 팅 표시 줄 과 브 라 우 저 상단 의 거리[height()]입 니 다.브 라 우 저 상단 과 1/4 페이지 의 높이 를 유지 합 니 다.diffH 의 값 이 0 으로 설정 되면 플 로 팅 표시 줄 은 화면 상단 var percent=diffY+diffH 에 떨 어 집 니 다./percent 는 css 의"top"속성 에 값 을 부여 합 니 다.변동 표시 줄 의 새로운 높이 값 if(percent<0){//percent 의 값 이 0 보다 작 는 지,0 보다 작 으 면 맞 추고 0 보다 크 면 소수 부분 percent=Math.ceil(percent)을 무시 합 니 다.}else{ percent=Math.floor(percent); //var v=percent+"px";/css 의 속성 은 단위 가 필요 합 니 다.여 기 는 px$("\#adright").css("top",v);/percent 는 top 속성 에 값 을 부여 합 니 다.브 라 우 저 는 이 값 에 따라 유동 표시 줄 의 높이 를 동적 으로 조정 합 니 다.위 에서 준 코드 에 따라 이 높이 는 유동 표시 줄 을 화면 중앙 에 계속 유지 합 니 다});////////////////////////////////////////////////////////////JS 와 HTML 의 분할 선//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////위치 만 있 으 면 되 고,페이지 왼쪽 에 떠 있 으 려 면 right:25px;왼쪽:25px 로 변경;

좋은 웹페이지 즐겨찾기