查了些div实现滚动条的效果,看了很多,大多都不符合要求。
要求如下:
1.div大小固定,div中内容大小不固定
2.鼠标移动到内容上时,如果内容太大,则出现滚动条,并可以拖动查看,而内容宽度不变。否则不显示滚动条。
如果纯粹的使用div的overflow-y:scroll,那么内容的宽度会变小。
废话不多说,直接上代码。
在此多谢以下文章的作者,出处如下:
1.http://www.58mb.com/info/design/Javascript/152185022063.html
2.http://sc.xueit.com/down/sc1220.shtml
文章中导入jquery-1.4.1.min.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代码如下:
<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实现将div的滚动条滚动到指定位置 jQuery实现将div的滚动条滚动到指定位置
jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条
用jquery改变DIV的滚动条的样式,可以改变滚动滑块的图片,上下按钮的图片
Jquery实现简单的滚动刷新效果: 实际情况使用Ajax获取后台数据更新前端页面即可实现页面滚动刷新效果 HTML正文: <form id="form1" runat="server"> <div xss=removed> </div> </form> Javascript...
sly jquery定制div滚动条Scrollbar 兼容IE6 FireFox Safari
主要介绍了jQuery控制div实现随滚动条滚动效果,对比分析了两种实现方法供大家参考选择,需要的朋友可以参考下
div随滚动条上下滚动,div随滚动条上下滚动div随滚动条上下滚动div随滚动条上下滚动
jquery监听DIV的事件,可监听DIV的变化的事件,直接引用即可使用
可以自己定义滚动条,根据div内容自己调节产生横向和竖向滚动条。滚动条所有元素都可以自己定义样式,包括颜色或者图片。
网页局部div随滚动条置顶滚动 效果很好,跟普通的滚动不太一样,没有延迟。
滚动条滚动 div跟着动 并且div不闪烁
一款简单实用的jQuery+mousescroll.js自定义美化div滚动条插件,把普通的网页滚动条进行美化,同一页面也可以多次调用。
Div滚动条随鼠标滚动Jquery版(转)Div滚动条随鼠标滚动Jquery版(转)
用DIV和DIV自身的滚动条相互控制内容的滚动,DIV自身的滚动条样式可以用DIV层覆盖,重写滚动条样式
本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法。分享给大家供大家参考,具体如下: 一、Js代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var ...
主要介绍了jQuery判断div随滚动条滚动到一定位置后停止的方法,需要的朋友可以参考下
NULL 博文链接:https://solodu.iteye.com/blog/574857
Div滚动条随鼠标滚动js版(由网友JQuery版改写而成),可解决IE8下,Div由于“onSelectStart=return false“或onfocus()导致的失去焦点后,滚动条无法滚动问题