top | 易学教程

用JavaScript实现图片剪切效果

阅读更多关于用JavaScript实现图片剪切效果

学会如何获取鼠标的坐标位置以及监听鼠标的按下、拖动、松开等动作事件，从而实现拖动鼠标来改变图片大小。还可以学习css中的clip属性。一、CSS实现图片不透明及裁剪效果。图片剪切三层结构 1、第一层opacity,给图层设置透明度 2、第二层clip，clip属性：对图片进行裁剪，实现图像的一部分显示，其他部分进行隐藏 3、第三层选取框absolute（与第二层重叠的），包括八个触点的效果html代码： 1 <div id="box"> 2 <img src="img/1.jpg" id="img1" /> 3 <img src="img/1.jpg" id="img2" /> 4 <div id="main"> 5 <div class="Divmin up-left"></div> 6 <div class="Divmin up"></div> 7 <div class="Divmin up-right"></div> 8 <div class="Divmin right"></div> 9 <div class="Divmin right-down"></div> 10 <div class="Divmin down"></div> 11 <div class="Divmin left-down"></div> 12 <div class="Divmin left"><

记SQL SERVER一次诡异的优化

阅读更多关于记SQL SERVER一次诡异的优化

　　最近做的项目快上线了，在做了一次压力测试后发现了不少问题，基本都是因为数据量达到一定级别时（预测系统上线10年后的数据量）SQL查询超时，其中有些是因为索引缺失、有些是因为写法不好，这些在有经验的人眼里一眼就能看出问题，于是我解决起来都很快。　　但其中有一个无比诡异，SQL很简单，但执行起来都超过1分钟，而我们的理想目标是1秒，差距很大。　　先简单写下这个SQL的样子： SELECT TOP 10 T1.C1, T1.C2, T1.C3 FROM TABLE_1 T1 JOIN TABLE_2 T2 ON T1.C1 = T2.C1 WHERE T2.C2 NOT IN ('V1', 'V2', 'V3') 　　首先看到这么简单，速度慢的问题比较容易出现在NOT IN，这个不能索引速度很慢，但需求上的原因，要么我们换其他方式实现NOT IN，耗费时间去设计重构，但当天就要发版本时间不允许。SQL就这么简单，索引都OK，问题出在哪里呢？　　就不拐弯抹角了，我尝试去掉了TOP 10，奇迹出现了，执行1秒都不要就完成了！TOP 10？尼肿么辣！！　　问题找到了，原因还不明，立刻想解决方案，第一顺位想到的就是不做TOP 10都取出来程序在内存处理TOP 10，当然这个方案很让人不爽！　　第二就是网上找找资料，发现一个帖子说TOP有时候会影响SQL的优化计划芸芸

JS 九宫格算法用原生js实现

阅读更多关于 JS 九宫格算法用原生js实现

九宫格算法核心：利用控件索引index计算出控件所在的行数和列数；利用控件计算出left距离；利用控件计算出top距离；写特效时需要用到定位公式：行 row=parseInt(i/cols); 列 col=parseInt(i%cols); i是当前的盒子，cols是总列数，代码示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>九宫格</title> <style> *{ padding: 0; margin: 0; } #top{ margin-top:30px; margin-bottom: 20px; margin-left:20px; } #bottom{ position: relative; } #bottom .content{ width: 220px; height: 360px; background-color: skyblue; margin: 0 0 15px 15px; padding: 5px; } .content img{ width: 220px; height: 308px; } #bottom .content p:last-child{ font-size: 15px; color: red; } </style> </head>

Python学习 Day 041 - css 盒模型

阅读更多关于 Python学习 Day 041 - css 盒模型

主要内容 1.盒模型 2.浮动 1.盒模型 (1)盒模型的属性 width : 内容的宽度 height : 内容的宽度 padding : 内边距,边框到内容的距离 border : 边框,就是指的盒子的宽度 margin : 外边距,盒子边框到附近最近盒子的距离 <title>Title</title> <style> .box{ width: 200px; height:200px; padding:50px; background-color:red; border: 1px solid yellow; margin: 30px; } </style> </head> <body> <div class="box">倚天屠龙记</div> </body> 盒模型代码 (2)盒模型的计算如果保证盒模型不变,当加padding,就要对盒模型的宽或者高减,保证盒模型的不变通过padding能调整子内容的位置,对于padding来说,通常描述的是父子之间的距离 (3)padding(内边距) padding：就是内边距的意思，它是边框到内容之间的距离另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域 padding的设置 <title>Title</title>

Jquery遮罩插件，想罩哪就罩哪！

阅读更多关于 Jquery遮罩插件，想罩哪就罩哪！

一前言在项目开发时发现没有一个用起来爽一点的遮罩插件，看起来觉得不难好吧那就利用空闲时间，自己折腾一个吧，也好把jquery再温习一下，需要的功能如下　　1 可以全屏遮用于提交数据时　　2 局部遮，用于重复提交，只遮提交按钮，此功能当时在CSDN的登录中看到过，当时觉得还不错 3 遮罩上的提示文字可自己配置，因为操作的业务场景不一样，提示的信息肯定也会不一样 4 遮罩图片可配置， 5 信息提示层大小可配置大致功能就如上几点，然后就是折腾js了，蹭蹭蹭~~~~ 然后就出来了~ 先上效果全局遮罩效果局部遮罩二源码相关需要了解的知识点大致如下 1 z-index属性 2 position属性 3 浏览器窗口与document 高宽的计算 4 jquery 插件格式 5 css 滤镜效果不多说了上代码！为了减少引入的文件索性将css直接写在js中了 /************************** *Desc:提交操作时遮罩 *Argument:type=0 全屏遮 1局部遮 *Author:Zery-Zhang *Date:2014-09-18 *Version:1.0.0 **************************/ ; (function ($) { $.fn.jqLoading =function(option) { var

Linux查看CPU和内存使用情况

阅读更多关于 Linux查看CPU和内存使用情况

top命令　　top命令是Linux下常用的性能分析工具，能够实时显示系统中各个进程的资源占用状况，类似于Windows的任务管理器。　　运行 top 命令后，CPU 使用状态会以全屏的方式显示，并且会处在对话的模式 -- 用基于 top 的命令，可以控制显示方式等等。退出 top 的命令为 q （在 top 运行中敲 q 键一次）。　　内容解释：第一行（top）：　　15:24:36 系统当前时刻　　14 days 系统启动后到现在的运作时间　　3 users 当前登录到系统的用户，更确切的说是登录到用户的终端数 -- 同一个用户同一时间对系统多个终端的连接将被视为多个用户连接到系统，这里的用户数也将表现为终端的数目　　load average 当前系统负载的平均值，后面的三个值分别为1分钟前、5分钟前、15分钟前进程的平均数，一般的可以认为这个数值超过 CPU 数目时，CPU 将比较吃力的负载当前系统所包含的进程第二行（Tasks）：　　288 total 当前系统进程总数　　1 running 当前运行中的进程数　　287 sleeping 当前处于等待状态中的进程数　　0 stoped 被停止的系统进程数　　0 zombie 僵尸进程数第三行（Cpus）：　　7.3% us 用户空间占用CPU百分比　　2.0% sy

SQL开发与数据库管理笔记

阅读更多关于 SQL开发与数据库管理笔记

简介： SQL开发与数据库管理笔记，看过的都说好！原创：丶平凡世界文章链接：https://mp.weixin.qq.com/s/Y9TmoHOyh7To7jUrMulvEw 一、开发管理篇 1.按姓氏笔画排序 Select * From TableNameOrder By CustomerNameCollate Chinese_PRC_Stroke_ci_as 2.数据库加密: select encrypt('原始密码')select pwdencrypt('原始密码')select pwdcompare('原始密码','加密后密码') = 1--相同；否则不相同select pwdencrypt('原始密码')select pwdcompare('原始密码','加密后密码') = 1--相同；否则不相同 3.取回表中字段: declare @list varchar(1000),@sql nvarchar(1000)select @list=@list+','+b.namefrom sysobjects a,syscolumns bwhere a.id=b.id and a.name='表A'set @sql='select '+right(@list,len(@list)-1)+' from 表A' exec (@sql) 4.查看硬盘分区: EXEC master.

后缀数组小结

阅读更多关于后缀数组小结

目录原理介绍倍增算法基数排序数组含义代码解释 height 数组的功能例题讲解洛谷P3809【模板】后缀排序 BZOJ : 1717: [Usaco2006 Dec]Milk Patterns 产奶的模式 BZOJ : 4566: [Haoi2016]找相同字符前言：Orz ShichengXiao 冬令营的时候就早解决了字符串算法还是不能随意放弃啊要认真学了！！这个算法常用于解决字符串上的 $\mathrm{LCP}$ 问题和一些字符串匹配的问题这个算法思维难度不是很大但是代码难度还是有一些的想学好这个算法一定要牢牢的记住各个数组的含义不然容易弄混原理介绍还是先简单介绍一下原理吧：后缀数组就是将一个字符串的后缀全部进行排序然后把下标存入一些数组里用那些数组来进行字符串的一些常用操作为了后缀排序我们常常使用 $O(n \log n)$ 的倍增算法（而不用 $O(n)$ 的 $\mathrm{DC3}$ 因为它常数和空间大，并且十分不好写）倍增算法那接下来介绍一下倍增算法qwq 考虑这样一个小问题我们比较任意两后缀的字典序大小有没有什么快速比较的方法？当然有就是预处理出他们的一个前缀和后缀的大小关系然后我们就能用另外两个来比较了。倍增的思路大概就是如此我们从小到大每次长度乘二

idea新手日记

阅读更多关于 idea新手日记

重要快捷键： alt+7：查看前端大纲 ctrl+alt+t:快捷启动包围 Ø Top #10切来切去： Ctrl+Tab Ø Top #9选你所想： Ctrl+W Ø Top #8代码生成： Template/Postfix +Tab Ø Top #7发号施令： Ctrl+Shift+A Ø Top #6无处藏身： Shift+Shift Ø Top #5自动完成： Ctrl+Shift+Enter Ø Top #4创造万物： Alt+Insert 太难割舍，前三名并列吧！ Ø Top #1智能补全： Ctrl+Shift+Space Ø Top #1自我修复： Alt+Enter Ø Top #1重构一切： Ctrl+Shift+Alt+T 来源： https://www.cnblogs.com/ljq2622/p/10825068.html

CSS Positioning(定位)

阅读更多关于 CSS Positioning(定位)

Positioning(定位) CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法. 有四种不同的定位方法。 Static 定位 HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。 Fixed 定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：实例 p.pos_fixed { position:fixed; top:30px; right:5px; } 尝试一下 » 注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持. Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。 Relative 定位相对定位元素的定位是相对其正常位置。实例 h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; } 尝试一下 » 可以移动的相对定位元素的内容和相互重叠的元素

订阅 top