- 博客(46)
- 收藏
- 关注
RSS订阅原创 数字图像处理——数字图像基础
2.1视觉感知要素韦伯比：ΔIc/I I表示背景光照强度，ΔI表示闪烁光照强度，ΔIc表示50%时间可辨别闪烁是的增量。韦伯比表示亮度辨别能力。马赫带：不同灰度区域边界处感知产生的亮度变化，该区域为马赫带同时对比：眼睛对同一灰度图像在不同背景下感知的亮度变化2.2光和电磁波谱λ=c/νλ:波长，ν:频率 c:光速（2.998*10^8）E=hν 电磁波能量，h普朗克常数可见光：波长0.43μm(紫色）——0.79μm（红色）辐射：从光源流出的总能量，单位 W 瓦特...
2021-02-06 17:01:21
683
原创 Vue中多个元素或组件的过度
1、多个元素的过度对于原生标签可以使用v-if/v-else.当相同标签名的元素切换时，需要通过key特性设置唯一的值来标记，如下例：<style> .v-enter, .v-leave-to{ opacity: 0; } .v-enter-active, .v-leave-active{ ...
2018-09-20 21:50:10
1516
原创 Vue 动画特效
1、过渡（摘自vue官网）Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点如下例： <style> .v-enter, .v-leave-to{ opacity: 0; ...
2018-09-13 20:30:37
2276
原创 Vue动态组件与v-once指令
1、动态组件动态组件可以实现组件之间的切换，先看一个不使用动态组件实现组件切换显示的例子<div id="root"> <child-one v-if="type==='child-one'"></child-one> <child-two v-if="type==='child-two'">&a
2018-09-08 22:30:36
381
原创 Vue中的插槽和作用域插槽
1、Vue中插槽的作用和使用方法定义一个名child子组件，为该子组件添加内容应该在子组件的template中定义，直接在父组件的<child>标签中定义的内容不会被渲染，如下例。<div id="root"> <child> 需要插槽才能渲染的内容 <p>Dell</p...
2018-09-07 22:42:38
40914
24
原创 非父子组件间传值（Bus/总线/发布订阅模式/观察者模式）
使用总线机制（bus）实现非父子组件间传值 在两个child组件间传值，实现点击一个child组件，另一个组件变成与此相同的值<div id="root"> <child content="the first value"></child> <child content="the second value">&
2018-09-06 21:17:07
211
原创 Vue中父子组件传值
1、父组件通过属性向子组件传递数据： 1.1Prop 子组件通过props接收父组件的传值： props:['prop1','prop2','prop3',……]<div id="root"> <counter count="hello world"></counter> </div><script&a
2018-09-04 23:09:43
273
原创 Vue中的ref和$refs
Vue中的ref和$refsref 用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通DOM元素上使用，引用指向的就是DOM元素，如果用在子组件上，引用就指向组件实例：例如在DOM上使用ref <div id="root"> <div ref="hello" @click="handleClic...
2018-09-04 21:44:57
313
原创 Vue中的is属性，及子组件的data
1、is属性根据HTML规范，<table>、<ul>、<ol>、<select>等元素只能包含特定元素，当模板标签在使用有限制性的元素，在渲染时就会出现bug。如下例所示： <div id="root"> <table> <tbody>
2018-09-04 21:44:06
3628
原创 Vue列表渲染 v-for
循环语句v-forv-for指令以item of/in array的形式实现循环1 v-for绑定数组v-for绑定数据到数组list来渲染列表<div id="root"> <div v-for="(item,index) in list" :key="item.id"> {{item.text}}---{{...
2018-08-30 22:43:17
1698
原创 Vue条件渲染 v-if，v-else-if，v-else，v-show
1 v-if指令1.1 v-if：根据表达式的布尔值判断是否插入标签 v-if指令，当show为true时显示div内容，当show为false时隐藏div内容 <div id="root"> <div v-if="show">hello wirld</div> <button @click="handle&quo
2018-08-30 22:30:08
14119
原创 jQuery插件扩展案例:图片轮播
使用插件实现图片轮播效果：通过设置传入的参数autoScroll，numControl和arrowControl的值可以显示不同的效果图片轮播效果一：设置autoScroll=true，numControl=false，arrowControl=false，图片自动轮播，当鼠标进入时停止轮播，当鼠标移出时继续轮播；图片轮播效果二：设置autoScroll=true，numControl...
2018-08-30 13:45:15
659
原创 Vue中的Class和Style绑定
1、绑定Class1.1使用对象绑定：<div :class="{active:isActive}"></div>active这个class是否存在取决于isActive的值，如以下实例：设置样式 .activated{color=red}<div id="root" > <div @click="handleClick"
2018-08-29 21:49:00
2459
原创 vue组件： todolist功能开发，todolist组件拆分，todoLidt删除
通过todolist案例学习vue中组件的概念和使用‘1、 todolist功能开发使用v-model、v-on（@）、v-for指令实现todolist功能实例：<div id="root"> <input type="text" v-model:value="inputValue"> <button @click=...
2018-08-25 19:51:42
728
原创 vue中的属性绑定和双向数据绑定、计算属性和侦听器
1、属性绑定v-bind ：例如<div id="root"> <div v-bind:title="title">hello world</div></div><script> new Vue({ el:"#root", data:{
2018-08-23 23:25:52
7210
原创 vue 安装、挂载点、模板与实例、vue实例中的数据，事件和方法
1、安装1.1在Vue.js官网下载，并用<script>标签引用1.2使用CDN方法 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> 1.3NPM方法命令行工具$ npm install vue2、实例、挂载点、...
2018-08-23 23:25:35
3027
转载 jQuery插件扩展
插件编写的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，方便后期维护。一、jQuery插件开发方式1、通过$.extend()来扩展jQuery2、通过$.fn 向jQuery添加新的方法3、通过$.widget()应用jQuery UI的部件工厂方式创建 二、三种jQuery插件开发方式说明 1、$.extend()相对简单，一般...
2018-08-22 20:23:16
506
原创 jQuery：案例11 放大镜效果
动画：1、鼠标移入显示区图片时，显示选择框；2、放大镜特效，将图片位于选择框内的部分放大显示；3、点击下方小图片和左右移动按钮时正确的显示图片实现方法：1、放大效果：放大区的与显示区使用相同的图片，并设置放大区图片的长宽为显示区的二倍；2、选择框拖动效果：鼠标移动时获得鼠标的坐标，并根据选择框的和图片的offset()属性计算出选择框的新位置。同时修改放大区图片的位置，使其...
2018-08-19 12:40:24
1829
原创 offsetWidth与offsetLeft
1、offsetWidth: 为元素的width+元素的padding+边框的宽度如图：2、offsetLeft、offsetTop、offsetRight、offsetBottom以offsetLeft为例进行说明，在不同的浏览器中其值不同，且与父元素的position属性（relative,absolute,fixed）有关。现分以下几种情况说明：（测试所用的浏览...
2018-08-16 21:52:58
74063
3
原创 分别使用js原生代码和jQuery实现瀑布流效果
瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部.。实现瀑布流的核心方法是两个函数（详见代码JS代码和jQuery代码部分）1、图片位置放置函数，该函数将下一张图片摆放在所有已加载图片的距离涌口顶部高度最小的那张图片的下方，主要通过以下几步完成：1）根据窗口的大小和图片的宽度决定一排放置几张图片...
2018-08-16 20:52:41
232
原创 jQuery：案例10 一个能够计算进制转换的计算器
在案例8的基础上增加了进制转换功能动画效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算器</title> <script src="../j
2018-08-11 23:01:55
859
原创 jQuery： 案例9 计算器
动画效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算器</title> <script src="../jquery.min.js"&
2018-08-11 22:55:00
405
原创 jQuery：案例8 推拉门效果
方法：anemate(), stop(), siblings() 动画效果： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>推拉门</title&
2018-08-10 22:10:01
591
原创 jQuery：案例5 图片切换
动画：点击左右按钮实现图片切换jQuery方法：animate(), stop(), first(), last(), siblings(), appendTo(), prependTo(), attr(), addClass(), removeClass(), eq()动画效果：<!DOCTYPE html><html lang="en"><h...
2018-08-08 22:52:42
1001
转载 深入理解css中position属性及z-index属性【转载】
（转自博客https://www.cnblogs.com/zhuzhenwei918/p/6112034.html）深入理解css中position属性及z-index属性 在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。 position属性共有四种不同的定位方法，分别是static、fixed、relativ...
2018-08-08 15:57:24
339
原创 javaScript：关于 [1,2,3]map(parseInt)问题的解析
想要弄懂这个问题，要清楚map()方法的定义用法和参数以及parseInt()函数的定义用法和参数。1、map()方法的定义用法和参数map()方法定义：按照原始数组元素顺序依次处理元素，然后返回一个新数组map()语法array.map(function(item,index,array),this)参数说明：item： 必须，当前处理的数组的值 index：可选，当...
2018-08-08 11:26:42
9777
1
原创 jQuery:案例四 回到顶部
动画：通过点击侧栏导航，页面到达相应的位置jQuery方法：show(), hide(), animate() 动画效果： <!DOCTYPE html><head> <meta charset="UTF-8"> <title>回到顶部</title> <script src=&quo
2018-08-06 22:54:59
228
原创 jQuery：案例三，模仿当当网“独家特供”菜单动画
动画：模仿当当独家特供菜单动画jQuery方法：addClass(),removeClass(),siblings(),find(),show(),hide()动画效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&a
2018-08-05 21:54:43
369
转载 JavaScript：mouseover与mouseenter，mouseout与mouseleaver区别
mouseover与mouseenter区别 mouseover事件：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。 mouseenter事件：只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。mouseout与mouseleave的区别mouseout事件：不论鼠标指针离开被选元素还是任何子元素，都会触发 mouse...
2018-08-04 23:58:04
288
原创 jQuery: 动画案例二
动画：鼠标移动到一级菜单上时，打开对应的二级菜单，移出时关闭该二级菜单。使用的jQuery方法：slideDown(), slideUp(), stop(), find(), mouseenter(), mouseleave()。<!DOCTYPE html><html lang="en"><head> <meta charset...
2018-08-04 22:54:42
281
原创 jQuery 动画案例一
动画目的：点击一级目录，展开其二级目录，同时关闭其他一级目录的二级目录。使用的jQuery方法：toggle(),hide(),parent(),siblings(),find()动画效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &
2018-08-04 22:03:47
464
原创 Ajax
Ajax是AsynchronousJavaScript+XML的缩写，意思是异步实现JS网络请求。通过这一技术可以不用刷新页面就可以从服务器取得数据。Ajax技术的核心是XMLHttpRequest对象，使用XHR对象发送异步请求过程如下：一、使用原生js实现1、创建XHR对象, 由于浏览器兼容问题，可以使用以下方法创建XHR对象： function createXHR(){...
2018-08-03 10:14:52
127
原创 jQuery：元素遍历
1、向上遍历DOM树parent() 方法选取被选元素的直接父元素。parents() 方法选取被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。parentsUntil() 方法选取介于两个给定元素之间的所有祖先元素。$("span").parent();//li$("span").parents();//li ul div$("span...
2018-08-01 22:45:15
867
原创 jQuery：css操作及jQuery盒子模型
1、jQuery css()方法：设置或返回指定的css属性的值$("div").css("width");//返回div元素的宽度使用css()方法设置元素div的样式方法一：$("div").css("width","100px");$("div").css("height","100px");$("div"
2018-08-01 21:34:20
420
原创 jQuery效果之隐藏、显示、淡入淡出、滑动、回调
一、显示、隐藏$(selector).hide(speed,callback);//隐藏，实际上是把元素的height、width、margin、opacity等在给定的时间内逐渐缩小为0最后 //把display设置为 none$(selector).show(speed,callback);//显示,过程与hide相反...
2018-07-30 23:04:47
381
原创 jQuery: 扩展与noConflict
一、扩展jquery：新建一个javaScript文档myjQuery.js。使用如下代码进行扩展jquery方式一：$.myjq1=function(){ alert("hello myjQuery1");}$.fn.myjq2=fcuntion(){ $(this).text("hello myjQuery2");} 然后在页面中调用my...
2018-07-30 22:58:22
143
原创 jQuery: 使用fadeToggle()制作闪烁效果小动画
根据上节课学到的jquery动画效果，结合js中的window.setInterval()函数制作闪烁效果小动画。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> &
2018-07-30 22:16:42
2187
1
原创 jQuery 引入，语法，事件冒泡，自定义事件。HTML捕获、设置、元素添加、删除
1、引入jQuery1):下载jQuery库 <script type="text/javascript" scr="jquery1.11.1.js"></jscript>2）：从CDN中载入jQuery， http://libs.baidu.com/jquery/1.11.1/jquery.min.js http://ajax.googleapi...
2018-07-29 21:06:47
347
原创 第7章 函数表达式
var functionName=function(arg0,arg1,arg2){ //函数体};alert(functionName.name);// functionName这种情况下创建的函数叫做匿名函数（拉姆达函数）匿名函数的name属性时空字符串。7.1 递归递归函数是通过名字调用自身的情况下构成的 function factorial(nu...
2018-07-27 22:57:30
118
原创 第6章 面向对象的程序设计
6.1 理解对象创建Object实例的方式有两种，第一种是使用new操作符后跟一个构造函数来创建的。var person=new Object();/*创建了Object引用类型的一个实例，并把该实例保存在变量person中。使用的构造函数是Object，它只为新对象定义了默认的属性和方法。*/person.name=”Nicholas”;person.age=29;perso...
2018-07-24 22:31:06
154
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人