風缘的博客

不积跬步,无以至千里;不积小流,无以成江海

图解 event.pageX event.clientX event.offsetX get BoundingClientRect

event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY,但它们使用...

2018-12-12 23:42:16

阅读数 165

评论数 0

vue中dom操作

this.$el 当前组件最外层div <template> <!-- <div class="hot-wrap" v-on:contextmenu.prevent = ...

2018-12-12 23:28:04

阅读数 486

评论数 0

图片连接处出现白线

最近做移动端h5活动页,涉及到多图片拼接,遇到了一个坑就是图片连接处出现白线,当然查资料都说是img自身属性是inline-block导致,只要父元素设置font-size:0或者设置img display: block; 便可。但是我设置了没有用,这条线不是所有的机型都有,而且页面滚动之后又消失...

2018-11-28 15:23:56

阅读数 1339

评论数 0

jquery批量设置和获取表单数据

大家在提交表单和给表单赋值的时候是像下面这样写的: 要是表单很长的话真是要泪奔。。。 有人说获取数据可以给jquery添加serializeObject方法: ** * 表单序列化为json对象 * 用法:var savaData = $('#Form').serializeOb...

2018-06-15 18:04:52

阅读数 746

评论数 0

按钮hover背景渐变

button { position: absolute; padding: 10px 20px; top: 50px; left: 50px; border: none; border-radius...

2018-06-13 10:55:51

阅读数 1367

评论数 0

纯css实现tooltip

<div class="box"> <a class="tooltip tooltip-up" data-msg="上提示信息&...

2018-06-13 00:30:28

阅读数 1214

评论数 0

html 样式命名

结构样式命名 页面最外围控制整体布局宽度:#wrap 页面主体:main 头部:header 标志:logo 内容:content 侧栏 / 边栏:side 栏目:column 组:group,item,cell 尾部:footer 友情链接:friendlink 版权:copyright 容...

2018-06-12 11:08:44

阅读数 2006

评论数 1

基于jquery的简单分页实现

先上图: 之前在做表格插件想把分页整合进去,原本去网站找一个现成的整合进去,发现有些太简单或者很复杂,达不到自己的要求,自己想还是自己整一个,顺便了解一下其中的原理。 分页样式是基于boostarp的。 (1)页面引入boostarp.css和jquery (2)html代码 &...

2018-06-06 17:17:05

阅读数 3348

评论数 1

百度地图做电子围栏总结

先上图: 需求:在地图上画出围栏,设置围栏信息后保存,生成围栏列表。全选时,地图视野可看到全部的围栏区域,单独勾选会调整地图视野到当前勾选的围栏。围栏区域的中心点要显示围栏名称。 主要的难点(对于我而言)不在于画,而在于设置地图视野和围栏区域的中心点显示围栏名称,其实也不算难,主要...

2018-06-05 15:28:25

阅读数 7932

评论数 7

jquery实现表格复杂表头

先上图: 目前在做一个表格插件,表格的表头是根据一个数组生成,如果只是普通的单层表头很容易实现,但是如果是复杂的表头,就要挺麻烦的,主要是我的数组结构是树形数组,实现需要递归,递归过程要考虑到<th>...

2018-05-16 10:29:48

阅读数 1656

评论数 0

jquery 技巧积累

1.判断复选框是否被选中 $('#checkBox').attr('checked'); 2.禁启用按钮 $("#somebutton").attr("disabled", ...

2018-04-02 17:37:12

阅读数 76

评论数 0

jQuery 之 extend 方法使用

方法介绍jQuery 的 API 手册中,extend 方法挂载在 jQuery 和 jQuery.fn 两个不同的对象上,但在 jQuery 内部代码实现的是相同的,只是功能各不相同。先看看官方给出的解释:jQuery.extend Merge the contents of two or mo...

2018-04-02 15:34:03

阅读数 128

评论数 0

javascript 对象封装的常用方式

常规封装function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } Person.prototype = { constructor: Person, sayHel...

2018-03-22 17:38:45

阅读数 73

评论数 0

Web图片资源的加载与渲染时机

此文研究页面中的图片资源的加载和渲染时机,使得我们能更好的管理图片资源,避免不必要的流量和提高用户体验。浏览器的工作流程要研究图片资源的加载和渲染,我们先要了解浏览器的工作原理。以Webkit引擎的工作流程为例:从上图可看出,浏览器加载一个HTML页面后进行如下操作:解析HTML —&am...

2018-03-22 11:31:00

阅读数 151

评论数 0

WebStrom Live Template 建代码块

俗话说:工欲善其事必先利其器,为了提高开发效率自定义一些自己常用的代码块是必不可少的,下面我介绍一下WebStrom新建代码块的方法。(1)打开‘设置’面板,快捷键 ‘ctrl+alt+s’(2)找到‘模版’点击,然后再点击右边绿色的‘+’号,选择Live Template,然后会出现下面的表单输...

2018-03-20 16:40:02

阅读数 1547

评论数 0

css实现让页面的footer始终位于底部

在写html页面布局的时候经常会遇到这样的情况:当页面内容较少的时候footer下面会有留白这样会很不好看,直接给footer,fixed定位的话当页面内容多的时候,footer又会盖住下面的内容。下面介绍几种方法让页面的footer始终位于底部。方法一:<body&...

2018-03-16 16:07:34

阅读数 5688

评论数 1

深入理解 call,apply 和 bind

本文转自:点击打开链接在JavaScript 中,call、apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果。本文将对这三个方法进行详细的讲解,并列出几个经典应用场景。1、call(thisArg...

2018-03-15 15:14:28

阅读数 68

评论数 0

undefined 与 null 的区别

本文转自:点击打开链接最近在看《JavaScript高级程序设计》一书,书中讲到相等操作符(==)时说,要比较相等性之前,不能将 null 和 undefined 转换成其他任何值,但要记住 null == undefined 会返回 true 。的确,在ECMAScript规范中也是这样定义的,...

2018-03-15 11:09:15

阅读数 70

评论数 0

JavaScript数组原型方法

本文转自点击打开链接数组原型方法主要有以下这些:join()push()和pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf() (ES5新增)forEach() (ES5新增)m...

2018-03-14 10:34:02

阅读数 262

评论数 0

Vue.js 和 MVVM 小细节

文章转载至:点击打开链接MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。Vue.js 是一个提供了 MV...

2018-03-11 14:21:52

阅读数 69

评论数 0

提示
确定要删除当前文章?
取消 删除