-
canvas实现碰壁运动重叠效果
实现思路 1、静态小球 首先,生成随机半径、随机位置的50个静态小球 2、随机运动 接着,这50个小球做随机运动,需要配合定时器更新小球的运动状态。这时,需要对上面代码进行改写 3、碰壁检测 下面,增加小球的碰壁检测功能,当小球碰壁时,变为相反方向 4、重叠效果 canvas的合成属性globalCompositeOperation表示后绘制的图形怎样与先绘制的图形结合,属性值是字符串,可能值如下: source-over(默认):后绘制的图形位于先绘制的图形上方 source-i...
-
JS原生拖放功能的实现模拟拖拽效果
原理: 模拟拖拽最终效果和在桌面上移动文件夹的效果类似 鼠标按下时,拖拽开始。鼠标移动时,被拖拽元素跟着鼠标一起移动。鼠标抬起时,拖拽结束 所以,拖拽的重点是确定被拖拽元素是如何移动的 假设,鼠标按下时,鼠标对象的clientX和clientY分别为x1和y1。元素距离视口左上角x轴和y轴分别为x0和y0 鼠标移动的某一时刻,clientX和clientY分别为x2和y2 所以,元素移动的x轴和y轴距离分别为x2-x1和y2-y1 元素移动后,元素距离视口左上角x轴和y轴的位置分...
-
移动端常用的四种响应模式
移动优先的响应式布局采用的是渐进增强原则,制作响应式网站时,先搞定手机版,然后再去为更大设备去设计和开发更复杂的功能。特征是使用min-width匹配页面宽度。从上到下书写样式时,首先考虑的是移动设备的使用场景,默认查询的是最窄的情况,再依次考虑设备屏幕逐渐变宽的情况 由简入繁易,由繁入简难。如果是桌面优先,布局端是桌面端代码,只有在media中,才是手机端代码,加载了多余的桌面端代码。如果是图片文件,则下载的无用资源更多 无论从界面设计还是代码执行效率的角度而言,移动优先都有明显优势 下面介绍四种...
-
移动端的摇一摇实现效果
摇一摇的原理非常简单,检测到手机的重力加速忽然有比较大的变化幅度即可。摇一摇时,元素颜色发生变化 实例代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 100...
-
js中浏览器窗口关闭详解
窗口关闭 就像方法open()打开一个新窗口一样,方法close()将关闭一个窗口。如果已经创建了 Window对象w,可以使用如下的代码将它关掉 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.11.3.min.js" ...
-
js中tagname使用详解
DOM里常见的三种节点类型(总共有12种,如docment):元素节点,属性节点以及文本节点,例如<h2 class="title">head</h2>,其中h2是元素节点,class是属性节点,head是文本节点,tagName和nodeName的语义是一样的,都是返回所包含标签的名称,例如上面的h2标签,都是返回h2,但是tagName只能在元素标签上使用,而nodeName则可以在所有的节点上使用。 1、利用document.getElementById()获取到dom元素 2、...
-
Sticky footers实现方法
在网页设计中,Sticky footers设计也是最比较常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。 常见的实现方法是对(.sticky)footer进行绝对定位,假设高度为50px。对父级(.box)进行相对定位,将html、body的高度设置为100%,父级(.box)的最小高度设置为100%,将(.content)内容部分设置padding-bottom为footer的高度,即50px,这里不用margin...
-
绝对定位absolute居中的方法
此法同样只适用于那些我们已经知道它们的宽度或高度的元素,并且遗憾的是它只支持IE9+,谷歌,火狐等符合w3c标准的现代浏览器。 下面用一段代码来了解这种方法: 运行效果: 原文链接:https://www.qiquanji.com/post/8068.html本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。...
-
PHP全角半角转换函数
自已的先做一下笔记:保留备用;PHP全角半角转换函数,把目前能找到的所有全角都列出来了一个个替换吧,需要的朋友可以参考下 之前试过网上找的通过ASCII之类的字符替换,发现很多莫名其妙的问题。最后还是换成下面的字符替换方式了,把目前能找到的所有全角都列出来了一个个替换吧! 代码如下: <?php function SBC_DBC($str) { $DBC = Array( &nbs...
-
zblog日历标签和前台控制面板标签调用
日历标签 <divclass="function"id="divCalendar"> <h3><#ZC_MSG050#></h3> <#CACHE_INCLUDE_CALENDAR#> </div> 控制面板标签 <divclass="function"id="divContorPanel"> <h3><#ZC_MSG025#></h3> <ul> <li&g...
最新留言
说:asdasd
2023-05-26 10:48:03说:I
2023-04-07 09:22:25说:2366
2023-03-30 09:40:21说:1
2023-03-30 09:40:16说:6
2023-03-03 17:48:00说:发的太多人
2023-02-27 15:34:13说:1
2023-02-02 19:12:01说:我靠
2023-01-26 10:55:41