Привет, ребята, я написал плагин jQuery для отображения связанных веб-страниц. Когда пользователь веб-сайта прокручивает страницу вниз, соответствующие веб-страницы выдвигаются в правом нижнем углу экрана. Когда они прокручивают страницу вверх, она исчезает! 😉 Потрясающие.
Официальная страница плагина jQuery
Название плагина: jsliderelatedpages
Автор: jQuery4u
Авторы: Сэм Диринг
Версия: 1.0
Дата выхода: 10/03/2011
Теги: jSlide связанные, связанные страницы, похожие страницы, связанный плагин
Описание: Показывает связанные веб-страницы в анимации скользящего слайдера.
использование
<script type="text/javascript"> $().ready(function() { $('#jsrp_related').jsliderelatedposts(); </script> Или вы можете указать параметры:
<script type="text/javascript"> $().ready(function() { $('#jsrp_related').jsliderelatedposts({ speed: 1000, scrolltrigger: 0.75, smartwidth: true }); }); </script>
Параметры:
- Скорость — [1-5] — Выберите скорость анимации (по умолчанию: 1 секунда). 5 секунд — довольно медленный слайд!
- Триггер прокрутки — [55-100%] — Выберите% прокручиваемой страницы, прежде чем она появится (по умолчанию: 75%) 1,0 (заставляет ее придерживаться до тех пор, пока не будет нажата кнопка закрытия).
- Ширина — [true / false] — Использовать Smart Width или Full Width (соответствует ширине экрана)
Код JQuery
// Anonymous function to wrap around your function to avoid conflict (function($){ //Attach this new method to jQuery $.fn.extend({ //The function - pass the options variable to the function jsliderelatedposts: function(options) { //Set the default values, use comma to separate the settings var defaults = { speed: 1000, scrolltrigger: 0.75, smartwidth: true } var options = $.extend(defaults, options); return this.each(function() { var o = options; var animatesliderdiv = $(this); var jslide_width = animatesliderdiv.width(); //IE fixes (div width issues) if ( $.browser.msie ) { if (o.smartwidth) { //smart width jslide_width = jslide_width * 0.58; //0.53 //0.422 } else { //full width jslide_width = $(window).width(); } animatesliderdiv.css({position: "absolute", width: jslide_width, right: "-"+jslide_width}); animatesliderdiv.addClass('fixie'); } else { if (!o.smartwidth) { //full width for browsers other than IE jslide_width = $(window).width(); } animatesliderdiv.css({position: "fixed", width: jslide_width, right: "-"+jslide_width}); } var webpage = $("body"); var webpage_height = webpage.height(); //show the window after % of the web page is scrolled. var trigger_height = webpage_height * o.scrolltrigger; //function to catch the user scroll var is_animating = false; var is_visible = false; $(window).scroll(function(){ //dont stop the animation in action if (!is_animating) { if (!is_visible) { //reaching the bottom of page trigger if ($(window).scrollTop() > (webpage_height-trigger_height)) { showjsrp_related(); } }else { //reaching top of page trigger if ($(window).scrollTop() < (webpage_height-trigger_height)) { hidejsrp_related(); } } } }); function ishorizonalscrollpresent() { if (document.documentElement.scrollWidth === document.documentElement.clientWidth) { //There is no hoz scrollbar return false; } else { return false; } } function showjsrp_related() { is_animating = true; animatesliderdiv.show(); //show the window // if hoz scroll is not present, hide x scroll if (ishorizonalscrollpresent() == false) { $('body').addClass('hidexscroll'); } animatesliderdiv.animate({ right: '+='+jslide_width, opacity: 1 }, o.speed, function() { // Animation complete. is_animating = false; is_visible = true; }); } function hidejsrp_related() { $('body').addClass('hidexscroll'); // hide x scroll is_animating = true; animatesliderdiv.animate({ right: '-='+jslide_width, opacity: 0 }, o.speed, function() { // Animation complete. animatesliderdiv.hide(); is_animating = false; is_visible = false; }); } $("#jsrp_related-close").click(function(){ hidejsrp_related(); }); }); } }); })(jQuery);
HTML-код
<div id="jsrp_related"> <!-- use custom close button if you wish --> <a id="jsrp_related-close" href="#"><img id="close_btn" src="close_button.gif" alt="Close" /></a> <h3>Related Posts:</h3> <ul> <li><a rel="bookmark" href="urltowebpage"><img class="jsrp_thumb" title="imagetitle" src="urltowebpageimage" border="0" alt="imagealt" width="50" height="50" /></a> <a class="jsrp_title" rel="bookmark" href="webpageurl">Web Page Title</a></li> <!-- page link 2 --> <!-- page link 3 etc --> <!-- add more pages in list format --> </ul> </div>
Код CSS
#jsrp_related { display:none; /*position:fixed;*/ background-color:#A7BFF2; border:2px solid #779CED; bottom:0; right:0; /* left:0; */ z-index: 10000; /*width:auto; set width of bar to width of entire window*/ -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; border-top-left-radius:10px; } #jsrp_related h3 { margin:0; padding:5px 5px 5px 10px; font-size:20px; font-weight:bold; color:#F5F4F0; text-shadow: #6374AB 2px 2px 2px; } #jsrp_related ul { margin:0; padding:0; } #jsrp_related ul li { float:left; padding:10px; background-color:white; list-style:none; vertical-align:middle; min-height:50px; border:thin solid #E6E6E6; } #jsrp_related ul li:hover { background-color:#E6E6E6; } #jsrp_related ul li a img { vertical-align:middle; } #jsrp_related-close { float:right; } #close_btn { border:0; text-decoration:none; } .hidexscroll { overflow-x:hidden; } .showxscroll { overflow-y:auto; } /*IE FIX*/ .fixie { left: expression( ( - jsrp_related.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' ); top: expression( ( - jsrp_related.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ); }-#jsrp_related { display:none; /*position:fixed;*/ background-color:#A7BFF2; border:2px solid #779CED; bottom:0; right:0; /* left:0; */ z-index: 10000; /*width:auto; set width of bar to width of entire window*/ -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; border-top-left-radius:10px; } #jsrp_related h3 { margin:0; padding:5px 5px 5px 10px; font-size:20px; font-weight:bold; color:#F5F4F0; text-shadow: #6374AB 2px 2px 2px; } #jsrp_related ul { margin:0; padding:0; } #jsrp_related ul li { float:left; padding:10px; background-color:white; list-style:none; vertical-align:middle; min-height:50px; border:thin solid #E6E6E6; } #jsrp_related ul li:hover { background-color:#E6E6E6; } #jsrp_related ul li a img { vertical-align:middle; } #jsrp_related-close { float:right; } #close_btn { border:0; text-decoration:none; } .hidexscroll { overflow-x:hidden; } .showxscroll { overflow-y:auto; } /*IE FIX*/ .fixie { left: expression( ( - jsrp_related.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' ); top: expression( ( - jsrp_related.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ); }
Технические вещи
IE7 или меньше не нравится свойство CSS — position: fixed, поэтому я кодировал его, чтобы вместо него использовать position: absolute.
Это означает, что некоторые старые версии IE не будут отображать гладкую анимацию (она все еще работает как обычно и показывает сообщения!).