大家好,我写了一个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>
<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的某些旧版本将不会显示光滑的动画(它仍然可以正常工作并显示帖子!)。