jquery使用div实现滚动条效果
2011-10-17 17:01
721 查看
查了些div实现滚动条的效果,看了很多,大多都不符合要求。
要求如下:
1.div大小固定,div中内容大小不固定
2.鼠标移动到内容上时,如果内容太大,则出现滚动条,并可以拖动查看,而内容宽度不变。否则不显示滚动条。
如果纯粹的使用div的overflow-y:scroll,那么内容的宽度会变小。
废话不多说,直接上代码。
文章中导入jquery-1.4.1.min.js
js代码如下:
Js代码代码
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
var check = false;//是否可移动
$(document).ready(function(){
var h = $("#scrollContent").height();
var ih = $("#divcontent").height();
var mh = parseInt(h*h/ih);
var h1 = parseInt($("#ypThumbContainer").height())-mh;//图片与div的高度差值
var h2 = parseInt(ih - h);//内容与边框div的高度差值
$("#scrollContent").hover(function(){
if(ih > h){
$("#ypThumbContainer").show("slow");
$("#ypThumb").find("img").height(mh);
$("#ypThumb").show("slow");
//begin
var oDiv = document.getElementById("ypThumbContainer");
var oDiv2 = document.getElementById("ypThumb");
var mouseStart={};
var divStart={};
var rightStart={};
var bottomStart={};
$(oDiv2).mousedown(function(ev){
var oEvent = ev||event;
mouseStart.x = oEvent.clientX;
mouseStart.y = oEvent.clientY;
divStart.x = parseInt($(oDiv2).css("left"));
divStart.y = parseInt($(oDiv2).css("top"));
if(oDiv2.setCapture){
oDiv2.setCapture();
oDiv2.onmousemove = doDrag3;
oDiv2.onmouseup = stopDrag3;
}else{
$(oDiv).bind("mousemove",doDrag3).bind("mouseup",stopDrag3);
}
oEvent.preventDefault();
});
function doDrag3(ev) {
var oEvent = ev||event;
var t = oEvent.clientY-mouseStart.y+divStart.y;
if(t < 0){
t = 0;
}else if(t >= $(oDiv).height()-$(oDiv2).height()){
t = $(oDiv).height()-$(oDiv2).height();
}
$(oDiv2).css("top",t+"px");
$("#divcontent").css("top",-(t*h2/h1)+"px");
}
function stopDrag3(){
if(oDiv2.releaseCapture){
oDiv2.releaseCapture();
oDiv2.onmousemove = null;
oDiv2.onmouseup = null;
}else{
$(oDiv).unbind("mousemove",doDrag3).unbind("mouseup",stopDrag3);
}
}
//end
}
},function(){
$("#ypThumbContainer").hide("slow");
$("#ypThumb").hide("slow");
});
});
</script>
html代码如下:
Html代码代码
<div style="width:150px;overflow:hidden;height:170px;border:1px #000 solid;z-index:1; position:relative;" id="scrollContent">
<div class="thumbContainer" id="ypThumbContainer" style="Z-INDEX: 3; right:0px; WIDTH: 9px; POSITION: absolute; TOP: 0px; HEIGHT: 170px;border:1px #000 solid; display:none">
<div class="thumb" id="ypThumb" style="POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #ffd200;">
<img class="thumbImg" id="ypThumbImg" height="50" src="images/thumb.gif" width="9" style="cursor:pointer;"/><br />
</div>
</div>
<div id="divcontent" style="position:absolute;">
中新网8月12日电 据最高人民法院网站消息,最高人民法院新闻发言人孙军工今日介绍,新婚姻法首次明确离婚案件中一方婚前贷款购买的不动产应归产权登记方所有,但应对参与还贷的配偶给予公平合理的补偿。
</div>
</div>
要求如下:
1.div大小固定,div中内容大小不固定
2.鼠标移动到内容上时,如果内容太大,则出现滚动条,并可以拖动查看,而内容宽度不变。否则不显示滚动条。
如果纯粹的使用div的overflow-y:scroll,那么内容的宽度会变小。
废话不多说,直接上代码。
文章中导入jquery-1.4.1.min.js
js代码如下:
Js代码代码
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
var check = false;//是否可移动
$(document).ready(function(){
var h = $("#scrollContent").height();
var ih = $("#divcontent").height();
var mh = parseInt(h*h/ih);
var h1 = parseInt($("#ypThumbContainer").height())-mh;//图片与div的高度差值
var h2 = parseInt(ih - h);//内容与边框div的高度差值
$("#scrollContent").hover(function(){
if(ih > h){
$("#ypThumbContainer").show("slow");
$("#ypThumb").find("img").height(mh);
$("#ypThumb").show("slow");
//begin
var oDiv = document.getElementById("ypThumbContainer");
var oDiv2 = document.getElementById("ypThumb");
var mouseStart={};
var divStart={};
var rightStart={};
var bottomStart={};
$(oDiv2).mousedown(function(ev){
var oEvent = ev||event;
mouseStart.x = oEvent.clientX;
mouseStart.y = oEvent.clientY;
divStart.x = parseInt($(oDiv2).css("left"));
divStart.y = parseInt($(oDiv2).css("top"));
if(oDiv2.setCapture){
oDiv2.setCapture();
oDiv2.onmousemove = doDrag3;
oDiv2.onmouseup = stopDrag3;
}else{
$(oDiv).bind("mousemove",doDrag3).bind("mouseup",stopDrag3);
}
oEvent.preventDefault();
});
function doDrag3(ev) {
var oEvent = ev||event;
var t = oEvent.clientY-mouseStart.y+divStart.y;
if(t < 0){
t = 0;
}else if(t >= $(oDiv).height()-$(oDiv2).height()){
t = $(oDiv).height()-$(oDiv2).height();
}
$(oDiv2).css("top",t+"px");
$("#divcontent").css("top",-(t*h2/h1)+"px");
}
function stopDrag3(){
if(oDiv2.releaseCapture){
oDiv2.releaseCapture();
oDiv2.onmousemove = null;
oDiv2.onmouseup = null;
}else{
$(oDiv).unbind("mousemove",doDrag3).unbind("mouseup",stopDrag3);
}
}
//end
}
},function(){
$("#ypThumbContainer").hide("slow");
$("#ypThumb").hide("slow");
});
});
</script>
html代码如下:
Html代码代码
<div style="width:150px;overflow:hidden;height:170px;border:1px #000 solid;z-index:1; position:relative;" id="scrollContent">
<div class="thumbContainer" id="ypThumbContainer" style="Z-INDEX: 3; right:0px; WIDTH: 9px; POSITION: absolute; TOP: 0px; HEIGHT: 170px;border:1px #000 solid; display:none">
<div class="thumb" id="ypThumb" style="POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #ffd200;">
<img class="thumbImg" id="ypThumbImg" height="50" src="images/thumb.gif" width="9" style="cursor:pointer;"/><br />
</div>
</div>
<div id="divcontent" style="position:absolute;">
中新网8月12日电 据最高人民法院网站消息,最高人民法院新闻发言人孙军工今日介绍,新婚姻法首次明确离婚案件中一方婚前贷款购买的不动产应归产权登记方所有,但应对参与还贷的配偶给予公平合理的补偿。
</div>
</div>
相关文章推荐
- jQuery使用drag效果实现自由拖拽div
- 使用jQuery实现DIV弹出效果
- jQuery控制div实现随滚动条滚动效果
- jQuery使用drag效果实现自由拖拽div
- jquery 控制 div 滚动条一直在最底部,实现刷频效果
- Jquery实现自定义滚动条,DIV滑动效果
- jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
- React学习笔记:使用jquery实现动画效果淡入淡出
- 使用jQuery实现页面定时弹出广告效果
- jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
- 使用jQuery实现鼠标悬浮图片轮换效果
- 在asp.net中使用JQuery的SlideViewer插件实现图片的滚动效果
- 使用jquery实现上下左右移动效果
- 使用jQuery实现点评星星效果
- 使用Vue实现jQuery的切换选中效果
- jQuery实现简单的DIV拖动效果
- 文字环绕图片的布局效果(使用动态div实现)
- 用jquery实现弹窗居中、居左、居右显示的效果(完全代码,可立即使用)
- jQuery实现Div拖动+键盘控制综合效果的方法
- vue.js-div滚动条隐藏但有滚动效果的实现方法