jQuery 節點替換 && DIV 滚动条美化特效

浏览数：33 / 时间：2015年06月09日

使用 replaceWith 替換節點后，在原來節點上的事件都會被去除。

所以，如果要保留節點上的事件，可以只替換節點內的內容達到目的！不替換已經綁定事件的節點。

.read_box { height:480px; background:#141414; position:absolute; z-index:99999; top:25%; width:80%; left:10%; z-index:-999; 
/* 要使用scrollbar.js 文件，這個容器就必須設置display為block，不能用js來動態的做。但是在這之後，就可以隨意設置display了！ */}.scroll_wrap {position:relative; height:280px; width:80%; margin:0px auto; overflow:hidden; }
#dv_scroll { position:absolute; height:700px; width:89%; font-size:14px; font-family:‘创艺繁线体‘; overflow:hidden; padding:20px; }
#dv_scroll .Scroller-Container{width:100%;}
#dv_scroll_text { word-break: break-all;word-wrap: break-word; color:#6c6c6c; }
#dv_scroll_text p { line-height:180%; }
#dv_scroll_bar {position:absolute; right:0; top:0px; width:6px; height:310px;  background:#484642;}
#dv_scroll_bar .Scrollbar-Track{position:absolute; left:0; top:0px; width:6px; height:270px;}
#dv_scroll_bar .Scrollbar-Handle{position:absolute;left:0px;top:0; width:6px; height:70px; overflow:hidden;background:#cdc1aa;cursor:pointer;}
#dv_scroll_text {position:absolute;}

.news_x_content { display:none; }

　　var oPlay = $(‘#news .play‘);    
    var p_len = oPlay.length;
    for(var p = 0; p < p_len; p++) {
        oPlay[p].idx = p;    
    }
    
    $(‘.close‘).click(function() {                   
        $(‘.read_box‘).fadeOut(‘slow‘);
    });
    $(‘#news .play‘).click(function() {
        $(‘.read_box .r_title h2‘).html($(‘.news_x_content‘).eq(this.idx).find(‘span‘).html());
        $(‘.read_box .r_title h3‘).html($(‘.news_x_content‘).eq(this.idx).find(‘strong‘).html());
        $(‘.read_box #dv_scroll_text‘).html($(‘.news_x_content‘).eq(this.idx).find(‘div‘).html());
        
        $(‘.read_box‘).css({‘z-index‘:9999}).fadeIn(‘slow‘);
    });

<div class="scr_con">
    
    <div id="dv_scroll">
        <div id="dv_scroll_text" class="Scroller-Container">
            <p>afdsafdsafdsafddsafdsafdsafdsafdsafdsafdsafdsafdsafddsafdsafdsa</p>                                                
        </div>
    </div><!--dv_scroll end-->
    
    <div id="dv_scroll_bar">
        <div id="dv_scroll_track" class="Scrollbar-Track">
            <div class="Scrollbar-Handle"></div>    <!-- 這個是拖拽條 -->
        </div>
    </div><!--dv_scroll_bar end-->
    
</div><!--scr_con end-->