xjw1987524

js+css自定义滚动条(包含滚动事件处理)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>自定义滚动条</title>
    <link rel="stylesheet" href="">
    <style type="text/css">
    #warpper {
        width: 500px;
        height: 300px;
        margin: 200px;
        position: relative;
    }
    #contentWrapper{
    	width: 480px;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;       
    }
    #content {
        width: 480px;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        line-height: 30px;
    }
    #scrollbarp {
        width: 20px;
        background-color: blue;
        height: 300px;
        position: absolute;
        right: 0;
        top: 0;
    }
    #scrollbar {
        width: 20px;
        background-color: red;
        height: 30px;
        position: absolute;
        top: 0px;
        right: 0px;
        cursor: hand;
    }
    </style>
    <script type="text/javascript">
    window.onload = function() {
        var content = document.getElementById("content");
        var scrollbar = document.getElementById("scrollbar");
        var scrollbarp = document.getElementById("scrollbarp");
        var  wrapper = document.getElementById("warpper");
        // contentMaxT--包裹内容的div最大的top值
        var contentMaxT = content.offsetHeight-contentWrapper.offsetHeight;
        var TMax = scrollbarp.offsetHeight - scrollbar.offsetHeight;
        scrollbar.onmousedown = function(e) {
            //记录鼠标的位置，滚动条当前的top
            var e = e || window.event;
            /***
              鼠标按下的时候,记录Y轴偏移距离
              这个距离是一个比较的偏移位置

              当鼠标滑动的时候鼠标变化的位置，减去鼠标按下的时候
              记录的偏移位置，就是滚动条要移动的位置
            ***/
            var disY = e.clientY - this.offsetTop;
            console.log("down: disY : "+disY+"  cy: "+e.clientY+"-----top： "+this.offsetTop);
            if(scrollbar.setCapture){
            	scrollbar.setCapture();
            }
          
            document.onmousemove = function(ev) {            	
                var ev = ev || window.event;
                var T = ev.clientY - disY;
                fixTop(T);
                return false;
            }
            
            document.onmouseup = function() {
                document.onmouseup = document.onmousemove = null;
                if(scrollbar.releaseCapture){
            		scrollbar.releaseCapture();
            	}
            }

            return false;
        }
         function fixTop(T){
         	console.log("T ;;;;: "+T);
         	if (T < 0) {
                    T = 0;
                }
                if (T > TMax) {
                    T = TMax;
                }
                var scale = T / TMax;
                content.style.top = -scale * contentMaxT+"px";
                scrollbar.style.top = T + "px";
         }
        //当鼠标移入的时候对包裹的内容进行鼠标滚轮事件监听,每次加三个像素
        wrapper.onmouseover  =  function(e){
        	 var e = e || window.event;
        	  // e.stopPropgation?e.stopPropgation():e.cancleBubble = true;
        	 //对内容添加鼠标滚轮事件window.onmousewheel=document.onmousewheel
             if((window.navigator.userAgent).indexOf("Firefox")>-1){
             	console.log("火狐");
             	wrapper.addEventListener("DOMMouseScroll",fixScroll,false);
             }else{
             	console.log("非火狐");
             	wrapper.focus();//IE下有时候获取焦点有问题，这个修复
                wrapper.onmousewheel= fixScroll;
             }           
             //火狐浏览器是添加DOMMouseScroll事件--e.detail  3             
             wrapper.onmouseout = function(){
             	 wrapper.onmouseout = wrapper.onmousewheel = null;
             	 if((window.navigator.userAgent).indexOf("Firefox")>-1){
             	 wrapper.removeEventListener("DOMMouseScroll",fixScroll,false);}
             }

              return false; 
        }
       function fixScroll(e){
       	    var e = e || window.event;
       	   var value = e.wheelDelta?e.wheelDelta:-(e.detail);
                          
             console.log("事件监听 value: "+value);
               e.preventDefault?e.preventDefault():e.returnValue = false;
               e.stopPropgation?e.stopPropgation():e.cancleBubble = true;
               var stylesTop = scrollbar.currentStyle?scrollbar.currentStyle["top"]:document.defaultView.getComputedStyle(scrollbar,null)["top"];
               var myT = parseFloat(stylesTop);
               value>0?(myT-=30):(myT+=30);
               fixTop(myT);
       }

    }
    </script>
</head>

<body>
    <div id="warpper">

        <span id="contentWrapper">
        	<span id="content">
            0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
           
</span>
        </span>
        <span id="scrollbarp">
            <span id="scrollbar"></span>
        </span>

    </div>
</body>

</html>

python全栈-前端兆。 python全栈前端
python全栈-前端文章目录HTML标签段落p、换行br、水平线hr图片img路径src超文本链接a超链接之锚点href#id文本有序列表ol无序列表ul自定义列表表格table表格属性单元格合并表单Forminput标签HTML5新增type属性HTML5新增常用属性实体字符块元素与行内元素/内联元素容器元素divHTML5新增布局标签视频音频视频音频sourceHTML5新增标签CSSCSS
PyInstaller全平台打包深度解析：资源打包与路径兼容终极方案燃灯工作室 PyInstaller python
一、典型问题场景分析案例现象：PyQt5开发的GUI程序本地运行正常，但打包后出现以下问题：程序图标丢失CSS样式表失效图片资源无法加载配置文件读取失败问题本质：PyInstaller默认不会打包非代码资源文件，且打包后程序的运行路径发生变化，导致资源文件路径失效二、底层原理剖析PyInstaller打包机制：创建临时解压目录（sys._MEIPASS）将资源文件解压到临时目录单文件模式运行时自动
前端知识-CSS(二) 冉成未来 Web 前端 css
文章目录CSS尺寸CSSDisplay(显示)与Visibility（可见性）CSSDisplay-块和内联元素display可设置的值CSSPosition(定位)重叠的元素CSSOverflowoverflow属性值：CSSFloat(浮动)CSS对齐元素居中对齐文本居中对齐图片居中对齐左右对齐-使用定位方式左右对齐-使用float方式垂直居中对齐-使用padding垂直居中-使用line-h
Tailwind CSS 学习笔记(二) SSHSHLSH css 前端
一、辅助工具在vscode中使用TailwindCSS，可安装官方提供的TailwindCSSIntelliSense插件，该插件可以提供自动补全、语法高亮及检查功能。二、TailwindCSS中的基本单位CSS中常见单位1、绝对单位绝对单位的值固定，不依赖其他元素或设备特性，通常用于打印或固定尺寸场景：像素(px):表示屏幕上的物理像素点，是绝对单位中最常用的。但实际物理尺寸受屏幕分辨率（dpi
Tailwind CSS 学习笔记(一) SSHSHLSH 前端UI 前端 css
一、简介TailwindCSS是一个工具优先的CSS框架，只需书写HTML代码，无需书写CSS，即可快速构建美观的网站。二、优点1、简洁、规整，避免了随意取类名TailwindCSS的工具类(Utilityclasses)能够为你提供一套约束系统，避免让你的样式表中出现随意的取值。它让颜色、间距、排版、阴影以及一切取值保持一致，并最终形成一个精心构建的设计系统2、灵活性强、你所想地就能实现由于Ta
翻译：高级跨浏览器Flexbox布局本是后山人 flex flexbox 兼容布局跨浏览器
原文：https://dev.opera.com/articles/advanced-cross-browser-flexbox/介绍CSS灵活盒模块级3-简称Flexbox-它为web开发带来了很多的动力和一些非常令人兴奋的可能性，使我们能够在一些复杂的站点布局很容易和迅速，摒弃一些不合逻辑的hacks和组装件我们传统上使用。我在文章Flexbox中处理了Flexbox的基础知识：快速布局必杀技
CSS3的弹性布局人生的方向随自己而走 2023年前端项目空间 2022年Java空间 HTML5+CSS css3 css 前端
CSS3弹性盒子(FlexBox)弹性盒子是CSS3的一种新的布局模式。CSS3弹性盒（FlexibleBox或flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。官网地址学习路径:CSS3弹性盒子-JavaScript中文网-JavaScript教程
前端面试题100题：问答精选与简明解析薛飞之前端 react.js javascript 前端框架
HTML5有哪些新特性？语义标签（如，），多媒体标签（如，），离线存储（localStorage，sessionStorage），新的表单控件（如，）。CSS3有哪些新特性？边框圆角（border-radius），阴影（box-shadow，text-shadow），渐变（linear-gradient，radial-gradient），弹性盒模型（flexbox），媒体查询。JavaScript
TailwindCss的基本使用 SuppperSA css 学习前端 css
目录关于tailwindCss感受在了解tailwindCss之前先说一下响应式开发介绍基本实现下面介绍tailwindCss的基本使用写法预设断点响应式开发设计关于tailwindCss感受在没接触tailwindCss之前都是使用命名css，对于css的起名对于我来说真是浪费脑细胞，只能无脑的遵循BEM命名方法。我觉得写css就应该随心所欲，不应该把过多的时间放在css命名上，但是在接触到ta
新型蜜罐有哪些？未来方向如何？网安技术分享安全 wireshark 测试工具网络网络安全
基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css"rel="stylesheet"/>href="https://csdnimg.cn/release/blogv2/dist/mdedi
html+css语言例题,前端HTML+CSS笔试题面试题周咕嘟 html+css语言例题
前言前端的面试和学习都是不可或缺的事情，在这里收集一些高频面试题，供自己现在和以后查阅和查缺补漏的同时，也希望对小伙伴有所帮助。HTML1、HTML语义化的理解1、用正确的标签做正确的事情！2、HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；3、在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。4、搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。5
web前端期末大作业：网站设计与实现——咖啡网站HTML+CSS+JavaScript web学生网页设计 web前端 html网页模版 html网页期末作业 javascript web课程设计与制作 web期末大作业
精彩专栏推荐✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主作者主页:【主页——获取更多优质源码】web前端期末大作业：【毕设项目精品实战案例(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】超炫酷的Echarts大屏可视化源码：【echarts大屏展示大数据平台可视化(150套)】免费且实用的WEB前端学习指南：【web前端零基础到高级学习视频教程120G干
用HTML+CSS仿网易云音乐网站(6个页面) (1) web学生网页设计 html css 前端
精彩专栏推荐文末获取联系✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主作者主页:【主页——获取更多优质源码】web前端期末大作业：【毕设项目精品实战案例(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】超炫酷的Echarts大屏可视化源码：【Echarts大屏展示大数据平台可视化(150套)】HTML+CSS+JS实例代码：【️HTML+CSS+JS实例代码
CSS——浅谈浮动（Float）,清除（Clear）「已注销」 CSS css
浮动是CSS较常见的布局手段之一。为什么要使用浮动？使用浮动后会产生哪些变化与问题？又该如何解决问题？为什么使用浮动？浮动出现的初期仅是为了解决文字环绕浮动元素问题（文字不会被浮动元素覆盖，自动分布在浮动元素周围）,逐渐的浮动慢慢应用到解决多个块级元素同行出现的问题，虽然我们可以通过将块级元素设置为display：inline-block使多个块元素同行，但是该方式不能控制元素的位置，所以实现元素
网络安全入门教程（非常详细）从零基础入门到精通，看完这一篇就够了白帽黑客坤哥 web安全安全网络安全转行 python
href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css"rel="stylesheet"/>href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_v
Service Worker 实现离线应用思路诚诚程程成前端前端
1背景本地运行一个vue项目，界面如下：使用ServiceWorker对其进行缓存，预期在停止运行项目时（模拟离线场景）也能够正常访问项目2缓存的资源分析检查network，浏览器访问：http://localhost:5173/时，获取的资源需要包含如下，才能正常展示界面：HTML文件JS文件CSS文件3index.html内容ViteAppCardTitleThisisasimplecardw
Iptv机顶盒之epg界面h5开发注意事项莱城意乱 tv html5 javascript html 智能电视
发现机顶盒上内置的浏览器好像都是阉割版的，很多基本的样式或者js写法用不了。以下为注意事项（不足之处还望指点，谢谢）：一般机顶盒内置的浏览器都是ie8一下的版本浏览器的分辨率都是1280*720不允许出现css新特性，单位都是px，最好用绝对定位position,不用考虑电视屏幕尺寸的问题能用的css属性：position、width、height、top、right、bottom、left、fo
（UI自动化测试web端）第二篇：元素定位的方法_css定位ID选择器 _庄@雅@丽 UI 自动化测试 css css元素定位 id选择器
看代码里的【find_element_by_css_selector()】()里的表达式怎么写？文章介绍了第一种写法id选择器，其实XPath元素定位要比CSS好用，原因是CSS无法使用下标（工作当中也是常用的xpath），但CSS定位速度比XPath快，原因是xpath是扫描整个文档的，而CSS不是。1、什么是CSS定位？css是可以用来在selenium中定位元素的。在selenium中推荐使
前端面试题总结(PS:尊重劳动成果拿或者要原笔记记得滴滴) 掉头发的前端酒窝妹妹前端vue js 前端
前端优化性能的方法压缩字体文件使用fontmin-webpack插件对字体文件进行压缩减少HTTP请求使用字体图标iconfont代替图片图标使用webp格式的图片减少重绘重排使用事件委托使用WebWorkershtml+css1.HTML和CCS3新增那些内容？广义上的html5指的是最新一代前端开发技术的总称，包括html5，CSS3，新增的webAPI。Html中新增了：header,foo
html+css转pdf,HTML转成PDF的4个方法介绍柔粟 html+css转pdf
在本文中，我将展示如何使用Node.js、Puppeteer、headlessChrome和Docker从样式复杂的React页面生成PDF文档。背景：几个月前，一个客户要求我们开发一个功能，用户可以得到PDF格式的React页面内容。该页面基本上是患者病例的报告和数据可视化结果，其中包含许多SVG。另外还有一些特殊的请求来操纵布局，并对HTML元素进行一些重新排列。因此与原始的React页面相比
（前端开发）网页制作案例 A宝呀 html javascript css
HTML（index.html）A宝学成在线首页课程职业规划A宝前端开发后端开发移动开发人工智能商业预测云计算&大数据运维&测试UI设计产品我的课程表数据可视化课程正在学习-echarts使用步骤Vue3医疗项目课程正在学习-认识组合式APIReact核心技术课程正在学习-rudex配合TS使用全部课程精品推荐HTMLCSSJavaScriptNode.jsAjaxVue2.0Vue3.0Type
PHP 应用&留言板功能&超全局变量&数据库操作&第三方插件引用我最厉害。，。 php 数据库开发语言
服务器用来处理脚本数据库用来存储数据#开发环境：DW+PHPStorm+PhpStudy+NavicatPremiumDW:HTML&JS&CSS开发PHPStorm:专业PHP开发IDEPhpStudy：ApacheMYSQL环境NavicatPremium:全能数据库管理工具#数据导入-mysql架构&库表列1、数据库名，数据库表名，数据库列名2、数据库数据，格式类型，长度，键等#数据库操作-
Java实习生面试题(2025.3.23 be) suuijbd spring vue mybatis 面试 vue spring mybatis
一、v-if与v-show的区别`v-show`和`v-if`都是Vue中的条件渲染指令，它们的主要区别在于渲染策略：`v-if`会根据条件决定是否编译元素，而`v-show`则始终编译元素，只是通过改变CSS的`display`属性来控制显示与隐藏。二、mybatis-plus分页插件的原理拦截查询：分页插件通过拦截SQL查询，在执行前修改SQL，自动添加分页条件，例如LIMIT和OFFSET。
微信小程序「 Skyline-Worklet-ios-Andorid 」项目实战-05 像素粒子微信小程序小程序
一、抽屉慨述首先抽屉组件滑动右显示时我们不仅仅只是滑动iDrawer组件当前页面也需要向右滑动，所以这一章，开发页面滑动的逻辑。首先在common.wxss上写一个公用的页面容器样式。再分别在首页、分类、探索页面最外层添加class="tab-page"的公用css。/*抽屉页面*/.tab-page{position:absolute;top:0;left:0;width:100vw;heigh
前端开发：这就是终点吗？前端javascript
ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读让我们重新回到2021年后远程办公风潮兴起的日子，那时候，程序员岗位炙手可热。机会遍地都是，你甚至只需参加少量培训，通过面试后便能轻松收获年薪超15万的工作，还有余暇拍摄一段《程序员的一天》上传网络。经过短短一年左右的培训，你便踏上了年薪六位数的职业道路——那时候，当程序员似乎是一个人人羡慕的理想职业。然而
CSS中的transform属性有哪些值？并分别描述它们的作用 DTcode7 HTML网站开发 #前端基础入门三大核心之CSS HTML CSS web css3 网页开发
CSS中的transform属性有哪些值？并分别描述它们的作用transform属性的基本概念基本语法示例一：平移变换（translate）代码解释示例二：缩放变换（scale）代码解释示例三：旋转变换（rotate）代码解释示例四：倾斜变换（skew）代码解释示例五：矩阵变换（matrix）代码解释示例六：3D变换（translate3d,rotateX,rotateY,rotateZ,scal
CSS中的z-index属性有什么作用 DTcode7 HTML网站开发 #前端基础入门三大核心之CSS HTML CSS web css3 网页开发
CSS中的z-index属性有什么作用z-index属性的基本概念堆叠上下文基础规则示例一：基本的z-index应用示例二：z-index与元素遮挡示例三：z-index与父元素的关系示例四：动态调整z-index实际工作开发中的使用技巧在网页设计中，元素的堆叠顺序（stackingorder）对于创建复杂的布局至关重要。CSS中的z-index属性便是用于控制这些元素在页面上的层级关系。通过合理
WEB前端面试题—20170405 xyphf_和派孔明 web前端面试题
1、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？行内元素：abspanimginputselectstrong块级元素:divulollidldtddh1h3h4p空元素:2、清除浮动的几种方式，各自的优缺点。方法一：结尾处加空div标签clear:both原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度优点：简单、代码少、浏览器支持
使用html5-qrcode 扫描二维码(vue3) vayne_1 vue html5 前端 html
步骤：1.安装库html5-qrcode:npmihtml5-qrcode2.开启https(这里安装@vitejs/plugin-basic-ssl模拟)//vite.config.jsimportbasicSslfrom'@vitejs/plugin-basic-ssl'exportdefaultdefineConfig({plugins:[vue(),basicSsl()],//这里写入插件
web面试题——第一篇 Southern Wind AJAX 前端 javascript html
目录1、html文档中怎么区分节点对象的节点类型2、关键字或保留字3、CSS有三种基本的定位机制4、link和@import的区别5、display与visibility的区别6、数组去重7、以下代码中的返回值为8、以下代码中的返回值为1、html文档中怎么区分节点对象的节点类型答：nodeType2、关键字或保留字答：关键字是在JavaScript已经被规定为具有特殊功能的字。这些关键字可用于表
html 周华华 html
js 1，数组的排列 var arr=[1,4,234,43,52,]; for(var x=0;x<arr.length;x++){ for(var y=x-1;y<arr.length;y++){ if(arr[x]<arr[y]){ &
【Struts2 四】Struts2拦截器 bit1129 struts2拦截器
Struts2框架是基于拦截器实现的，可以对某个Action进行拦截，然后某些逻辑处理，拦截器相当于AOP里面的环绕通知，即在Action方法的执行之前和之后根据需要添加相应的逻辑。事实上，即使struts.xml没有任何关于拦截器的配置，Struts2也会为我们添加一组默认的拦截器，最常见的是，请求参数自动绑定到Action对应的字段上。 Struts2中自定义拦截器的步骤是：
make:cc 命令未找到解决方法 daizj linux 命令未知 make cc
安装rz sz程序时，报下面错误： [root@slave2 src]# make posix cc -O -DPOSIX -DMD=2 rz.c -o rz make: cc：命令未找到 make: *** [posix] 错误 127 系统：centos 6.6 环境：虚拟机错误原因：系统未安装gcc，这个是由于在安
Oracle之Job应用周凡杨 oracle job
最近写服务，服务上线后，需要写一个定时执行的SQL脚本，清理并更新数据库表里的数据，应用到了Oracle 的 Job的相关知识。在此总结一下。一：查看相关job信息 1、相关视图 dba_jobs all_jobs user_jobs dba_jobs_running 包含正在运行
多线程机制朱辉辉33 多线程
转至http://blog.csdn.net/lj70024/archive/2010/04/06/5455790.aspx 程序、进程和线程：程序是一段静态的代码，它是应用程序执行的蓝本。进程是程序的一次动态执行过程，它对应了从代码加载、执行至执行完毕的一个完整过程，这个过程也是进程本身从产生、发展至消亡的过程。线程是比进程更小的单位，一个进程执行过程中可以产生多个线程，每个线程有自身的
web报表工具FineReport使用中遇到的常见报错及解决办法（一）老A不折腾 web报表 finereport java报表报表工具
FineReport使用中遇到的常见报错及解决办法（一）这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。 1、address pool is full：含义：地址池满，连接数超过并发数上
mysql rpm安装后没有my.cnf 林鹤霄没有my.cnf
Linux下用rpm包安装的MySQL是不会安装/etc/my.cnf文件的，至于为什么没有这个文件而MySQL却也能正常启动和作用，在这儿有两个说法，第一种说法，my.cnf只是MySQL启动时的一个参数文件，可以没有它，这时MySQL会用内置的默认参数启动，第二种说法，MySQL在启动时自动使用/usr/share/mysql目录下的my-medium.cnf文件，这种说法仅限于r
Kindle Fire HDX root并安装谷歌服务框架之后仍无法登陆谷歌账号的问题 aigo root
原文：http://kindlefireforkid.com/how-to-setup-a-google-account-on-amazon-fire-tablet/ Step 4: Run ADB command from your PC On the PC, you need install Amazon Fire ADB driver and instal
javascript 中var提升的典型实例 alxw4616 JavaScript
// 刚刚在书上看到的一个小问题,很有意思.大家一起思考下吧 myname = 'global'; var fn = function () { console.log(myname); // undefined var myname = 'local'; console.log(myname); // local }; fn() // 上述代码实际上等同于以下代码 m
定时器和获取时间的使用百合不是茶时间的转换定时器
定时器:定时创建任务在游戏设计的时候用的比较多 Timer();定时器 TImerTask();Timer的子类由 Timer 安排为一次执行或重复执行的任务。定时器类Timer在java.util包中。使用时，先实例化，然后使用实例的schedule(TimerTask task, long delay)方法，设定
JDK1.5 Queue bijian1013 java thread java多线程 Queue
JDK1.5 Queue LinkedList： LinkedList不是同步的。如果多个线程同时访问列表，而其中至少一个线程从结构上修改了该列表，则它必须保持外部同步。（结构修改指添加或删除一个或多个元素的任何操作；仅设置元素的值不是结构修改。）这一般通过对自然封装该列表的对象进行同步操作来完成。如果不存在这样的对象，则应该使用 Collections.synchronizedList 方
http认证原理和https bijian1013 http https
一.基础介绍在URL前加https://前缀表明是用SSL加密的。你的电脑与服务器之间收发的信息传输将更加安全。 Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。 http和https使用的是完全不同的连接方式，用的端口也不一样,前者是80，后
【Java范型五】范型继承 bit1129 java
定义如下一个抽象的范型类，其中定义了两个范型参数，T1，T2 package com.tom.lang.generics; public abstract class SuperGenerics<T1, T2> { private T1 t1; private T2 t2; public abstract void doIt(T
【Nginx六】nginx.conf常用指令(Directive) bit1129 Directive
1. worker_processes 8; 表示Nginx将启动8个工作者进程，通过ps -ef|grep nginx,会发现有8个Nginx Worker Process在运行 nobody 53879 118449 0 Apr22 ? 00:26:15 nginx: worker process
lua 遍历Header头部 ronin47 lua header 遍历　
local headers = ngx.req.get_headers() ngx.say("headers begin", "<br/>") ngx.say("Host : ", he
java-32.通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小(两数组的差最小)。 bylijinnan java
import java.util.Arrays; public class MinSumASumB { /** * Q32.有两个序列a,b，大小都为n,序列元素的值任意整数，无序. * * 要求：通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小。 * 例如: * int[] a = {100,99,98,1,2,3
redis 开窍的石头 redis
在redis的redis.conf配置文件中找到# requirepass foobared 把它替换成requirepass 12356789 后边的12356789就是你的密码打开redis客户端输入config get requirepass 返回 redis 127.0.0.1:6379> config get requirepass 1) "require
[JAVA图像与图形]现有的GPU架构支持JAVA语言吗？ comsci java语言
无论是opengl还是cuda，都是建立在C语言体系架构基础上的，在未来，图像图形处理业务快速发展，相关领域市场不断扩大的情况下，我们JAVA语言系统怎么从这么庞大，且还在不断扩大的市场上分到一块蛋糕，是值得每个JAVAER认真思考和行动的事情
安装ubuntu14.04登录后花屏了怎么办 cuiyadll ubuntu
这个情况，一般属于显卡驱动问题。可以先尝试安装显卡的官方闭源驱动。按键盘三个键：CTRL + ALT + F1 进入终端，输入用户名和密码登录终端：安装amd的显卡驱动 sudo apt-get install fglrx 安装nvidia显卡驱动 sudo ap
SSL 与数字证书的基本概念和工作原理 darrenzhu 加密 ssl 证书密钥签名
SSL 与数字证书的基本概念和工作原理 http://www.linuxde.net/2012/03/8301.html SSL握手协议的目的是或最终结果是让客户端和服务器拥有一个共同的密钥，握手协议本身是基于非对称加密机制的，之后就使用共同的密钥基于对称加密机制进行信息交换。 http://www.ibm.com/developerworks/cn/webspher
Ubuntu设置ip的步骤 dcj3sjt126com ubuntu
在单位的一台机器完全装了Ubuntu Server，但回家只能在XP上VM一个，装的时候网卡是DHCP的，用ifconfig查了一下ip是192.168.92.128,可以ping通。转载不是错： Ubuntu命令行修改网络配置方法 /etc/network/interfaces打开后里面可设置DHCP或手动设置静态ip。前面auto eth0，让网卡开机自动挂载. 1. 以D
php包管理工具推荐 dcj3sjt126com PHP Composer
http://www.phpcomposer.com/ Composer是 PHP 用来管理依赖（dependency）关系的工具。你可以在自己的项目中声明所依赖的外部工具库（libraries），Composer 会帮你安装这些依赖的库文件。中文文档入门指南下载安装包列表 Composer 中国镜像
Gson使用四（TypeAdapter） eksliang json gson Gson自定义转换器 gsonTypeAdapter
转载请出自出处：http://eksliang.iteye.com/blog/2175595 一.概述 Gson的TypeAapter可以理解成自定义序列化和返序列化二、应用场景举例例如我们通常去注册时（那些外国网站），会让我们输入firstName，lastName,但是转到我们都
JQM控件之Navbar和Tabs gundumw100 html xml css
在JQM中使用导航栏Navbar是简单的。只需要将data-role="navbar"赋给div即可： <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active&qu
利用归并排序算法对大文件进行排序 iwindyforest java 归并排序大文件分治法 Merge sort
归并排序算法介绍，请参照Wikipeida zh.wikipedia.org/wiki/%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F 基本思想：大文件分割成行数相等的两个子文件，递归（归并排序）两个子文件，直到递归到分割成的子文件低于限制行数低于限制行数的子文件直接排序两个排序好的子文件归并到父文件直到最后所有排序好的父文件归并到输入
iOS UIWebView URL拦截啸笑天 UIWebView
本文译者：candeladiao，原文：URL filtering for UIWebView on the iPhone说明：译者在做app开发时，因为页面的javascript文件比较大导致加载速度很慢，所以想把javascript文件打包在app里，当UIWebView需要加载该脚本时就从app本地读取，但UIWebView并不支持加载本地资源。最后从下文中找到了解决方法，第一次翻译，难免有
索引的碎片整理SQL语句 macroli sql
SET NOCOUNT ON DECLARE @tablename VARCHAR (128) DECLARE @execstr VARCHAR (255) DECLARE @objectid INT DECLARE @indexid INT DECLARE @frag DECIMAL DECLARE @maxfrag DECIMAL --设置最大允许的碎片数量,超过则对索引进行碎片
Angularjs同步操作http请求with $promise qiaolevip 每天进步一点点学习永无止境 AngularJS 纵观千象
// Define a factory app.factory('profilePromise', ['$q', 'AccountService', function($q, AccountService) { var deferred = $q.defer(); AccountService.getProfile().then(function(res) {
hibernate联合查询问题 sxj19881213 sql Hibernate HQL 联合查询
最近在用hibernate做项目，遇到了联合查询的问题，以及联合查询中的N+1问题。针对无外键关联的联合查询，我做了HQL和SQL的实验，希望能帮助到大家。（我使用的版本是hibernate3.3.2） 1 几个常识：（1）hql中的几种join查询，只有在外键关联、并且作了相应配置时才能使用。（2）hql的默认查询策略，在进行联合查询时，会产
struts2.xml wuai struts
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache

js+css自定义滚动条(包含滚动事件处理)

你可能感兴趣的:(css)