搜索
您的当前位置:首页原生js封装自定义滚动条的代码案例分享

原生js封装自定义滚动条的代码案例分享

时间:2023-12-01 来源:乐玩宠
本文主要介绍了原生js封装自定义滚动条的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

最近有一个关于制作在线音乐播放器的项目,需要使用一个滚动条,但是自带滚动条实在是太丑了,所以就自己琢磨了一下自定义的滚动条。

在网上看原理,说实话没怎么看懂,就趁今天上午上安卓的时候,研究了一下,结果还算是满意吧。然后就包装一个对象。

使用方法很简单,就是自定义一个p,将这个对象导入做参数,new一下就可以。也可以自己定义滚动条的样式,只要自己修改一下样式表就可以

效果图:

代码如下:

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head><style type="text/css">p{ padding:0px; box-sizing:border-box; margin:0px; border:0px;}#p-5{ width: 700px; height: 500px; border:1px solid black; position: relative; overflow: hidden;}.ribbit-OF-p1{ width: 20px; background-color: rgb(239, 238, 238); border:1px solid rgba(0,0,0,0.5); position: absolute; right:0px; top: 0px; cursor:default;}.ribbit-OF-p2{ position: absolute; top:0px; right: 0px; width: 100%; height: 100px; background-color:rgba(0,0,0,0.3); border-radius: 10px;}.ribbit-OF-p3{ width: 100%; height:auto; background-color: lime;}</style><body><p id="p-1"><p id="p-2"></p> </p><p id="p-3"><p id="p-4"></p></p><p id="p-5"> 123123<br/>qwe<br/>12asd23<br/>asd3123<br/>qwe123<br/>235423423<br/>azxc123<br/>123123<br/>qwe<br/>12asd23<br/>asd3123<br/>qwe123<br/>235423423<br/>azxc123<br/>123123<br/>qwe<br/>12asd23<br/>asd3123<br/>qwe123<br/>235423423<br/>azxc123<br/>123123<br/>qwe<br/>12asd23<br/>asd3123<br/>qwe123<br/>235423423<br/>azxc123<br/>123123<br/>qwe<br/>12asd23<br/>asd3123<br/>qwe123<br/>235423423<br/>azxc123<br/>123123<br/>qwe<br/>12asd23<br/>asd3123<br/>qwe123<br/>235423423<br/>azxc123<br/>123123<br/>qwe<br/>12asd23<br/>asd3123<br/>qwe123<br/>235423423<br/>azxc123<br/>123123<br/>qwe<br/>12asd23<br/>asd3123<br/>qwe123<br/>235423423<br/>azxc123<br/>123123<br/>qwe<br/>12asd23<br/>asd3123<br/>qwe123<br/>235423423<br/>azxc123<br/></p></body><script type="text/javascript">var p_5 = document.getElementById('p-5');function OverFlow(element){ this.element = element; this.ribbit_OF_p1 = document.createElement("p"); this.ribbit_OF_p2 = document.createElement("p"); this.ribbit_OF_p3 = document.createElement("p"); this.createp = function(){ this.ribbit_OF_p1.className = "ribbit-OF-p1"; this.ribbit_OF_p2.className = "ribbit-OF-p2"; this.ribbit_OF_p3.className = "ribbit-OF-p3"; this.ribbit_OF_p3.innerHTML = this.element.innerHTML; this.element.innerHTML=""; this.element.appendChild(this.ribbit_OF_p3); this.ribbit_OF_p1.appendChild(this.ribbit_OF_p2); document.body.appendChild(this.ribbit_OF_p1); this.ribbit_OF_p1.style.height = getComputedStyle(this.element,null).height; this.ribbit_OF_p1.style.left = (this.element.offsetLeft+(parseInt(getComputedStyle(this.element,null).width) -parseInt(getComputedStyle(this.ribbit_OF_p1,null).width)))+"px"; this.ribbit_OF_p1.style.top = this.element.offsetTop+"px"; this.ribbit_OF_p2.style.top = "0px"; } this.addAudo=function(){ var YY=null;//前鼠标位置 var topXX = 0;//前top位置 var topX = 0;//后top值 var vherght = parseInt(getComputedStyle(this.ribbit_OF_p3,null).height)-parseInt(getComputedStyle(this.element,null).height);//可移动 var dst = 0; //最大top移动位置 var top_x = parseInt(getComputedStyle(this.ribbit_OF_p1,null).height)-parseInt(getComputedStyle(this.ribbit_OF_p2,null).height); var thio = this; window.onmousemove = function(e){ fun(e.clientY); }; this.ribbit_OF_p2.onmousedown=function(e){ YY = e.clientY; topXX =parseInt(this.style.top); return false; } window.onmouseup=function(){ YY = null; return true; } function fun(y){ if(top_x>=topX&&topX>=0&&YY!=null){ topX = y-YY+topXX; if(topX<0)topX=0; if(topX>top_x)topX=top_x-1; thio.ribbit_OF_p2.style.top = (topX-1)+"px"; dst = topX*vherght/top_x; thio.element.scrollTop = dst; } } } this.createp(); this.addAudo();}new OverFlow(p_5);</script></html>

小编还为您整理了以下内容,可能对您也有帮助:

js如何写自己的滚动条

由于网页中使用到了iframe,如果iframe中的内容超过主页面的范围后,在iframe的四周会出现滚动条,这样和主页面很不协调,所以在网上找了很久,终于找到一段代码可以解决这个问题,代码如下:
这段代码放在<head></head>之间:
<script language="Javascript">
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
//extra height in px to add to iframe in FireFox 1.0+ browsers
var FFextraWidth=getFFVersion>=0.1? 16 : 0
var FFextraHeight=getFFVersion>=0.1? 16 : 0
function dyniframesizeWidth(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"

if (pTar.contentDocument && pTar.contentDocument.body.offsetWidth){
//ns6 syntax
pTar.width = pTar.contentDocument.body.offsetWidth+FFextraWidth;
}
else if (pTar.Document && pTar.Document.body.scrollWidth){
//ie5+ syntax
pTar.width = pTar.Document.body.scrollWidth;
}
}
}
function dyniframesizeHeight(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"

if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetWidth+FFextraHeight;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
}
}
}
</script>
下边是在iframe中输入的代码:
<iframe id="displayresult" onload="javascript:{dyniframesizeHeight('displayresult');dyniframesizeWidth('displayresult');}" hspace="0" vspace="0" marginwidth=0 marginheight=0 frameborder=0 width=100% height=100% src="test.htm" scrolling=no name="displayresult"></iframe>
代码的关键是:设置id
调用js中的函数(dyniframesizeHeight(id)是设置高的滚动条自动调整,dyniframesizeWidth(id)是设置宽的滚动条的自动调整。)
将scrolling=no
其他就看实际应用做相应的修改了;

js如何写自己的滚动条

由于网页中使用到了iframe,如果iframe中的内容超过主页面的范围后,在iframe的四周会出现滚动条,这样和主页面很不协调,所以在网上找了很久,终于找到一段代码可以解决这个问题,代码如下:
这段代码放在<head></head>之间:
<script language="Javascript">
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
//extra height in px to add to iframe in FireFox 1.0+ browsers
var FFextraWidth=getFFVersion>=0.1? 16 : 0
var FFextraHeight=getFFVersion>=0.1? 16 : 0
function dyniframesizeWidth(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"

if (pTar.contentDocument && pTar.contentDocument.body.offsetWidth){
//ns6 syntax
pTar.width = pTar.contentDocument.body.offsetWidth+FFextraWidth;
}
else if (pTar.Document && pTar.Document.body.scrollWidth){
//ie5+ syntax
pTar.width = pTar.Document.body.scrollWidth;
}
}
}
function dyniframesizeHeight(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"

if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetWidth+FFextraHeight;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
}
}
}
</script>
下边是在iframe中输入的代码:
<iframe id="displayresult" onload="javascript:{dyniframesizeHeight('displayresult');dyniframesizeWidth('displayresult');}" hspace="0" vspace="0" marginwidth=0 marginheight=0 frameborder=0 width=100% height=100% src="test.htm" scrolling=no name="displayresult"></iframe>
代码的关键是:设置id
调用js中的函数(dyniframesizeHeight(id)是设置高的滚动条自动调整,dyniframesizeWidth(id)是设置宽的滚动条的自动调整。)
将scrolling=no
其他就看实际应用做相应的修改了;

js图片左右滚动 怎么弄 有没案例代码 求帮忙

1.jquery.imgScroll.js

;(function($){$.fn.extend({"imgScroll":function(object){object=$.extend({firstDiv:null,scrollBox:null,scrollImgBox:null,tabDiv:null,tabDivList:null,botPrev:null,botNext:null,changeType:"slide",thumbNowClass:'on',thumbOverEvent:true,changeTime:5000,ImgBoxMar:0,flag:true},object||{});var imgLen=$(object.scrollImgBox).length;var imgNum=0;var tabNum=0;var nowIndex=0;var index;var scrollWid=$(object.scrollImgBox).width()+object.ImgBoxMar;$(object.scrollImgBox).clone().appendTo($(this));function changeEffectNext(){if(object.changeType=='slide'){if(imgNum<imgLen){imgNum++}else{if(imgNum==imgLen){$(object.scrollBox).css({'margin-left':0});imgNum=1}}$(object.scrollBox).animate({'margin-left':-scrollWid*imgNum});if(tabNum<imgLen-1){tabNum++}else{if(tabNum==imgLen-1){tabNum=0}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType=='fadein'){if(imgNum<imgLen-1){imgNum++}else{if(imgNum==imgLen-1){imgNum=0}}$(object.scrollImgBox).eq(imgNum).fadeIn('slow');$(object.scrollImgBox).eq(imgNum).siblings().fadeOut('slow');$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}};function changeEffectPrev(){if(object.changeType=='slide'){if(imgNum>0){imgNum--}else{if(imgNum==0){$(object.scrollBox).css({'margin-left':-scrollWid*imgLen});imgNum=imgLen-1}}$(object.scrollBox).animate({'margin-left':-scrollWid*imgNum});if(tabNum>0){tabNum--}else{if(tabNum==0){tabNum=imgLen-1}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType=='fadein'){if(imgNum>0){imgNum--}else{if(imgNum==0){imgNum=imgLen-1}}$(object.scrollImgBox).eq(imgNum).fadeIn('slow');$(object.scrollImgBox).eq(imgNum).siblings().fadeOut('slow');$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}}if(object.flag==true){var s=setInterval(changeEffectNext,object.changeTime);$(object.firstDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime);});$(object.tabDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime)});$(object.botPrev).bind("click",function(){clearInterval(s)}).bind("mouseover",function(){clearInterval(s)});$(object.botNext).bind("click",function(){clearInterval(s)}).bind("mouseover",function(){clearInterval(s)})};$(object.botNext).click(function(){changeEffectNext()});$(object.botPrev).click(function(){changeEffectPrev()});function changesmallImg(index){$(object.tabDivList).eq(index).addClass(object.thumbNowClass);$(object.tabDivList).eq(index).siblings().removeClass(object.thumbNowClass);if(object.changeType=='slide'){$(object.scrollBox).animate({'margin-left':-scrollWid*index})}if(object.changeType=='fadein'){$(object.scrollImgBox).eq(index).fadeIn('slow');$(object.scrollImgBox).eq(index).siblings().fadeOut('slow')}imgNum=index;tabNum=index}if(object.thumbOverEvent==true){$(object.tabDivList).click(function(){var index=$(this).index();changesmallImg(index)})}if(object.thumbOverEvent==false){$(object.tabDivList).hover(function(){var index=$(this).index();changesmallImg(index)})}}})})(jQuery);

2.html结构

a,.lbPeo{-webkit-transition:all .2s ease-in-out 0s;-o-transition:all .2s ease-in-out 0s;-moz-transition:all .2s ease-in-out 0s;-ms-transition:all .2s ease-in-out 0s;transition:all .2s ease-in-out 0s;}
.lbCon{margin-top:33px;margin-bottom:37px;position: relative;}
.lbBtn{display:block;position: absolute;top:0;width:40px;height:143px;border:1px solid #D7D2CA;background:url('../../../images/special/140801/ctr_prev.png') no-repeat center center;}
.lbPrev{left:0}.lbNext{right:0;background-image:url('../../../images/special/140801/ctr_next.png')}
.lbBtn:hover{background-color: #ddd;}
.lbBox{width:900px;height:145px;margin-left: 50px;overflow: hidden;position: relative;}
.lbList{width:1000%;}
.lbBox ul{float:left}
.lbBox li{float:left;width:150px;height:145px;overflow: hidden;}
.lbPeo{text-align:center;line-height:18px;font-family:"微软雅黑";color:#333}
.lbPeo img{display:block;border: 1px solid #ddd;width:84px;height:103px;margin-left:32px;*margin-left:5px;}
.lbPeo h5{font-weight: bold;font-size:12px;padding-top: 5px;*padding-top: 0}
.lbPeo h6{font-size:12px;}
.lbBox li a:hover{text-decoration: none}
.lbBox li a:hover .lbPeo{color:#ff9600}

<!-- 人物-->
<div class="lbCon comWith clearfix">
   <div class="lbBox">
      <div class="lbList">
      <ul>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
      </ul>
      <ul>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大2红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李2大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
      </ul>
      </div>
   </div>
   <a href="javascript:;" class="lbBtn lbPrev"></a>
   <a href="javascript:;" class="lbBtn lbNext"></a>
</div>

3.页面调用:

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>

<script type="text/javascript" src="js/jquery.imgScroll.js"></script>(上面那个js)

$('.lbCon .lbBox .lbList').imgScroll({
        firstDiv: '.lbCon .lbBox',
        scrollBox: '.lbCon .lbBox .lbList',
        scrollImgBox: '.lbCon .lbBox ul',
        botPrev: '.lbCon .lbPrev',
        botNext: '.lbCon .lbNext',
        changeType: "slide",
        thumbNowClass: 'on',
        thumbOverEvent: true,
        changeTime: 5000,
        ImgBoxMar: 0,
        flag: false
    });


4.至于鼠标滑过 显示左右按钮,可以这么写(思路:css默认隐藏左右按钮,鼠标滑过显示左右按钮,划出隐藏,需要引入jquery.js)

$(function(){
   $(".wj_jdt_1").bind("onmouseover",function(){
       $(".ctr_btn").show();
   }).bind("onmouseout",function(){
       $(".ctr_btn").hide();
   })
})

 大体是这么个意思,至于怎么延伸在你

追问能不弄成源文件 这样看不是很清楚 谢谢

追答

参考页面:http://news.takungpao.com/special/fanchangjiang/

js图片左右滚动 怎么弄 有没案例代码 求帮忙

1.jquery.imgScroll.js

;(function($){$.fn.extend({"imgScroll":function(object){object=$.extend({firstDiv:null,scrollBox:null,scrollImgBox:null,tabDiv:null,tabDivList:null,botPrev:null,botNext:null,changeType:"slide",thumbNowClass:'on',thumbOverEvent:true,changeTime:5000,ImgBoxMar:0,flag:true},object||{});var imgLen=$(object.scrollImgBox).length;var imgNum=0;var tabNum=0;var nowIndex=0;var index;var scrollWid=$(object.scrollImgBox).width()+object.ImgBoxMar;$(object.scrollImgBox).clone().appendTo($(this));function changeEffectNext(){if(object.changeType=='slide'){if(imgNum<imgLen){imgNum++}else{if(imgNum==imgLen){$(object.scrollBox).css({'margin-left':0});imgNum=1}}$(object.scrollBox).animate({'margin-left':-scrollWid*imgNum});if(tabNum<imgLen-1){tabNum++}else{if(tabNum==imgLen-1){tabNum=0}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType=='fadein'){if(imgNum<imgLen-1){imgNum++}else{if(imgNum==imgLen-1){imgNum=0}}$(object.scrollImgBox).eq(imgNum).fadeIn('slow');$(object.scrollImgBox).eq(imgNum).siblings().fadeOut('slow');$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}};function changeEffectPrev(){if(object.changeType=='slide'){if(imgNum>0){imgNum--}else{if(imgNum==0){$(object.scrollBox).css({'margin-left':-scrollWid*imgLen});imgNum=imgLen-1}}$(object.scrollBox).animate({'margin-left':-scrollWid*imgNum});if(tabNum>0){tabNum--}else{if(tabNum==0){tabNum=imgLen-1}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType=='fadein'){if(imgNum>0){imgNum--}else{if(imgNum==0){imgNum=imgLen-1}}$(object.scrollImgBox).eq(imgNum).fadeIn('slow');$(object.scrollImgBox).eq(imgNum).siblings().fadeOut('slow');$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}}if(object.flag==true){var s=setInterval(changeEffectNext,object.changeTime);$(object.firstDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime);});$(object.tabDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime)});$(object.botPrev).bind("click",function(){clearInterval(s)}).bind("mouseover",function(){clearInterval(s)});$(object.botNext).bind("click",function(){clearInterval(s)}).bind("mouseover",function(){clearInterval(s)})};$(object.botNext).click(function(){changeEffectNext()});$(object.botPrev).click(function(){changeEffectPrev()});function changesmallImg(index){$(object.tabDivList).eq(index).addClass(object.thumbNowClass);$(object.tabDivList).eq(index).siblings().removeClass(object.thumbNowClass);if(object.changeType=='slide'){$(object.scrollBox).animate({'margin-left':-scrollWid*index})}if(object.changeType=='fadein'){$(object.scrollImgBox).eq(index).fadeIn('slow');$(object.scrollImgBox).eq(index).siblings().fadeOut('slow')}imgNum=index;tabNum=index}if(object.thumbOverEvent==true){$(object.tabDivList).click(function(){var index=$(this).index();changesmallImg(index)})}if(object.thumbOverEvent==false){$(object.tabDivList).hover(function(){var index=$(this).index();changesmallImg(index)})}}})})(jQuery);

2.html结构

a,.lbPeo{-webkit-transition:all .2s ease-in-out 0s;-o-transition:all .2s ease-in-out 0s;-moz-transition:all .2s ease-in-out 0s;-ms-transition:all .2s ease-in-out 0s;transition:all .2s ease-in-out 0s;}
.lbCon{margin-top:33px;margin-bottom:37px;position: relative;}
.lbBtn{display:block;position: absolute;top:0;width:40px;height:143px;border:1px solid #D7D2CA;background:url('../../../images/special/140801/ctr_prev.png') no-repeat center center;}
.lbPrev{left:0}.lbNext{right:0;background-image:url('../../../images/special/140801/ctr_next.png')}
.lbBtn:hover{background-color: #ddd;}
.lbBox{width:900px;height:145px;margin-left: 50px;overflow: hidden;position: relative;}
.lbList{width:1000%;}
.lbBox ul{float:left}
.lbBox li{float:left;width:150px;height:145px;overflow: hidden;}
.lbPeo{text-align:center;line-height:18px;font-family:"微软雅黑";color:#333}
.lbPeo img{display:block;border: 1px solid #ddd;width:84px;height:103px;margin-left:32px;*margin-left:5px;}
.lbPeo h5{font-weight: bold;font-size:12px;padding-top: 5px;*padding-top: 0}
.lbPeo h6{font-size:12px;}
.lbBox li a:hover{text-decoration: none}
.lbBox li a:hover .lbPeo{color:#ff9600}

<!-- 人物-->
<div class="lbCon comWith clearfix">
   <div class="lbBox">
      <div class="lbList">
      <ul>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
      </ul>
      <ul>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大2红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李2大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
      </ul>
      </div>
   </div>
   <a href="javascript:;" class="lbBtn lbPrev"></a>
   <a href="javascript:;" class="lbBtn lbNext"></a>
</div>

3.页面调用:

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>

<script type="text/javascript" src="js/jquery.imgScroll.js"></script>(上面那个js)

$('.lbCon .lbBox .lbList').imgScroll({
        firstDiv: '.lbCon .lbBox',
        scrollBox: '.lbCon .lbBox .lbList',
        scrollImgBox: '.lbCon .lbBox ul',
        botPrev: '.lbCon .lbPrev',
        botNext: '.lbCon .lbNext',
        changeType: "slide",
        thumbNowClass: 'on',
        thumbOverEvent: true,
        changeTime: 5000,
        ImgBoxMar: 0,
        flag: false
    });


4.至于鼠标滑过 显示左右按钮,可以这么写(思路:css默认隐藏左右按钮,鼠标滑过显示左右按钮,划出隐藏,需要引入jquery.js)

$(function(){
   $(".wj_jdt_1").bind("onmouseover",function(){
       $(".ctr_btn").show();
   }).bind("onmouseout",function(){
       $(".ctr_btn").hide();
   })
})

 大体是这么个意思,至于怎么延伸在你

追问能不弄成源文件 这样看不是很清楚 谢谢

追答

参考页面:http://news.takungpao.com/special/fanchangjiang/

利用div+jquery自定义滚动条样式的2种方法

可以设置左边菜单项div的overflow x:auto;overlfow y:auto;这样就会自动生成了滚动条 但是大家都知道自带的不好看 接下来就是重点了 如何修改滚动条的样式呢?感兴趣的朋友可以了解下本文  

  最近做项目中有一个模块是用于实时监控的 左边有个菜单栏用于显示所有的设备 那当然是从数据库中动态获取的了 右边是个iframe用于显示监控画面 本来这个功能并不复杂 左边的菜单项是利用dtree js来实现的 可时当功能实现完成之后 却发现一个问题 就是左边菜单栏中的设备名有的会很长 会 超出了div的长度 准确说是左边iframe的宽度和长度不够 那么 这时就必须要利用滚动条了 可以设置左边菜单项div的overflow x:auto;overlfow y:auto;这样就会自动生成了滚动条 但是大家都知道自带的不好看 接下来就是重点了 如何修改滚动条的样式呢? 经过从网上的不断搜索 发现有两种方法 第一种方法 利用CSS提供的样式 一共是 种属性吧 在这里不做详细介绍 网上很多这方面的资料 第二种方法 自己写一个新的滚动条 即不用div自带的滚动条 这样想要什么样的效果就有什么样的效果 具体实现 在网上搜了很多 可以发现基本上只有竖向滚动条 而没有横向滚动条 无奈之下 自己利用jquery写另一个滚动条 当然也借鉴了只有竖向滚动条的程序 说 一下具体实现思路 目标div 即需要生成滚动条的div 里面嵌套了 个div 分别是用于显示内容的div_content 显示竖向滚动条的div_H 显示横向滚动条的 div_W 具体布局就是按照自带滚动条的div的布局一样 然后显示滚动条的div即div_H和div_W有各自包含了 个div 即左右箭头 个 滚动条 个 具体代码如下

复制代码 代码如下: if($(_self) children(" jscroll c") height()==null){ //添加内容框(div) $(_self) wrapInner("<div class= jscroll c style= top: px;z index: ;zoom: ;position:relative; ></div>"); //添加竖向滚动条 $(_self) append("<div class= jscroll e unselectable= on style= height: %;top: px;right: ; moz user select:none;position:absolute;overflow:hidden;z index: ; ><div class= jscroll u style= position:absolute;top: px;width: %;right: ;background:blue;overflow:hidden ></div><div class= jscroll h unselectable= on style= background:green;position:absolute;left: ; moz user select:none;border: px solid ></div><div class= jscroll d style= position:absolute;bottom: px;width: %;left: ;background:blue;overflow:hidden ></div></div>"); //添加横向滚动条 $(_self) append("<div class= jscroll s unselectable= on style= width: px;bottom: px;left: ; moz user select:none;position:absolute;overflow:hidden;z index: ; ><div class= jscroll l style= position:absolute;bottom: px;height: %;left: ;background:blue;overflow:hidden ></div><div class= jscroll g unselectable= on style= height: %;background:green;position:absolute;left: ; moz user select:none;border: px solid ></div><div class= jscroll r style= position:absolute;bottom: px;height: %;right: ;background:blue;overflow:hidden ></div></div>"); } lishixin/Article/program/Java/JSP/201311/20373

js有什么方法代替scrollTop,实现div 里面滚动。

你好,我先需要明确一下你是要问jQuery中scrollTop获取滚动条距顶端的距离,还是要使用scrollTop来设置滚动条距顶端的距离,或者说需要二者兼备。

1、如果是获取,原生js实现很容易:

1.2

3.var div = document.getElementById('wgt-ask'),

scrollTop = div.scrollTop;

console.log(scrollTop); // 100

前提是div已经具备滚动条,不然使用为0

2、如果是设置,原生js也很简单:

1.2

var div = document.getElementById('wgt-ask');

div.scrollTop = 100;

依然前提是div已经具备滚动条,否则设置无效

3、如果是二者兼备,这里就要简单的封装一下了:

1.2

3.4

5.6

7.8

9.10

11.function scrollTop(obj, len){

if (typeof len === 'undefined') {

return obj.scrollTop;

} else {

obj.scrollTop = len;

}

}

var div = document.getElementById("wgt-user");

scrollTop(div, 100); // 设置

var st = scrollTop(div); // 100 获取

希望是你想要的结果,如有疑问欢迎追问,望采纳~

乐玩宠还为您提供以下相关内容希望对您有帮助:

jQuery 中 scrollTop;原生的js怎么写

1、如果是获取,原生js实现很容易:var div = document.getElementById('wgt-ask'), scrollTop = div.scrollTop;console.log(scrollTop); // 100前提是div已经具备滚动条,不然使用为0 2、如果是设置,原生js也很...

js如何控制整个页面滚动条的位置

1、通过div的scrollTop变动控制垂直滚动条位置。通过div的scrollLeft变动控制水平滚动条位置。示例: //d1是外层div,带滚动条 2222 document.getElementById('d1').scrollTop=100;//通过scrollTop设置滚动到100位置 d...

原生js或jQuery怎么让滚动条只能滚动固定的距离?

(window).bind("scroll", function(){ var top = $(this).scrollTop(); // 当前窗口的滚动距离 });如果使用原生js,可以这样写(摘自网上的):/ 获取滚动条距离顶端的距离 return {}支持IE6 / function getScroll...

利用div+jquery自定义滚动条样式的2种方法

div_W,具体布局就是按照自带滚动条的div的布局一样,然后显示滚动条的div即div_H和div_W有各自包含了3个div,即左右箭头2个,滚动条1个。具体代码如下:复制代码 代码如下:if($(_self).children(".jscroll-c").heig...

如何使用iscroll.js插件

这篇文章讲到了iscroll的一些使用入门、参数配置和示例,并讲到了滚动条的接口,自定义事件和销毁动作等。原文:iscroll.js的使用 入门 Scroll是一个类,每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU...

Element scrollbar 使用封装

el-scrollbar 默认使用纵向滚动条效果,在我们项目里的 tag 页签功能区使用了横向滚动条,隐藏了纵向滚动条,由于自定义的需求,在实际使用时需要根据情况设置对应的边距问题,这里调整的时候还需要隐藏原生滚动条,这...

js图片左右滚动 怎么弄 有没案例代码 求帮忙

类似这样的左右滚动的js效果代码谁有就是鼠标经过那个区域左右两边按钮出现按按钮可以左右滚动图片离开区域按钮消失效果可以看http://www.u17.com/这里想模仿这个网站首页的图片滚动效... 类似这样的左右滚动的js效果代码 谁有 就是鼠标...

如何用纯js设置body的横向滚动条。这主要是我对写法很疑惑。改变body背...

document.body.overflowX="hidden";js写的话 - 后边的单词首字母大写

如何在select下拉框设置滚动条

如何在select下拉框设置滚动条?定义边框和滚动条样式(通过用层来模拟实现)。 function showHide(obj){ //隐现层的函数 sh={block:"none",none:"block"} //层的display属性值在"block"和"none"间不断轮换。1、双击打...

如何自定义 iscroll.js 的滚动条样式

Then use the following CSS classes to style the little bastards..iScrollHorizontalScrollbar, this is applied to the horizontal container. The element that actually hosts the scrollbar indicator..iScrollVertical...

Top
4.496182s