![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML + CSS + JS
文章平均质量分 54
羽筠
这个作者很懒,什么都没留下…
展开
-
echarts图表展示地图指定区域
echarts地图展示指定区域指定区域获取方式:城市范围选择器:http://datav.aliyun.com/portal/school/atlas/area_selectorecharts地图展示指定区域及经纬度设置展示标注原创 2023-03-22 14:29:44 · 1939 阅读 · 0 评论 -
字蛛 font-spider 使用
在移动端的web开发中,设计师们往往为了页面显示效果好看,会使用一些特殊字体,那我们开发时就需要引入这些字体文件,但字体文件如果太大的话,下载就会特别慢,会大大影响的体验效果,所以我们需要对此进行优化处理。字蛛是一个智能 WebFont 压缩工具,它能自动分析出页面使用的 WebFont 并进行按需压缩。它通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。原创 2024-01-19 14:49:48 · 909 阅读 · 0 评论 -
接物游戏demo
指定时间内,接到元素则加分,接到炸弹则减分,计时结束,游戏停止。接物元素设置了不同分值。原创 2023-10-20 18:58:24 · 300 阅读 · 0 评论 -
H5页面,上下滑动翻页(整页翻书切换效果)
页面间的切换:整页翻书的切换效果。原创 2023-09-07 17:05:23 · 2150 阅读 · 1 评论 -
调研生成GIF表情包之路
调研生成GIF表情包之路调研阶段分解GIF图片、合成GIF图片合成GIF图片 - 表情包方案优化阶段表情包可视化编辑、生成配置信息数据工具PHP合成生成GIF动图PHP使用imagick扩展合成透明GIF图帧重叠问题解决方案原创 2023-02-16 15:54:17 · 457 阅读 · 0 评论 -
纯前端答题交互(可单选、多选)
纯前端答题交互(可单选、多选),用户确定选项可及时判断对错及提示功能;题库可提前使用excel表格录好,在线使用Exel转JSON格式,网址:在线Excel、CSV转JSON格式-BeJSON.com可以根据需求设置参数,即可达到所需效果:每轮需要答题数、满多少分可抽奖、是否提交选项后展示提示对错信息及答案、展示提示对错信息及答案的时长(毫秒)、是否需要计时(每轮正计时 / 每题答题限时倒计时 / 每轮答题限时倒计时)、倒计时开始时间(秒)。原创 2021-04-03 22:02:16 · 2323 阅读 · 0 评论 -
h5九宫格抽奖
九宫格抽奖-jquery:<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="wid...原创 2020-04-07 16:36:58 · 1433 阅读 · 0 评论 -
canvas刮刮卡
canvas刮刮卡实例,我修改前功能已经完成只是移动端开发时,用比例(rem)单位时,测试时所刮位置有些偏,我自己相应改了一下还有就是刮到一定程度时提示刮奖的结果,之前设置的是一个不定数值(设置不同色,数值都是变动的),要时时监控设置,我改了一下,改成可以设置成刮到指定百分比时提示刮奖结果,可灵活设置,设置如:(//刮了90%的数值gnumBIG = (w * h / 16) *原创 2016-08-22 17:44:23 · 610 阅读 · 0 评论 -
web手势库AlloyFinger运用( 控制CANVAS中图片移动、缩放、旋转)
web手势库AlloyFinger(alloy_finger.js),针对多点触控设备编程的Web手势组件,快速帮助你的web程序增加手势支持非常灵活,省去了自己写相应操作的代码,就能控制元素移动、缩放、旋转了http://alloyteam.github.io/AlloyFinger/example/canvas/此网址的案例就是控制CANVAS中多张图片操作的,此案例实现不仅引用了al原创 2016-09-06 17:16:00 · 12915 阅读 · 8 评论 -
html2canvas浏览器截屏
html2canvas实现浏览器截屏,根据DOM元素样式截图通过html2canvas方法调用插件,该方法接受两个参数,第一个为要生成截图的DOM元素,第二个参数为插件的配置demo: html2canvas浏览器截屏*{ margin:0; padding:0;}body{ text-align:center; padding-top:50px;}#box{ d原创 2016-11-22 14:30:11 · 1317 阅读 · 0 评论 -
借助JQ简单的实现文字滚动效果
借助JQ简单的实现文字滚动效果,带停顿的消息滚动 - 每次移动一行原创 2016-07-01 11:23:37 · 5409 阅读 · 1 评论 -
meta标签定义
meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name)1、显示字符集的设定,设定页面使用的字符集,用以说明主页制作所使用的文字语言,浏览器会根据此来调用相应的字符集显示 page 内容。2、也就是可视区域。对于桌面浏览器,我们都很清楚 viewport 是什么,就是除去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,这是真正有效原创 2016-06-03 16:14:12 · 665 阅读 · 0 评论 -
循环展示图片(画中画效果)
循环展示图片(画中画效果),页面展示效果就是每次显示两张叠加起来的图片,上面的一张图在下面的图的里面,画面不断的缩小,当下面的一张图缩放到窗口大小时它自己切换成上面的图片,叠加在另一张新加载的图片(下面的图)的上面最先设计的一版是用JS定时器不断控制HTML中两张图片的大小、定位信息的,为了使其看上去有不间断的变化效果,加上了CSS3过渡的效果,此功能实现的所有HTML/CSS/JS都直接原创 2017-07-06 16:50:41 · 3336 阅读 · 0 评论 -
原生JS判断页面中图片加载完成
自己写的判断页面中图片加载完成的方法,用原生JS完成,不用jq主要考虑在不加载jq的情况下,代码可以正常执行判断指定ID的盒子中所有图片加载,demo代码如下:<!DOCTYPE HTML><html> <head> <meta charset="utf-8"><title>页面图片加载完成测试</title>...原创 2017-08-14 17:11:11 · 3565 阅读 · 0 评论 -
移动端页面上下滑动,大小、透明度的变化视觉差异效果切换页面
移动端页面上下滑动,大小、透明度的变化视觉差异效果切换页面上滑动进入下一页 , 当前页从 scale=1 放大至 比1的大倍数 ,并且透明度降低至0 ,下一页从 scale=0.1 放大至 scale=1 , 透明度无变化下滑动进入前一页 , 当前页从 scale=1 缩小至 scale=0.1 ,透明度无变化 ,下一页从 比1的大倍数 缩小至 scale=1 , 透明度从0至1的原创 2017-09-25 16:21:32 · 8877 阅读 · 0 评论 -
移动端H5页面,上下滑动翻页
移动端H5页面,上下滑动翻页向上滑动进入下一页 , 当前页(加CSS样式outTop)向上移动移出窗口 ,下一页(加CSS样式inTop)向上移动进入窗口向下滑动进入前一页 , 当前页(加CSS样式outDown)向下移动移出窗口 ,下一页(加CSS样式inDown)向下移动进入窗口同时设置1秒以后(setTimeout(function(){......},1000);)才可(根据canT...原创 2017-09-26 15:10:02 · 48304 阅读 · 24 评论 -
循环展示图片(画中画效果)CANVAS2.0版
循环展示图片(画中画效果)CANVAS2.0版之前设计的一版在测试当中有点问题,PC端测试是没有问题的,但在手机上访问时,切屏时就出现闪屏(本就出现的大图没有出现,是之前的小图突然变大,一闪而过,然后再显示正常的大图)问题,总结原因,应该还是在移动端加载慢的问题这一版做了优化,第一屏时加载三张图片,把下一屏的图预加载出来,到下一屏的时候,只需再预加载下一屏的一张图即可,经过测试,的确不会出原创 2017-07-07 11:12:31 · 2248 阅读 · 0 评论 -
安卓微信中播放视频终于可以不再自动全屏啦
最新的设置安卓视频不全屏播放(不知道是否全部安卓机型都支持)的方法前两天做了一个石头剪刀布的视频游戏项目,测试过程中找到了更加简便的方法,分享下,如下设置HTML代码:<video id="videoID" controls src="XXX" poster="XXX.jpg" preload="auto" x-webkit-airplay="true" x5-playsinline=&qu原创 2017-05-27 14:08:24 · 27718 阅读 · 9 评论 -
未开启横屏时,设置了宽高为窗口100%的视频,竖屏方向播放时,变形问题解决
当手机未开启横屏时,设置了宽高为窗口100%的视频,竖屏方向播放时,会有拉伸,可以根据手机宽高比例判断横竖屏状态,来设置旋转视频元素,同时更新设置视频元素宽高(与之前状态的宽高值对调)demo:<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X...原创 2018-12-27 15:36:16 · 2854 阅读 · 0 评论 -
weUI应用,用JS封装了几个常用的信息提示的弹层
weUI应用,自己用JS封装了几个常用的信息提示的弹层测试页面的代码在后面有贴出几个弹层如下图HTML页面代码:weUI-test测试$(function(){ // //提示弹层,取消关闭,确定做相应操作// dialog('标题1111111','内容1111111',function(){// aler原创 2016-09-19 10:17:16 · 33006 阅读 · 0 评论 -
CANVAS移动、缩放、旋转画入的图片
自己做的一个CANVAS移动、缩放、旋转画入的图片demo:CANVAS touch测试*{ margin:0px; padding:0px; -webkit-tap-highlight-color:rgba(0,0,0,0); box-sizing:border-box;}html{ min-width:320px; max-width:640px; marg原创 2016-08-16 14:49:33 · 13360 阅读 · 0 评论 -
切换CSS实现开/关按钮切换
切换CSS实现开/关按钮切换 *{ margin:0px; padding:0px; box-sizing:border-box;} body{ font-family:"微软雅黑","Microsoft YaHei"; font-size:14px; line-height:24px; color:#666;} li{ list-style:none;原创 2015-12-28 11:41:26 · 2659 阅读 · 0 评论 -
切换CSS实现伸展菜单效果
切换CSS实现伸展菜单效果效果截图 资源CSS样式@charset "utf-8";@media screen and (min-width:320px) and (max-width:359px){html{font-size:12px;}body{ font-size:1.2rem;}}@media screen and (m原创 2016-02-03 18:01:55 · 1763 阅读 · 0 评论 -
CSS3动画、过渡结束后触发执行的事件
CSS3动画、过渡结束后触发执行的事件,有些时候需要在动画或过渡效果结束后执行相应操作,那么可以这样://过渡结束后执行$('.test').on('transitionend webkitTransitionEnd',function(e){ alert(e.type);});//取消过渡结束后执行$('.test').unbind('transitionend ').un...原创 2016-03-24 15:27:24 · 7708 阅读 · 0 评论 -
JS横向轮播
JS横向轮播,自己写了一个方法,可以根据需求设置按钮方式,以下贴出代码以上是页面代码定时翻页*{ margin:0; padding:0;}li{ list-style:none;}.changeBox{ width:100%; height:300px; position:relative; overflow:hidden;}.change原创 2015-12-11 17:58:22 · 884 阅读 · 0 评论 -
HTML+CSS 实现环形比例图效果
HMTL代码<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>百分比</title><style type="text/css">.yuan{...原创 2016-02-17 16:33:38 · 17766 阅读 · 0 评论 -
点击导航缓动至滚动条对应位置,滚动页面时设置对应导航的选择状态
点击导航缓动至滚动条对应位置,滚动页面时设置对应导航的选择状态原创 2015-12-07 16:19:11 · 1894 阅读 · 1 评论 -
HTML5之canvas剪切图片
有时UI设计效果图,设定图片某个角不可见,但上传的图片又不全是PNG透明图,那么Canvas就能帮忙解决困扰啦,自己根据需求做的一个实例,实现这样的效果原创 2015-12-17 13:58:46 · 2514 阅读 · 1 评论 -
添加、显示表情图片
添加和展示表情图片资源下载地址:http://download.csdn.net/detail/qq_16494241/9469511代码:添加显示表情*{ margin:0; padding:0; box-sizing:border-box;}body{ font-size:14px;}.msg_box{ padding:20px;}textar原创 2016-03-22 17:21:21 · 1497 阅读 · 0 评论 -
JS实现点击复制功能(ZeroClipboard)
JS实现点击复制功能1、包含文件2、配置复制按钮组3、测试时注意:本地绝对路径测试没效果哦~要这样才可以以下HTML文档代码:复制*{ margin:0; padding:0;}li{ width:500px; height:50px; line-height:50px; margin:20px auto; text原创 2016-05-19 10:48:54 · 6558 阅读 · 0 评论 -
Canvas文本换行处理
自己改了下方法,如下:调用:var my_cvs = document.getElementById("my_cvs");var ctx_2d = my_cvs.getContext("2d");writeTextOnCanvas(ctx_2d,30,24,'文字内容文字内容文字内容文字内容',182,607);函数:转载 2016-08-10 17:18:35 · 7918 阅读 · 0 评论 -
免费生成二维码图片API使用
生成的二维码图片:http://qr.liantu.com/api.php?&w=200&text=http://www.baidu.com使用:<img src="http://qr.liantu.com/api.php?&w=200&text=测试文字" />这里要注意,联图的这个二维码接口对url中的特殊字符串无法处理,所以我们需要先将urlencode,php有函数urlencode可以直接将urlencode,javascript中有函数encodeURIComponent()可以对url转码原创 2016-08-09 10:09:59 · 8069 阅读 · 0 评论 -
H5大转盘,结束后反馈结果
自己写了一个大转盘效果,方便以后用到时直接修改使用使用的图片资源:roate.pngroate_btn.png原理其实是一开始就已经设置好最终中奖结果,根据这个结果实现旋转的,旋转结束后可做相应操作,代码如下:大转盘测试.outBox{ width:300px; height:300px; position:fixed; left:50%原创 2016-08-29 11:39:53 · 1747 阅读 · 0 评论 -
引用canvas生成的图片
引用canvas生成的图片,AJAX请求获得PHP页面生成的canvas新图原创 2016-05-03 17:48:26 · 2418 阅读 · 0 评论 -
使input date支持placeholder方法
input type date 的 placeholder 支持性有一定问题,因为浏览器会针对此类型 input 增加 datepicker 模块,看上去没那么必要支持 placeholder。对 input type date 使用 placeholder 的目的是为了让用户更准确的输入日期格式,iOS 上会有 datepicker 不会显示 placeholder 文字,但是为了统一表单外...原创 2016-06-02 10:44:19 · 11353 阅读 · 2 评论 -
哈希(不刷新页面,展示不同模板)
简单的哈希路由,不刷新页面,根据哈希值,展示不同模板无标题文档*{ margin:0; padding:0;}html , body{ height:100%;}body{ background-color:#f3f3f3;}nav{ width:100%; height:60px; background-color:green; text-align:cente原创 2016-05-13 16:05:09 · 1557 阅读 · 0 评论 -
option联动
option联动例:option联动 服务1 服务2 1 2 3 4 5 6 7 8 9 10function changeService(value){ $("#sid").children("option").wrap(""); $("#sid").children("span").children("option[name='原创 2016-06-03 14:37:51 · 603 阅读 · 0 评论 -
百度地图应用
百度地图应用:包含地图API,加上自己的密钥:密钥申请:百度开发者中心http://developer.baidu.com/开发支持http://developer.baidu.com/platform/catalog/navigation-c/node/n301申请密钥、应用列表http://lbsyun.baidu.com/apiconsole/key原创 2016-06-01 14:38:06 · 451 阅读 · 0 评论 -
HTML5移动端touch滑动与重力/方向感应结合
HTML5移动端touch滑动与重力/方向感应结合,自己写的测试代码原创 2015-12-15 17:04:02 · 4788 阅读 · 0 评论