首页 > 代码库 > jQuery 節點替換 && DIV 滚动条美化特效

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

使用 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-->

滾動條美化源碼:http://www.divcss5.com/css-texiao/texiao695.shtml