欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery+DIV自定義滾動(dòng)條樣式的具體實(shí)現(xiàn)

 更新時(shí)間：2013年06月25日 12:00:15   作者：  
用DIV和DIV自身的滾動(dòng)條相互控制內(nèi)容的滾動(dòng)，DIV自身的滾動(dòng)條樣式可以用DIV層覆蓋，重寫滾動(dòng)條樣式

JQuery計(jì)算滾動(dòng)條長(zhǎng)度和位置，代碼如下：

javascript

復(fù)制代碼 代碼如下:

<script type="text/javascript">
    var scrMinHeight = 1; //滾動(dòng)條最小高度
    var scrMaxHeight = 0; //滾動(dòng)條最大高度
    var scrDefualtTop = 80; //滾動(dòng)條默認(rèn)位置
    var scrHeight = 0;
    //初始化滾動(dòng)條
    function InitScroll() {
        scrMaxHeight = $("#mainScrollContent").height(); //文本框高度
        scrHeight = document.getElementById("mainScrollContent").scrollHeight; //滾動(dòng)文本高度
        scrHeight = parseInt((scrMaxHeight / scrHeight) * scrMaxHeight);
        if (scrHeight <= scrMinHeight) { scrHeight = scrMinHeight; }
        if (scrHeight >= scrMaxHeight) { $("#scrollContent").hide(); }
        else {
            $("#scrollContent").show();
            $("#scrollContent .tiao_mid").css("height", (scrHeight - 19) + "px");
        }
    }

    $(document).ready(function () {
        $(".bod").height(($(document).height() - 80) + "px");
        $("#mainScrollContent").height(($(document).height() - 125) + "px");
        scrMaxHeight = ($(document).height() - 125); //滾動(dòng)條最大高度
        $("#scrollBody").height(($(document).height() - 125) + "px");
        $("#scrollBodyBack").height(($(document).height() - 125) + "px");

        InitScroll();
        $("#mainScrollContent").scroll(function () {
            ChangeScroll();
        });
        var y1 = 0;
        $("#scrollContent").mousedown(function (event) {
            var scrContentTop = $("#scrollContent").css("top");
            y1 = event.clientY - parseInt(scrContentTop.replace("px", ""));
            $("#scrollContent").mousemove(function (event) {
                if ((event.clientY - y1) < scrDefualtTop) {
                    $("#scrollContent").css("top", scrDefualtTop + "px");
                }
                else if ((event.clientY - y1) > (scrDefualtTop + scrMaxHeight - scrHeight)) {
                    $("#scrollContent").css("top", (scrDefualtTop + scrMaxHeight - scrHeight) + "px");
                }
                else {
                    $("#scrollContent").css("top", (event.clientY - y1) + "px");
                }
                ChangeScrollContent();
            });
        }).mouseup(function () {
            $("#scrollContent").unbind("mousemove");
        }).mouseout(function () {
            $("#scrollContent").unbind("mousemove");
        });
    });

    //改變滾動(dòng)內(nèi)容位置
    function ChangeScrollContent() {
        var scrTop = $("#scrollContent").css("top");
        var st = parseInt(scrTop.replace("px", ""));
        st = ((st - scrDefualtTop) * document.getElementById("mainScrollContent").scrollHeight) / scrMaxHeight
        $("#mainScrollContent").scrollTop(st); //滾動(dòng)的高度
    }

    //改變滾動(dòng)條位置
    function ChangeScroll() {
        var scrTop = $("#mainScrollContent").scrollTop(); //滾動(dòng)的高度
        scrTop = (scrTop * scrMaxHeight) / document.getElementById("mainScrollContent").scrollHeight + scrDefualtTop;
        $("#scrollContent").css("top", scrTop + "px");
    }
    </script>

滾動(dòng)區(qū)域內(nèi)容DIV：
html

復(fù)制代碼 代碼如下:

<div class="jtc_neir" id="Div1" style="height: 100px;">
    營(yíng)業(yè)總收入:11.66億元(同比增長(zhǎng)-1.75%)
    <br />
    <a href="bank.aspx">dddd</a>凈利潤(rùn):0.19億元(同比增長(zhǎng)23.72%)
    <br />
    每股收益:0.04元
    <br />
    凈資產(chǎn)收益率:1.58%
    <br />
    毛利率:12.22%(同比增長(zhǎng)39.89%)
    <br />
    總資產(chǎn):30.46億元(同比增長(zhǎng)-7.14%)<br />
    as大蘇打撒旦撒
    <br />
    阿斯蒂芬多個(gè)地方營(yíng)業(yè)總收入:11.66億元(同比增長(zhǎng)-1.75%)
    <br />
    凈利潤(rùn):0.19億元(同比增長(zhǎng)23.72%)
    <br />
    每股收益:0.04元
    <br />
    凈資產(chǎn)收益率:1.58%
    <br />
    毛利率:12.22%(同比增長(zhǎng)39.89%)
    <br />
    總資產(chǎn):30.46億元(同比增長(zhǎng)-7.14%)<br />
    as大蘇打撒旦撒
    <br />
    阿斯蒂芬多個(gè)地方營(yíng)業(yè)總收入:11.66億元(同比增長(zhǎng)-1.75%)
    <br />
    凈利潤(rùn):0.19億元(同比增長(zhǎng)23.72%)
    <br />
    每股收益:0.04元
    <br />
    凈資產(chǎn)收益率:1.58%
    <br />
    毛利率:12.22%(同比增長(zhǎng)39.89%)
    <br />
    總資產(chǎn):30.46億元(同比增長(zhǎng)-7.14%)<br />
    as大蘇打撒旦撒
    <br />
    阿斯蒂芬多個(gè)地方營(yíng)業(yè)總收入:11.66億元(同比增長(zhǎng)-1.75%)
    <br />
    凈利潤(rùn):0.19億元(同比增長(zhǎng)23.72%)
    <br />
    每股收益:0.04元
    <br />
    凈資產(chǎn)收益率:1.58%
    <br />
    毛利率:12.22%(同比增長(zhǎng)39.89%)
    <br />
    總資產(chǎn):30.46億元(同比增長(zhǎng)-7.14%)<br />
    as大蘇打撒旦撒
    <br />
    阿斯蒂芬多個(gè)地方營(yíng)業(yè)總收入:11.66億元(同比增長(zhǎng)-1.75%)
    <br />
    凈利潤(rùn):0.19億元(同比增長(zhǎng)23.72%)
    <br />
    每股收益:0.04元
    <br />
    凈資產(chǎn)收益率:1.58%
    <br />
    毛利率:12.22%(同比增長(zhǎng)39.89%)
    <br />
    總資產(chǎn):30.46億元(同比增長(zhǎng)-7.14%)<br />
    as大蘇打撒旦撒
    <br />
    阿斯蒂芬多個(gè)地方</div>
<div class="jtc_tiao" style="background-color: rgb(196,206,208); z-index: 2;" id="Div2">
</div>
<div class="jtc_tiao" style="background-color: rgb(222,222,222); z-index: 1; width: 16px;"
    id="Div3">
</div>
<div class="jtc_tiao" id="Div4">
    <div class="tiao_up">
    </div>
    <div class="tiao_mid">
    </div>
    <div class="tiao_bottom">
    </div>
</div>

主要樣式：
css

復(fù)制代碼 代碼如下:

.jtc_neir{margin-left:20px; margin-right:20px; color:#000000; font-size:12px; background:none; line-height:32px; overflow-y:scroll;overflow-x:hidden; 
          scrollbar-3dlight-color:rgb(222,222,222); 
    scrollbar-arrow-color:rgb(222,222,222); 
    scrollbar-base-color:rgb(222,222,222); 
    scrollbar-darkshadow-color:rgb(222,222,222); 
    scrollbar-face-color:rgb(222,222,222); 
    scrollbar-highlight-color:rgb(222,222,222); 
    scrollbar-shadow-color:rgb(222,222,222);} 

.jtc_tiao{width:8px; position:absolute; top:80px; right:20px; z-index:10;} 
.tiao_up{width:8px; height:10px; background:url(../images/scrollbar-3.jpg) left top no-repeat; line-height:0px; overflow:hidden;} 
.tiao_mid{width:8px; background:url(../images/scrollbar-3.jpg) -39px center  repeat-y; line-height:0px; overflow:hidden;} 
.tiao_bottom{width:8px; height:10px; background:url(../images/scrollbar-3.jpg) -13px bottom no-repeat;font-size:0; line-height:0px; overflow:hidden;} 

相關(guān)文章

  • 微信小程序頁(yè)面?zhèn)鞫鄠€(gè)參數(shù)跳轉(zhuǎn)頁(yè)面的實(shí)現(xiàn)方法

    微信小程序頁(yè)面?zhèn)鞫鄠€(gè)參數(shù)跳轉(zhuǎn)頁(yè)面的實(shí)現(xiàn)方法

    這篇文章主要介紹了微信小程序頁(yè)面?zhèn)鞫鄠€(gè)參數(shù)跳轉(zhuǎn)頁(yè)面的實(shí)現(xiàn)方法,本文圖文并茂給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2019-05-05
  • JavaScript數(shù)組及常見(jiàn)操作方法小結(jié)

    JavaScript數(shù)組及常見(jiàn)操作方法小結(jié)

    這篇文章主要介紹了JavaScript數(shù)組及常見(jiàn)操作方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript數(shù)組的基本獲取、添加、刪除、排序、翻轉(zhuǎn)等相關(guān)操作技巧,需要的朋友可以參考下
    2019-11-11
  • js 下拉菜單實(shí)現(xiàn)代碼

    js 下拉菜單實(shí)現(xiàn)代碼

    js 下拉菜單實(shí)現(xiàn)代碼，原理比較簡(jiǎn)單，需要的朋友可以參考下，具體的美化要靠自己。
    2010-05-05
  • IE8 內(nèi)存泄露(內(nèi)存一直增長(zhǎng) )的原因及解決辦法

    IE8 內(nèi)存泄露(內(nèi)存一直增長(zhǎng) )的原因及解決辦法

    最近開發(fā)的時(shí)候?qū)?yè)面使用了定時(shí)的局部更新，結(jié)果在ie6，7和Firefox下，一切正常，而在ie8下過(guò)上幾個(gè)小時(shí)就瀏覽器就崩潰了，顯示是內(nèi)存溢出，下面由腳本之家小編給大家介紹ie8下內(nèi)存一直增長(zhǎng)內(nèi)存泄漏的原因及解決辦法，需要的朋友一起學(xué)習(xí)吧
    2016-04-04
  • CSS、JS文件無(wú)法正確加載至頁(yè)面問(wèn)題與解決辦法分享

    CSS、JS文件無(wú)法正確加載至頁(yè)面問(wèn)題與解決辦法分享

    這篇文章主要給大家介紹了關(guān)于CSS、JS文件無(wú)法正確加載至頁(yè)面問(wèn)題與解決辦法,文中通過(guò)圖文以及代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2024-01-01
  • 深入淺析JavaScript中的in關(guān)鍵字和for-in循環(huán)

    深入淺析JavaScript中的in關(guān)鍵字和for-in循環(huán)

    這篇文章主要介紹了JavaScript中的in關(guān)鍵字和for-in循環(huán)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-04-04
  • JS中三種URI編碼方式對(duì)比分析

    JS中三種URI編碼方式對(duì)比分析

    這篇文章主要介紹了JS中三種URI編碼方式對(duì)比分析,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2024-01-01
  • 開發(fā)跨瀏覽器的JavaScript方法說(shuō)明

    開發(fā)跨瀏覽器的JavaScript方法說(shuō)明

    IE是當(dāng)前瀏覽器的一個(gè)異類，不過(guò)解決方法倒也相當(dāng)簡(jiǎn)單，使用Firefox和Safari 之 類的瀏覽時(shí)，可以使用元素的setArribute方法來(lái)設(shè)置元素的class屬性
    2008-08-08
  • javascript的propertyIsEnumerable()方法使用介紹

    javascript的propertyIsEnumerable()方法使用介紹

    propertyIsEnumerable()是用來(lái)檢測(cè)屬性是否屬于某個(gè)對(duì)象的,如果檢測(cè)到了,返回true,否則返回false，下面為大家介紹下其具體的使用
    2014-04-04
  • js獲取域名的方法

    js獲取域名的方法

    這篇文章主要介紹了js獲取域名的方法,涉及window.location中常見(jiàn)方法的使用技巧,需要的朋友可以參考下
    2015-01-01

最新評(píng)論