jquery登录页面插件_jSlide相关页面– jQuery插件

jquery登录页面插件

大家好，我写了一个jQuery插件来显示相关的网页。 当网站用户向下滚动页面时，相关的网页将从屏幕右下角滑出。 当他们向上滚动页面时，它消失了！ ;）太棒了。

官方jQuery插件页面

插件名称： jsliderelatedpages
作者： jQuery4u
投稿人： Sam Deering
版本： 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（使其停留在底部，直到单击关闭按钮）。
• 宽度 – [是/否] –使用智能宽度或全角（适合屏幕宽度）

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' );
}

技术资料

IE7或以下版本不喜欢CSS属性– position：fixed，因此我已将其编码为使用position：absolute。
这意味着IE的某些旧版本将不会显示光滑的动画（它仍然可以正常工作并显示帖子！）。

翻译自: https://www.sitepoint.com/jsliderelatedpages/

jquery登录页面插件