[jQuery] - jSrcollable

jquery.jsrcollable.js

/*********************************************************************
 *
 * Function Name : jQuery.fn.jSrcollable
 *
 * Description :
 *     
 *
 * Parameters :
 *     wrapper[string] : jQuery的容器选择器
 *     edge[int] : 留出的空白边距
 *
 * Demo :
 *     <div id="wrapper" style="width:200px; height:200px; border:solid 1px #000;">
 *       <div style="width:500px; height:500px; border:solid 5px #36C;"></div>
 *     </div>
 * 
 *     <script type= "text/javascript">
 *       jQuery(document).ready(function(jQuery){
 *           jQuery.fn.jSrcollable("#wrapper", 5);
 *       });
 *     </script>
 *
 *********************************************************************/
//jQuery.noConflict();

var jSrcollable = {
    move: function(wrapper, edge) {
        var wrapper = jQuery(wrapper);
        wrapper.css({overflow: 'hidden'});
        
        // 获取最宽对象
        var maxWidth = wrapper.width();
        wrapper.children().each(function(){
            if(maxWidth < jQuery(this).outerWidth(true)) maxWidth = jQuery(this).outerWidth(true);
        });
        
        // 在wrapper与innerHTML之间添加一个div
        var inner = jQuery('<div/>').css({width: maxWidth + 'px', padding: edge + 'px', overflow: 'hidden'});
        inner.append(wrapper.html());
        wrapper.html(inner);
        
        wrapper.mousemove(function(e) {
            var left = (e.pageX) * (inner.outerWidth(true) - wrapper.width()) / wrapper.width();
            var top = (e.pageY) * (inner.outerHeight(true) - wrapper.height()) / wrapper.height();
            left += ((e.pageX > wrapper.width() / 2) ? 1 : -1) * wrapper.width() * 0.3;
            top += ((e.pageY > wrapper.height() / 2) ? 1 : -1) * wrapper.height() * 0.3;
            wrapper.scrollLeft(left);
            wrapper.scrollTop(top);
        });
    }
}

jQuery.fn.jSrcollable = function(wrapper, edge){
    if(edge == undefined || edge == null) edge = 5;
    jSrcollable.move(wrapper, edge);
}

 

Demo:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.jsrcollable.js" type="text/javascript"></script>
</head>

<body>
<div id="wrapper" style="width:200px; height:200px; border:solid 1px #000;">
  <div style="width:500px; height:500px; border:solid 5px #36C;">
    在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标<br/>
    在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标<br/>
    在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标<br/>
    在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标<br/>
    在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标<br/>
    在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标<br/>
    在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标<br/>
    在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标<br/>
    在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标<br/>
    在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标在这里移动鼠标
  </div>
</div>
<script type= "text/javascript">
jQuery(document).ready(function(jQuery){
    jQuery.fn.jSrcollable("#wrapper", 5);
});
</script>
</body>
</html>


谁知道这个效果叫什么名称?不知道关键字在百度,谷歌里不知道怎样搜索,最后只能是自己写T_T

posted @ 2012-02-28 14:59  炎峰森林影  阅读(196)  评论(0)  编辑  收藏  举报