화면 좌측이나 우측에 항상 고정된 위치에 떠다니는 배너를 자주 사용하는대 예전방식대로 하면 화면이 작거나 배너가 화면밖으로 넘칠경우 무한정 내려가거나 하는 문제가 있었다.
http://www.funke.com.au/floating-banner-plugin-jquery
이곳에 Floating Banner Plugin for 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" xml:lang="en" lang="en">
상단에 이와같이 doctype 이 지정되어있어야 잘 동작되고 그렇지 않으면 생각만큼 잘 동작하지는 않는다.
소스는
floatingbanner-1.0.zip위 사이트의 내용을 copy 해서 넣어둔다.
Floating Banner is a jQuery plugin that simply keeps elements in the browsers viewport when a user scrolls down a web page. It is often used to keep banners in the user's view while the scrolling down long pages.
How to use the plugin?
- Download jQuery and Download Floating Banner plugin.
- Reference both the JavaScript and CSS files in the head of the web page and ensure all files are correctly referenced as follows:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.floatingbanner.min.js">
</script>
<link type="text/css" rel="stylesheet" href="floatingbanner.css"
media="screen" /> - As a chained jQuery function, you can call the
.floatingbanner()function on a jQuery element as below:
$(document).ready(function () {
$('.banner img').floatingbanner();
}
Demo
You can see a working example of the Floating Banner plugin in the sidebar.
How does it work?
For simplicity, we will refer to the selected elements as banners.
- The
floatingbanner()method initially records the y coordinate of the banner and creates placeholders for each of the banners. The placeholder is used to maintain layout and flow of the document when the banner is later floated. - As the user scrolls down the page, the plugin checks to see if the element is still in the browser view.
- When the banner is out of view, the banner is floated.
- The banner will return to its original position when the user scrolls back up the web page.
Recommended Use
- The Floating Banner plugin can be used on any structural HTML element, however it's primarily intended for use on images.
- Ensure all images have a width and height so the browser can calculate the original position correctly.
- Do not use the
positionorfloatCSS properties on the banner itself. If the banner needs to use these CSS properties, it is best to apply them to a containingdiv, as shown below:
Example HTML:
<div class="banner">
<img src="dummy.gif" alt="Dummy Image" />
</div>
<div class="banner">
<img src="dummy.gif" alt="Dummy Image" />
</div>
Example CSS Code:
.banner {float: left}
Example JS Code:
$(document).ready(function () {
$('.banner img').floatingbanner();
}
Compatibility
This plugin has been tested using jQuery 1.4.2 and the following browsers:
- Firefox 3.x
- Opera 10.x
- Safari 4.x
- Internet Explorer 6, 7 and 8
Internet Explorer 6 Support
Fixed positioning (position: fixed) is not supported by IE6, an alternate method using absolute positioning is implemented by default. If you wish to disable this disable this support, you can use the following argument:
$(document).ready(function () {
$('.banner').floatingbanner({ie6: false});
}
Terms of Use
The Floating Banner plugin for jQuery is Open Source and is free for personal and commercial use. Funke Web Solutions is not liable for any damages or loss of business incurred through the use of this software.
Download the Floating Banner Plugin
The latest version of the Floating Banner plugin for jQuery is hosted on Google Code.
'Story > Javascript' 카테고리의 다른 글
| jquery + image map 으로 지도나 이미지상에서 기능구현하기 (0) | 2012.03.23 |
|---|---|
| 즐겨찾기 , 시작페이지로 (0) | 2012.03.08 |
| 구글 api - 데이타테이블 (0) | 2011.11.15 |
| document.body.scrollHeight -> document.documentElement.scrollHeight (0) | 2011.11.15 |
| 페이지에서 파일다운시도후 플레쉬링크 클릭시 지정되지 않음 오류 나올경우 해결방법 (0) | 2011.11.15 |