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

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

时间: 2024-10-29 20:51:16

jQuery 節點替換 && DIV 滚动条美化特效的相关文章

滚动条美化插件jquery.nicescroll

今天给大家介绍一个滚动条美化插件jquery.nicescroll,这个插件有以下一个主意事项: 1.兼容所有最新的桌面浏览器和旧版:Chrome,Firefox,Edge,IE8 +,Safari(win / mac),Opera 2.兼容移动设备:iPad / iPhone / iPod,Android 4 +,Blackberry手机和Playbook(WebWorks / Table OS),Windows Phone 8和10 3.兼容所有触摸设备:iPad,Android平板电脑,W

jQuery高性能自定义滚动条美化插件

malihu是一款高性能的滚动条美化jQuery插件.该滚动条美化插件支持水平和垂直滚动条,支持鼠标滚动,支持键盘滚动和支持移动触摸屏.并且它可以和jQuery UI和Bootatrap完美的结合,相当的强大.它的特点有: 支持垂直和水平滚动条 可调整滚动的动量 支持鼠标滚轮.键盘和移动触摸来移动滚动条 预定义主题,并且可以通过CSS来修改主题 支持RTL方向 提供大量参数来支持滚动条的美化和功能实现 提供大量方法来控制滚动条 用户自定义回调函数 可选择和搜索内容 效果演示:http://www

Selenium2+python自动化26-js处理内嵌div滚动条

前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相. 2.页面源码如下:(老规矩:copy下来,用文本保存下来,后缀改成.html,用浏览器打开) <!DOCTYPE html><meta charset="UTF-8"> <!-- for HTML5 --><meta http-equiv=&qu

MSSQL 查找子結節與父節點

-->Title:Generating test data -->Author:wufeng4552 -->Date :2009-09-30 08:52:38 set nocount on if object_id('tb','U')is not null drop table tb go create table tb(ID int, ParentID int) insert into tb select 1,0 insert into tb select 2,1 insert int

打开页面div滚动条定位(别用锚点)

来啦!客官久等了!!!!! 上代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>打开页面div滚动条定位</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <s

JQuery遍历指定id的div name值的几种方法

JQuery遍历指定id的div name值的几种方法:方法一 $("#div1 :text").each(function () { var this_id = $(this).attr("id"); alert(this_id); }

webkit之滚动条美化

由于公司的产品改用webkit内核,在写公共css的时候,不想使用插件模拟,顺便网上查阅了下css3的滚动条美化. 首先,先上一副示意图. 从网络上盗图的(来源 http://zhangyaochun.iteye.com/blog/1743283). 以下是对应的伪类: ::-webkit-scrollbar{/*1*/} /*滚动条整体部分,一般可以设置宽度*/ ::-webkit-scrollbar-button{/*2*/}/*两端的按钮*/ ::-webkit-scrollbar-tra

FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条

问题一:最简单的鼠标移过手变型的css要改了 cursor:pointer;/*FireFox(火狐)不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了,标准的是pointer 问题二:FireFox(火狐)不支持滤镜 最常见的半透明不支持. filter: Alpha(Opacity=50); /* for IE */ opacity: .5;/* for Firefox */ style="-moz-opacity:0.5; filter:alpha(opacit

jquery.chosen.js下拉选择框美化插件项目实例

由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生变化.为了界面的美观,不得已查资料寻找另外的插件. 使用jquery.chosen.js下拉选择框美化插件同样也能达到类似效果 完成效果如下 实现步骤如下 1.导入相关文件 <link rel="stylesheet" href="${ctxStatic}/css/chos