滚动篇————附一个简单单的自定义滚动条

好几天没有发文了，这几天考试，所有耽搁了下来。今天说一说滚动的问题。
前端学习中，页面滚动是一个很重要的部分。
首先要说的是偏移量的问题。先看元素的几个属性
1.offsetHeight,offsetWidth:这两个属性是元素在水平和垂直方向所占的空间大小。包含边框。
2.offsetLeft,offsetTop:元素相对于包含元素的上、左方向的距离。
再看一个问题，客户区的大小，指的是元素内容及其内边距所占的空间大小。不包含边框。用clientWidth,clientHeight表示。
最后要介绍的是滚动大小，scrollHeigth,和scrollWidth表示在没有滚动条的情况下，元素内容的总高度和总宽度。scrollLeft,scrollTop，被隐藏的内容区域的像素数。
在涉及浏览器的滚动的时候需要注意的是，混杂模式下IE是在body中滚动，而其他的浏览器大多认为是在浏览器的视口中滚动，所以在这里就用做一些兼容问题：

scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;

接下来通过一个自定义滚动条来进一步讨论这两个问题。

<head>

    <script>

window.onload=function(){

    var div3=document.getElementById("div3");

    var div2=document.getElementById('div2');

    var div4=document.getElementById('div4');



    div3.onmousedown=function(e){

      var  e=e||event;



        var yy= e.clientY-div3.offsetTop





        document.onmousemove=function(ev){

         var   e=ev||event;

         var  l = e.clientY-yy;

            if(l<0){

                l=0;

            }else if(l>390){

                l=390   ;

            };

            div3.style.top=l+'px';

            div4.style.top=-l/390*(div4.offsetHeight-400)+'px';



        }

        document.onmouseup=function(){

            document.onmousemove=null;

        }

        return false;

    }

}



    </script>

    <style type="text/css">

        #div1{

            width:100px;

            height:400px;

            border:solid black 1px;

            float:left;

            position: relative;

        }

    </style>

</head>



<div id="div1" >

    <div id="div4" style="position: absolute;width:100px;overflow:hidden;">

    # 在此处输入标题



    标签（空格分隔）： 未分类



    ---

    ##javascript中event汇总

    ie firefox chrome opera Safari浏览器中对 event的处理并不一致，在此我将各个浏览器中event的兼容处理做了一个汇总，此处引用的是javascript中的event兼容处理代码。

    

    var EventUtil = {//在这里我们用一个对象来将对event的各种兼容处理封装起来

    //首先是对绑定事件的兼容

    addHandler: function(element, type, handler){

    if (element.addEventListener){

    //DOM2级处理绑定事件方法

    element.addEventListener(type, handler, false);

    } else if (element.attachEvent){

    //IE绑定方法

    element.attachEvent("on" + type, handler);

    } else {

    //DOM0级处理方法（可选，仅支持DOM0级的浏览器似乎已经不存在了）

    element["on" + type] = handler;

    }

    },

    //鼠标按钮的兼容处理

    getButton: function(event){

    if (document.implementation.hasFeature("MouseEvents", "2.0")){//首先检查是否是DOM标准

    return event.button;

    } else {

    //对IE向DOM兼容

    switch(event.button){

    case 0:

    case 1:

    case 3:

    case 5:

    case 7:

    return 0;

    case 2:

    case 6:

    return 2;

    case 4: return 1;

    }

    }

    },

    //获取字符编码

    getCharCode: function(event){

    if (typeof event.charCode == "number"){

    return event.charCode;

    } else {//IE8之前和opera 需要使用keyCode获取字符编码

    return event.keyCode;

    }

    },

    //剪切板的访问

    getClipboardText: function(event){

    var clipboardData =  (event.clipboardData || window.clipboardData);

    return clipboardData.getData("text");

    },

    //得到事件对象

    getEvent: function(event){

    return event ? event : window.event;

    },

    //得到相关元素

    getRelatedTarget: function(event){

    if (event.relatedTarget){

    return event.relatedTarget;

    } else if (event.toElement){

    return event.toElement;

    } else if (event.fromElement){

    return event.fromElement;

    } else {

    return null;

    }



    },

    //得到事件目标

    getTarget: function(event){

    return event.target || event.srcElement;

    },

    //对滑轮事件进行兼容

    getWheelDelta: function(event){

    if (event.wheelDelta){

    return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);

    } else {

    return -event.detail * 40;

    }

    },

    //阻止默认事件

    preventDefault: function(event){

    if (event.preventDefault){

    event.preventDefault();

    } else {

    event.returnValue = false;

    }

    },

    //移除事件

    removeHandler: function(element, type, handler){

    if (element.removeEventListener){

    element.removeEventListener(type, handler, false);

    } else if (element.detachEvent){

    element.detachEvent("on" + type, handler);

    } else {

    element["on" + type] = null;

    }

    },

    //设置剪切板内容

    setClipboardText: function(event, value){

    if (event.clipboardData){

    event.clipboardData.setData("text/plain", value);

    } else if (window.clipboardData){

    window.clipboardData.setData("text", value);

    }

    },

    //阻止事件冒泡

    stopPropagation: function(event){

    if (event.stopPropagation){

    event.stopPropagation();

    } else {

    event.cancelBubble = true;

    }

    }



    };

   

    此处添加的事件尚不完全，有待扩充。

    </div>

</div>

<div id="div2" style="height:400px;width:10px;border:1px solid black;float:left;position:relative;"><div id="div3" style="height:10px;width:10px;background:red;position:absolute;top:0px;"></div></div>

<body>



</div>

[实例测试](http://www.chinajs.net/test)

在这个自定义滚动条中我们通过设置top来更改元素的位置，不能使用scrollTop因为scrollTop是只读的。

你可能感兴趣的:(滚动条)

  • 【Python】tkinter及组件如何使用 小九不懂SAP 我的Python日记python开发语言tkinter
    一、tkinter的应用场景tkinter是Python的标准GUI（图形用户界面）库，它提供了丰富的控件和工具，使得开发者能够轻松创建跨平台的桌面应用程序。以下是一些tkinter的常见应用场景：桌面应用程序开发：开发者可以使用tkinter来创建各种桌面应用程序，如文本编辑器、计算器、图片查看器、游戏等。这些应用程序可以具有复杂的用户界面，包括窗口、按钮、文本框、下拉菜单、滚动条等。数据可视化
  • LVGL 控件之列表（lv_list） Projectsauron #LVGlLVGL嵌入式
    目录一、概述二、列表1、添加列表按钮2、设置列表文本3、API函数一、概述List（列表）基本上是一个垂直布局的矩形，按钮指向该矩形并且可以添加文本。列表部件由两个部分组成：LV_PART_MAIN使用所有典型背景属性的列表的主要部分LV_PART_SCROLLBAR滚动条。二、列表1、添加列表按钮在默认的情况下，列表部件被创建出来后，只有一个矩形背景框，并没有任何的文本和按钮，用户需要自行往列表
  • 【Axure高保真原型】冻结固定中继器表格首列模板 梓贤Vigo Axure原型交互产品经理中继器
    今天和大家分享冻结固定中继器表格首列的原型模板，当中继器表格列数较多时，通过拖动滚动条左右查看内容时，可以把首列冻结固定，方便我们查看。这个原型模板是用中继器制作的，所以使用也非常方便，在中继器表格里维护数据信息，预览时既可以生成高保真的交互效果。这套模板里面也提供固定左侧二列，或者你也可以用同样的方法，固定左侧多列。具体效果可以观看下方视频或者点击预览地址体验：【原型效果】【Axure高保真原型
  • js进阶第二天 LIT乐言
    一、水平滚动条和垂直滚动条Snip20161124_1.png1.1核心技术点1）求滚动条的长度？2）拖动滚动条，求内容要走多少？滚动条的长度取决于滚动内容（滚动内容越长，滚动条越短）；内容滚动的距离和滚动条走的距离是成倍数关系。1.2换算公式获取滚动条的长度：**滚动条的长度/盒子的长度=盒子的长度/内容的长度**滚动条长度=(盒子的宽度/内容的宽度)*盒子的宽度拖动滚动条，求内容走的长度：**
  • css3溢出隐藏的方法 DDOS防御 网络技术css3前端css
    CSS3提供了几种方法来处理元素内容的溢出问题，以下是一些常见的方法：1.**使用`overflow`属性**：-`overflow:hidden;`：隐藏溢出的内容。-`overflow:scroll;`：如果内容溢出，将显示滚动条。-`overflow:auto;`：如果内容溢出，将显示滚动条，但滚动条只在需要时显示。2.**使用`text-overflow`和`white-space`属性*
  • html ios 滚动条隐藏,CSS溢出滚动和隐藏滚动条（iOS） 社长从来不假装 htmlios滚动条隐藏
    6个答案:答案0:(得分：5)我只是玩了这个codepen(https://codepen.io/devstreak/pen/dMYgeO)，看来如果你为下面的所有三个属性设置background-color到transparent，滚动(在这个例子中)同时删除box-shadows)，根本看不到滚动条：#style-1::-webkit-scrollbar-track{//-webkit-box
  • css滚动条隐藏但是可以滚动 每一天，每一步 HTML/CSScss前端javascript
    要实现滚动条隐藏但仍然可以滚动的效果，可以使用CSS来隐藏滚动条，同时允许鼠标的滚轮或触摸板滚动。/*隐藏滚动条，但仍可滚动*/.scrollable{overflow:auto;/*保持内容可滚动*/scrollbar-width:none;/*对于现代浏览器，隐藏滚动条*/}/*针对IE和Edge的隐藏滚动条样式*/.scrollable::-webkit-scrollbar{display:
  • CSS 元素超出部分滚动, 并隐藏滚动条（2种方法） 就像风1样 cssCSS样式专栏css溢出滚动隐藏滚动条
    方法一,利用css3的新特性-webkit-scrollbar,但是这种方式不兼容火狐和IE超出部分隐藏滚动条#box{width:500px;height:300px;overflow-x:hidden;overflow-y:scroll;line-height:30px;text-align:center;}#box::-webkit-scrollbar{display:none;}你好你好你
  • excel 我是苏小禾
    深入学习office，熟练操作办公软件，提前准备就业技能。数据处理与统计，图表化数据，分析，数据透视表功能。alt加F4是快捷关闭Excel。简化工作量。认识Excel界面，专业术语：工作簿，工作表，行列单元格，单元格地址。界面组成：标题栏，选项卡（功能组，功能按钮），名称框，编辑栏，行号，列表，拆分按键，窗口操作按钮，工作表标签，滚动条，翻页按钮，状态栏。表格里面数据的比较，使用窗口。窗口的基本
  • vue对话框禁止后面页面滚动条滚动的解决方式 小橘碎碎记 vue.jsjavascript前端
    转载https://www.cnblogs.com/mxl123/p/11818125.htmlstopSrcoll(){varmo=function(e){e.preventDefault();};document.body.style.overflow='hidden';document.addEventListener("touchmove",mo,false);//禁止页面滑动},open
  • vue如何禁止弹窗后面的滚动条滚动？ IT侠客行 Vue.js
    methods:{//禁止滚动stop(){varmo=function(e){e.preventDefault();};document.body.style.overflow=‘hidden’;document.addEventListener(“touchmove”,mo,false);//禁止页面滑动},/取消滑动限制/move(){varmo=function(e){e.preventD
  • el-tree添加滚动条只需一步 momo_via 小Tipsvue.jsjavascript前端
    只需要在el-tree组件外添加el-scrollbar组件，自行设置高度即可
  • el-table实现当内容过多时，el-table显示滚动条，页面不显示滚动条 遇事不决AI解决 vue.jsjavascriptelementui
    估计有不少小伙伴在开发公司的ERP使用el-table都会遇到这么一个问题，就是产品经理提出，页面不出现滚动条，因为不美观。但是当el-table内容过多，超过页面的宽度时候，页面就会有滚动条。那应该如何解决呢?能不能让滚动条出现在el-table的容器中，而不是出现在页面上呢?实现方案就是resize时间结合el-table的max-height属性然后根据页面大小实现自适应定义auto-hei
  • 滚动条出现时不占用 `div` 空间 昕er 前端
    在滚动条出现时不占用div空间，通常可以通过CSS中的scrollbar-gutter属性来控制。以下是实现方式：div{width:100%;height:300px;overflow-y:auto;scrollbar-gutter:stable;/*保证滚动条出现时不会改变布局*/}解释：scrollbar-gutter:stable;：这个属性确保滚动条出现时不会改变div的内容宽度，避免布
  • uniapp 隐藏滚动条 追逐繁星的阿忠
    2020-11-14//在page.json{"pages":[//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path":"pages/index/index","style":{"navigationBarTitleText":"uni-app","app-plus":{"scrollIndicator":
  • python输出文本框_python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方... weixin_39558521 python输出文本框
    PyQt5多行文本框控件QTextEdit简介QTextEdit类是一个多行文本框控件，可以显示多行文本内容，当文本内容超出控件显示范围时，可以显示水平个垂直滚动条，Qtextedit不仅可以用来显示文本还可以用来显示HTML文档QTextEdit类中常用的方法方法描述setPlainText()设置多行文本框的内容toPlainText()返回多行文本框的文本内容setHtml()设置多行文本框
  • jquery swiper插件的用法 A_aspectJ项目开发 JavaWeb技术jquery前端javascript
    一、Swiper插件简介Swiper是一个纯JavaScript打造的滑动特效插件，面向手机、平板电脑等移动终端，同时也支持桌面浏览器。Swiper开源、免费、稳定、使用简单且功能强大，是架构移动终端网站的重要选择。它支持触摸滑动、响应式设计、循环滑动、分页器、滚动条等多种功能，非常适合用于轮播图、滑块导航等场景。以下是一个详细的Swiper插件教程及案例介绍。二、加载插件首先加载插件，需要用到的
  • element el-dialog 滚动条问题 前端小趴菜05 vue.js前端javascript
    elementUI在打开dialog的时，页面右侧会出现滚动条，或是页面宽度会缩小，当关闭dialog后又恢复原样，控制台检查后发现当打开dialog时，body元素会有class=el-popup-parent--hidden的类名，关闭dialog后el-popup-parent--hidden类名消失，这应该就是造成页面出现滚动条或是宽度缩小的原因，查了一下资料发现有两种解决办法一.重写el
  • CSS 自定义滚动条样式 MGLMONSTER
    /*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar{width:10px;height:10px;background-color:#F5F5F5;}/*定义滚动条轨道内阴影+圆角*/::-webkit-scrollbar-track{-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);border-radius:1
  • 要隐藏滚动条，您可以使用CSS中的overflow属性。 软件技术NINI csscss前端
    要隐藏滚动条，您可以使用CSS中的overflow属性。在您的样式文件中添加以下代码：cssCopycode.main-wrapper{overflow:hidden;}.header-menu-container{overflow-y:hidden;}这段CSS代码会将.main-wrapper元素和.header-menu-container元素的滚动条隐藏起来。确保将这段样式代码添加到您的V
  • vue.js 获取当前屏幕的宽度_js获取浏览器和屏幕的各种宽度高度 梦终会碎 vue.js获取当前屏幕的宽度
    一：网页可见区域宽高，不包括工具栏和滚动条(浏览器窗口可视区域大小)1.对于IE9+、chrome、firefox、Opera、Safari：window.innerHeight浏览器窗口的内部高度；window.innerWidth浏览器窗口的内部宽度；2.对于IE8.7.6.5:document.documentElement.clientHeight:表示HTML文档所在窗口的当前高度；do
  • 视口 疯狂的蜗牛Dianna
    提问:如果是pc的网页如何在移动端进行显示?历史:最早期pc端没办法直接查看pc网页，乔布斯为了移动端能访问pc网页，且不出现横向滚动条，发明了视口,视口是默认存在的视口有两个特征1.宽度980px;2.可以缩放;01.png视口是什么?视口是一个介于html网页和手机浏览器之间的一个容器02.png视口的演示代码如下当页面没有设置视口的视口的时候,我们切换到手机模式时-->Document*{m
  • 【js】当页面不断加载变长时如何保证页面滚动条始终置于底部 Pragmatism0220 JavaScriptjavascript前端html
    网上很多博客都在复制粘贴，或者新建一个div对象。简直离谱。事实上这个问题的思路很明确：监听页面长度变化->变了就把滚动条置底。而监听页面高度，或者说监听某个变量的方法，我在找了一圈后，找到了一个令人满意的答案：DetectDocumentHeightChange所以实现如下：//https://stackoverflow.com/questions/14866775/detect-documen
  • FlatList 隐藏滚动条 紫灬楓
    //隐藏水平showsHorizontalScrollIndicator={false}//隐藏垂直showsVerticalScrollIndicator={false}
  • 案例：自定义滚动条 kino2046
    Document.wrap{position:relative;border:1pxsolid#000;width:400px;height:400px;padding-right:10px;overflow:hidden;}.scrollBar{position:absolute;right:0;top:0;width:10px;height:100%;background:#ccc;}.scr
  • vue3-巧用指令 qfxietian 前端vuevue.jsjavascript前端VUE开发语言
    不知道大家在工作中用上vue3了没有，vue3好是好，但是有部分插件并没有更新到3.0的，比如我比较喜欢的自定义滚动条overlayscrollbars，vue3直接使用overlayscrollbars-vue会报错。今天我们主要介绍一下如何使用指令来应用这些插件，自定义滚动条overlayscrollbars以及拖拽sortablejs。directive指令的话这里就不多说了，参考官方文档（
  • vue @scroll监听滚动条事件，解决不生效问题 Long long ago. vue.jsjavascript前端
    1、单纯加@scroll并不生效2、在配置@scroll同时在mounted加上一下方法mounted(){window.addEventListener('scroll',this.loadMore,true)},3、loadMore方法可以自己定义loadMore:function(e){console.log(e)}4、通过以上可以顺利监听滚动条监听事件
  • Visio 不能用上下键移动图形的的问题 ！！！+++ 杂学java
    写文档时遇到了这个奇怪的问题:Visio不能用上下箭头来移动我花的图形，移动的是滚动条。原因：可能不小心按到了screenlock按钮，于是箭头的上下左右箭就变成了移动滚动条.解决方案：再按一下screenlock按钮（ScrLK）即可。如下图：注意：有时该按钮显示ScrLK。
  • html把分页改成滚动条,基于JavaScript实现表格滚动分页 金小夕 JavaScript表格滚动分页动态加载DOM操作
    本文实例为大家分享了js实现表格滚动分页展示的具体代码，供大家参考，具体内容如下DocumentMonthsMoneyJanuary$100January$100January$100January$100January$100January$100January$100January$100January$100January$100CSS:.scroll-body{display:inline
  • DIV + CSS 布局：盒子内容超出宽度时，不换行，以滚动条形式水平滑动 01空间 常见场景解决方案csshtml
    滚动条水平滚动展示溢出内容htmlcss（less）思路html11112222333344445555666677778888css（less）.outer{background-color:#39a9ed;overflow-x:auto;&::-webkit-scrollbar{display:none;}white-space:nowrap;.item{display:inline-bloc
  • 统一思想认识 永夜-极光 思想
    1.统一思想认识的基础,才能有的放矢  原因:    总有一种描述事物的方式最贴近本质,最容易让人理解.    如何让教育更轻松,在于找到最适合学生的方式.          难点在于,如何模拟对方的思维基础选择合适的方式.   &
  • Joda Time使用笔记 bylijinnan javajoda time
    Joda Time的介绍可以参考这篇文章： http://www.ibm.com/developerworks/cn/java/j-jodatime.html 工作中也常常用到Joda Time，为了避免每次使用都查API，记录一下常用的用法：     /** * DateTime变化（增减） */ @Tes
  • FileUtils API eksliang FileUtilsFileUtils API
    转载请出自出处：http://eksliang.iteye.com/blog/2217374 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • 各种新兴技术 不懂事的小屁孩 技术
    1:gradle Gradle 是以 Groovy 语言为基础，面向Java应用为主。基于DSL（领域特定语言）语法的自动化构建工具。 现在构建系统常用到maven工具，现在有更容易上手的gradle， 搭建java环境: http://www.ibm.com/developerworks/cn/opensource/os-cn-gradle/ 搭建android环境： http://m
  • tomcat6的https双向认证 酷的飞上天空 tomcat6
    1.生成服务器端证书 keytool -genkey -keyalg RSA -dname "cn=localhost,ou=sango,o=none,l=china,st=beijing,c=cn" -alias server -keypass password -keystore server.jks -storepass password -validity 36
  • 托管虚拟桌面市场势不可挡 蓝儿唯美
    用户还需要冗余的数据中心，dinCloud的高级副总裁兼首席营销官Ali Din指出。该公司转售一个MSP可以让用户登录并管理和提供服务的用于DaaS的云自动化控制台，提供服务或者MSP也可以自己来控制。 在某些情况下，MSP会在dinCloud的云服务上进行服务分层，如监控和补丁管理。 MSP的利润空间将根据其参与的程度而有所不同，Din说。 “我们有一些合作伙伴负责将我们推荐给客户作为个
  • spring学习——xml文件的配置 a-john spring
    在Spring的学习中，对于其xml文件的配置是必不可少的。在Spring的多种装配Bean的方式中，采用XML配置也是最常见的。以下是一个简单的XML配置文件： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.or
  • HDU 4342 History repeat itself 模拟 aijuans 模拟
    来源：http://acm.hdu.edu.cn/showproblem.php?pid=4342 题意：首先让求第几个非平方数，然后求从1到该数之间的每个sqrt(i)的下取整的和。 思路：一个简单的模拟题目，但是由于数据范围大，需要用__int64。我们可以首先把平方数筛选出来，假如让求第n个非平方数的话，看n前面有多少个平方数，假设有x个，则第n个非平方数就是n+x。注意两种特殊情况，即
  • java中最常用jar包的用途 asia007 java
    java中最常用jar包的用途 jar包用途axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现、查找和实现可插入式接口，提供一些一般类实例化、单件的生命周期管理的常用方法.jaxrpc.jarAxis运行所需要的组件包saaj.jar创建到端点的点到点连接的方法、创建并处理SOAP消息和附件的方法，以及接收和处理SOAP错误的方法.  w
  • ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法 百合不是茶 jsjson编码返回异常
    一:ajax获取自定义Struts框架中的json编码  出现以下 问题:       1,强制flush输出  json编码打印在首页 2, 不强制flush js会解析json 打印出来的是错误的jsp页面   却没有跳转到错误页面 3,  ajax中的dataType的json 改为text 会
  • JUnit使用的设计模式 bijian1013 java设计模式JUnit
    JUnit源代码涉及使用了大量设计模式 1、模板方法模式（Template Method）         定义一个操作中的算法骨架，而将一些步骤延伸到子类中去，使得子类可以不改变一个算法的结构，即可重新定义该算法的某些特定步骤。这里需要复用的是算法的结构，也就是步骤，而步骤的实现可以在子类中完成。   
  • Linux常用命令（摘录） sunjing crondchkconfig
    chkconfig --list   查看linux所有服务 chkconfig --add servicename 添加linux服务 netstat -apn | grep 8080  查看端口占用 env 查看所有环境变量 echo $JAVA_HOME 查看JAVA_HOME环境变量   安装编译器 yum install -y gcc
  • 【Hadoop一】Hadoop伪集群环境搭建 bit1129 hadoop
     结合网上多份文档，不断反复的修正hadoop启动和运行过程中出现的问题，终于把Hadoop2.5.2伪分布式安装起来，跑通了wordcount例子。Hadoop的安装复杂性的体现之一是，Hadoop的安装文档非常多，但是能一个文档走下来的少之又少，尤其是Hadoop不同版本的配置差异非常的大。Hadoop2.5.2于前两天发布，但是它的配置跟2.5.0，2.5.1没有分别。 &nb
  • Anychart图表系列五之事件监听 白糖_ chart
    创建图表事件监听非常简单：首先是通过addEventListener('监听类型',js监听方法)添加事件监听，然后在js监听方法中定义具体监听逻辑。 以钻取操作为例，当用户点击图表某一个point的时候弹出point的name和value，代码如下： <script> //创建AnyChart var chart = new AnyChart(); //添加钻取操作&quo
  • Web前端相关段子 braveCS web前端
    Web标准：结构、样式和行为分离   使用语义化标签 0）标签的语义：使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页结构，抓取重要内容。去样式后也会根据浏览器的默认样式很好的组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。 1）div和span是没有语义的：只是分别用作块级元素和行内元素的区域分隔符。当页面内标签无法满足设计需求时，才会适当添加div
  • 编程之美-24点游戏 bylijinnan 编程之美
    import java.util.ArrayList; import java.util.Arrays; import java.util.HashSet; import java.util.List; import java.util.Random; import java.util.Set; public class PointGame { /**编程之美
  • 主页面子页面传值总结 chengxuyuancsdn 总结
    1、showModalDialog returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口时,用于返回窗口的值 主界面 var sonValue=window.showModalDialog("son.jsp"); 子界面 window.retu
  • [网络与经济]互联网+的含义 comsci 互联网+
          互联网+后面是一个人的名字 = 网络控制系统       互联网+你的名字 =  网络个人数据库       每日提示:如果人觉得不舒服,千万不要外出到处走动,就呆在床上,玩玩手游,更不能够去开车,现在交通状况不
  • oracle 创建视图 with check option daizj 视图vieworalce
    我们来看下面的例子： create or replace view testview as select empno,ename from emp where ename like ‘M%’ with check option; 这里我们创建了一个视图，并使用了with check option来限制了视图。 然后我们来看一下视图包含的结果： select * from testv
  • ToastPlugin插件在cordova3.3下使用 dibov Cordova
        自己开发的Todos应用，想实现“ 再按一次返回键退出程序 ”的功能，采用网上的ToastPlugins插件，发现代码或文章基本都是老版本，运行问题比较多。折腾了好久才弄好。下面吧基于cordova3.3下的ToastPlugins相关代码共享。       ToastPlugin.java package&nbs
  • C语言22个系统函数 dcj3sjt126com cfunction
    C语言系统函数一、数学函数下列函数存放在math.h头文件中Double floor(double num) 求出不大于num的最大数。Double fmod(x, y) 求整数x/y的余数。Double frexp(num, exp); double num; int *exp; 将num分为数字部分（尾数）x和 以2位的指数部分n，即num=x*2n，指数n存放在exp指向的变量中，返回x。D
  • 开发一个类的流程 dcj3sjt126com 开发
    本人近日根据自己的开发经验总结了一个类的开发流程。这个流程适用于单独开发的构件，并不适用于对一个项目中的系统对象开发。开发出的类可以存入私人类库，供以后复用。   以下是开发流程： 1. 明确类的功能，抽象出类的大概结构 2. 初步设想类的接口 3. 类名设计（驼峰式命名） 4. 属性设置(权限设置) 判断某些变量是否有必要作为成员属
  • java 并发 shuizhaosi888 java 并发
    能够写出高伸缩性的并发是一门艺术   在JAVA SE5中新增了3个包 java.util.concurrent java.util.concurrent.atomic java.util.concurrent.locks 在java的内存模型中，类的实例字段、静态字段和构成数组的对象元素都会被多个线程所共享，局部变量与方法参数都是线程私有的，不会被共享。
  • Spring Security（11）——匿名认证 234390216 Spring SecurityROLE_ANNOYMOUS匿名
    匿名认证 目录 1.1     配置 1.2     AuthenticationTrustResolver          对于匿名访问的用户，Spring Security支持为其建立一个匿名的AnonymousAuthenticat
  • NODEJS项目实践0.2[ express,ajax通信...] 逐行分析JS源代码 Ajaxnodejsexpress
      一、前言         通过上节学习，我们已经        ubuntu系统搭建了一个可以访问的nodejs系统，并做了nginx转发。本节原要做web端服务 及 mongodb的存取，但写着写着，web端就
  • 在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值 lhbthanks javahtmlstrutscheckbox
    第一种方法：获取结果String类型 在 Action 中获得的是一个 String 型数据，每一个被选中的 checkbox 的 value 被拼接在一起，每个值之间以逗号隔开(,)。 所以在 Action 中定义一个跟 checkbox 的 name 同名的属性来接收这些被选中的 checkbox 的 value 即可。 以下是实现的代码： 前台 HTML 代码：
  • 003.Kafka基本概念 nweiren hadoopkafka
    Kafka基本概念：Topic、Partition、Message、Producer、Broker、Consumer。 Topic：             消息源（Message）的分类。 Partition：             Topic物理上的分组，一
  • Linux环境下安装JDK roadrunners jdklinux
    1、准备工作 创建JDK的安装目录： mkdir -p /usr/java/   下载JDK，找到适合自己系统的JDK版本进行下载： http://www.oracle.com/technetwork/java/javase/downloads/index.html   把JDK安装包下载到/usr/java/目录，然后进行解压： tar -zxvf jre-7
  • Linux忘记root密码的解决思路 tomcat_oracle linux
    1：使用同版本的linux启动系统，chroot到忘记密码的根分区passwd改密码 　　2：grub启动菜单中加入init=/bin/bash进入系统，不过这时挂载的是只读分区。根据系统的分区情况进一步判断. 　　3: grub启动菜单中加入 single以单用户进入系统. 　　4:用以上方法mount到根分区把/etc/passwd中的root密码去除 　　例如: 　　ro
  • 跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现 xueyou jsonpjquery框架UIhtml5
    postMessage 是 HTML5 新方法，它可以实现跨域窗口之间通讯。到目前为止，只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持，而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样，前者是前端擅长跨域文档数据即时通讯，后者擅长针对跨域服务端数据通讯，p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他