RollBar插件被开发目的在于代替标准浏览器的滚动条，使其能被定制化以及完美的配合网站风格。
例子 这上面的随便点一个进去
现在简单总结一下，所需要的内容
第一步：引入必要的js，(jquery.rollbar.min.js ,jquery.js)
第二步：加入滚动层
<div id="view_screenshort" style="height:200px; width:300px;"><div class="content"> <p>phantus' major work is the Arithmetica, of which only a portion has survived.[8] Fermat's conjecture of his Last Theorem was inspired while reading a new edition of the Arithmetica,[9] which was translated into Latin and published in 1621 by Claude Bachet.[10] </p> <p> Diophantine equations have been studied for thousands of years. For example, the solutions to the quadratic Diophantine equation x2 + y2 = z2 are given by the Pythagorean triples, originally solved by the Babylonians (c. 1800 BC).[11] Solutions to linear Diophantine equations, such as 26x + 65y = 13, may be found using the Euclidean algorithm (c. 5th century BC).[12] Many Diophantine equations have a form similar to the equation of Fermat's Last Theorem from the point of view of algebra, in that they have no cross terms mixing two letters, without sharing its particular properties. For example, it is known that there are inf </p> </p> <p> In number theory, Fermat's Last Theorem states that no three positive integers a, b, and c can satisfy the equation an + bn = cn for any integer value of n greater than two. </p> <p> This theorem was first conjectured by Pierre de Fermat in 1637, famously in the margin of a copy of Arithmetica where he claimed he had a proof that was too large to fit in the margin. No successful proof was published until 1995 despite the efforts of countless mathematicians during the 358 intervening years. The unsolved problem stimulated the development of algebraic number theory in the 19th century and the proof of the modularity theorem in the 20th. It is among the most famous theorems in the history of mathematics and prior to its 1995 proof was in the Guinness Book of World Records for "most difficult math problems". Contents </p> <p> 1 Fermat's conjecture (History) 2 Mathematical context 2.1 Pythagorean triples 2.2 Diophantine equations 3 Fermat's conjecture 4 Proofs for specific exponents 5 Sophie Germain 6 Ernst Kummer and the theory of ideals 7 Mordell conjecture 8 Rational exponents 9 Computational studies </p> </div> </div>
第三步：启动特效
<script type="text/javascript">
$(document).ready(function(){
$('#view_screenshort').rollbar({zIndex:80});
});
</script>
这样就可以简单的实现滚动条
但是如果遇到中间的内容是图片，而且需要按照比例缩放
例如：中间的图片尺寸为800X480 或者480X800 ，但是显示出来，宽度最大600或者高度最大600，所以就需要等比例缩放
首先创建滚动层，不过先隐藏，后面用js显示出来，看起来有一个过渡效果。
<div id="view_screenshort" class="example" style="height:400px; width:960px;display:none;"> <div class="content"> <p><img src="1.png" width="600px" alt="example" /></p> <p><img src="2.png" width="600px" alt="example" /></p> <p><img src="3.png" width="600px" alt="example" /></p> <p><img src="4.png" width="600px" alt="example" /></p> <p><img src="5.png" width="600px" alt="example" /></p> <p><img src="6.png" width="600px" alt="example" /></p> <p><img src="7.png" width="600px" alt="example" /></p> </div> </div>js 部分
<script type="text/javascript">
$(document).ready(function(){
makeSize();
});
var times=1;
function makeSize(){
var c2=$("#view_screenshort .content").children().length;
if(c2>0){
var fimg = $("#view_screenshort .content img").eq(0);//获取到第一张图片
var i_width, i_height;
$("<img/>") // 在内存中创建一个img标记
.attr("src", $(fimg).attr("src"))
.load(function() {
//获取图片的真实高度，宽度
i_width = this.width;
i_height = this.height;
var h2=600;
var w2=600;
if(i_width>i_height){
h2=w2*i_height/i_width;
}else{
w2=h2/i_height*i_width;
}
if((h2 ==0 || w2 == 0) && times<8){
times++;
setTimeout(function(){
makeSize();
},times*500);//尝试重新加载
}else{
$("#view_screenshort").fadeIn("slow");//通过不透明度的变化来实现所有匹配元素的淡入
$("#view_screenshort .content img").css({"width":w2,"height":h2});
$("#view_screenshort").css("height",h2+30);
$("#view_screenshort .content").css("width",c2*(w2+30));
$('#view_screenshort').rollbar({zIndex:80});
}
});
}
}
</script>
下载地址：http://market.mofing.com/js/jquery.rollbar.min.js