码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-08-19 16:08:34      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   os   io   strong   

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

jQuery 節點替換 && DIV 滚动条美化特效,布布扣,bubuko.com

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

标签:style   blog   http   color   使用   os   io   strong   

原文地址:http://www.cnblogs.com/lxpursue/p/3922129.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!