首页 > 代码库 > 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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。