制作网页时，需要判断鼠标向上滚动还是向下滚动，首先想到的是通过 jquery.mousewheel.js 插件实现，但如果浏览器滚动条是正常状态，也可以通过滚动条的滚动位置来检测鼠标是向上滚动还是向下滚动，实现思路比较简单，就是比例滚动条滚动前后的位置变化即可。 函数代码： function mouseScrollDirection ( fn ) { var beforeScrollTop = document.documentElement.scrollTop || document.body.scrollTop, fn = fn || fun...
不限制层级、不区分标签名、不区分样式名，通过原生javascript代码获取所有子元素，包括子元素的子元素（孙元素）的集合，可以通过定义一个数组，然后多次嵌套使用javascript的children属性获取子元素存储到数组来实现，代码很简单，效率不详！ 代码示例 HTML代码 <div id="tddx-entry"> <p> <span></span> </p> <h2> <i></i> </h2> <h3&g...
js动态创建svg在制作网页时是经常使用到的，最简单最容易理解的用处就是如果需要多个相同的svg，如果一个一个地写<svg></svg>，即不好看，也多余，而动态创建，只需要创建一个，然后循环出来就可以了。 常规的动态创建svg var svgNS = 'http://www.w3.org/2000/svg'; //必须需要，否则可能会导致svg不显示 var svg = document.createElementNS(svgNS, svg); //因为需要命名空间，所以使用createElementNS var path = docume...
一些网站常用的期间段时间戳，通常用来统计今天、本周、当月网站数据。 //php获取今日开始时间戳和结束时间戳 $today_start=mktime(0,0,0,date('m'),date('d'),date('Y')); $today_end=mktime(0,0,0,date('m'),date('d')+1,date('Y'))-1; //php获取昨日起始时间戳和结束时间戳 $yesterday_start=mktime(0,0,0,date('m'),date('d')-1,date('Y')); $yesterday_end=mktime(0,0,0,...
淘宝网宝贝详情里的图片，点击后可以弹窗预览，且支持触摸放大缩小，体验非常好，viewer.js插件就是款可以实现类似效果、功能完善的图片预览js插件，有纯js版本和jQuery版本。 viewer.js插件可以实现点击图片弹窗显示，PC端支持鼠标键盘移动、放大缩小，移动端支持触摸移动缩放等，还支持旋转（类似微博图片的旋转）、水平/垂直翻转、全屏幻灯片、缩略图、标题以及多种自定义事件等，另外还提供了多种回调函数。 viewer.js插件下载 纯JS版本：https://github.com/fengyuanchen/viewerj...
HTML标签使用style background-image属性添加背景图片，需要和vue双向绑定。 HTML代码 <div id="app"> <div class="pic" v-bind:style="{backgroundImage:'url('+ bg + ')'}"></div> </div> 这里需要注意的是： 在vue中background-image要用驼峰写法，写成backgroundImage（和在jquery里的写法一致）； 结束不要加分号。 ...
一个对象数组，已知其中一个对象属性的某个属性值，然后通过该属性值获取其所属对象的对象下标。 简单地说就是通过指定对象属性值获取对象的下标，可以通过 javascript 的 findIndex() 方法实现。 findIndex() 方法的作用是传入一个函数条件，然后返回符合条件的数组的第一个元素的位置（下标）。 示例代码： var _name = 'tddx'; //已知属性值 var _object = [ { name: 'tddx', age: '10' }, { name: 'neirong', a...
网页中常见的效果，点击按钮改变内容的字体显示大小，方便眼睛视力不同的人阅读，提高网页的用户体验。 实现方法也比较简单，通过js修改元素css的font-size属性。 实现代码 HTML代码： <a id="cut" href="javascript:void(0);">A-</a> <a id="add" href="javascript:void(0);">A+</a> <div id="entry"> 这里是内容 </div> Javascript代码...
AI文件图层比较混乱，怎么样快速找到选中内容的图层？使用Illustrator的定位对象功能。 鼠标选中要定位的内容，然后在图层面板点击底部的定位对象按钮（搜索图标）即可 遗憾的是，好像没有对应的快捷键。
制作web动画效果，通常会想到使用svg或者canvas甚至flash，其实一些简单的动画效果，使用css3属性transition就可以实现，比如动态显示矩形边框线的效果，实现原因是利用过渡效果时宽高显示的时间差。 示意图 实现代码 HTML代码： <div class="border"> </div> CSS代码： .border {position: relative; width:300px; height:300px;} .border:before, .border:afte...
如果某一天使用Firefox浏览器时发现鼠标左键点击网页任意一处文本都会出现闪烁的光标，还可以通过键盘方向键移动光标，就好像输入框输入状态一样，而自己并不知道为什么会这样时，那么应该就是误触了键盘的F7键，并且点击了“是”。 在Firefox浏览器窗口按下F7键是Firefox光标浏览设置，可以启用或禁用光标浏览，此功能可以在网页中放置一个可移动的光标，以便能使用键盘选择文本，如果没有鼠标、非触屏、没有触摸板的情况下，这个功能是非常有用的。 关闭方法 方法一： 在Firefox浏览器窗口，按下键盘F7键，在弹出的“光标浏览”设置窗口中，点击...
安装xampp后，apache服务器时间所在时区的时间不一致，原因是xampp的apache服务器设置的默认时区不是自己所在的时区，导致时间晚一些或早一些，解决方法是在php.ini把时间修改为自己所在时区即可。 编辑apache的/php/php.ini文件，找到timezone，将其修改为Asia/Shanghai 如默认为 date.timezone=Europe/Berlin 修改为 date.timezone=Asia/Shanghai 保存文件，重启apache即可。