网页前端设计

http://www.86y.org

搜索文章

html页面内容的收缩和展开效果 px / rem 默认显示两行或更多2018/9/26 10:40:08

html页面内容的收缩和展开效果 px / rem 默认显示两行或更多

一、概述:html页面内容的收缩和展开效果, 默认显示两行内容,点击进看全文,显示全部。(效果如下图:)二、源代码如下:<!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta http-equiv="content-type" content="text/html;charset=utf-8"><title>px / rem 默认显示两行内容 点击进看全文 显示全部</title> <script src="http://code.jquery.com/jquery-2.1.1.min.js">...未完,继续阅读→

jq技巧

阅读(551)条

程序员都在用的电脑小技巧,看看你会几个2018/8/14 11:38:03

程序员都在用的电脑小技巧,看看你会几个

现在加班已经是常态了,程序员加班更甚,但是对于其他行业来说,有些工作其实是可以通过一些小技巧来提高工作效率的,如果你经常因为电脑操作的问题耽误工作效率,这篇文章可以让让你少加班一小时。如果你每天按时准点的下班,那么这篇文章或许可以让你多刷一会抖音,多和旁边的美女同事说几句话。当然还有一个最重要的前提就是你用的电脑室windows的,如果是用苹果的,可以等明天一、文件误删如何恢复?经常遇到不小心误删的情况,而且还是彻底删除,咋办啊?不需要任何工具,简单三步走,你就能找回你删掉并清空回收站的东西。1、单击&l...未完,继续阅读→

电脑技巧

阅读(467)条

移动端自适配 力荐viewport缩放解决方案2018/7/6 9:39:54

移动端自适配 力荐viewport缩放解决方案

一、概述:做了几年的移动端一直用rem,感觉最烦琐的就是rem的计算。随便可以用cssrem自动计算,但是有时候感觉宽度跟高度的rem并不是完全准确。所以决定用viewport缩放来试试看效果,经果一些网友的帮忙测试,发现缩放viewport这种方法更简单、高效、准确。测试结果:(如果其它手机测试结果欢迎留言)测试地址:http://86y.org/demo/scale/360n6pro 正常oppo r7s 正常坚果Pro 正常iphone6 正常iphone8p 正常华为p9 正常二、思路:例如效果图是:750*1334(px)的源文件。1、根据750 PSD源图 宽度尺寸进行比例缩放,高度并没有限止,所以高度...未完,继续阅读→

解决 ios input fixed置底 获取焦点或切换输入法时被法挡住的BUG2018/7/5 11:53:20

解决 ios input fixed置底 获取焦点或切换输入法时被法挡住的BUG

一、概述:项目中有一个置底发布评论的效果,安卓没有发现问题,但是IOS出现了被输入法挡住的问题。搜索了下这个BUG,很多人都有在问这个问题。二、解决思路:有去尝试了一些测试,但有些是只能在弹出时滚动到底部,切换输入法还是有问题。所以我对此方法做了一个调整,IOS中需要点击才能获取焦点,接着我就对input点击事件着手。1、点击input时科开启定时器自动滚动到底部,防止切换输入法导致被挡住。2、input失去焦点时清除定时器。三、实例源代码:(测试地址:http://www.86y.org/demo/input%20fixed/)<div class="replay_com&qu...未完,继续阅读→

bugiosinput

阅读(1089)条

js 只选择选择时分秒的jq插件2018/6/20 11:40:49

js 只选择选择时分秒的jq插件

一、概述:由于项目中需要使用到只选择时分秒的插件,而开始使用的laydate插件必须要带日期所以,还是自己写一个时分的插件吧。效果如图下:二、实例代码:(点击进入预览效果)<!doctype html><html><head><meta charset="utf-8"><title>js 只选择选择时分秒的jq插件-幸凡学习网</title><style>/* CSS Document */html, body, div, p, ul,ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td,figure{margin:0;pa...未完,继续阅读→

插件时间

阅读(1308)条

小程序之 保存canvas生成商品图片附加小程序二维码 分享到朋友圈2018/6/8 14:25:30

小程序之 保存canvas生成商品图片附加小程序二维码 分享到朋友圈

一、概述:看了很多小程序的canvas,很多人在骂街,跟浏览器的操作实在相差太多,API极少。所以有些功能基本上没办法实现。但是基本的还是可以的。比如我要实现 生成商品图片(包含产品的:标题,价格,图片,小程序商品详情的二维码等)点击生成后的canvas保存到手机。虽然效果实现了,但是走了不少弯路。所以有必要在此纪念一下。需要用到的生成二维码组件(可自行下载添加到小程序根目录utils里):https://github.com/demi520/wxapp-qrcode/blob/master/utils/qrcode.js以上二维码组件默认是有空白边的的,如果不需要空白区域,也可以修改...未完,继续阅读→

小程序canvas

阅读(1754)条

ES6 Promise 用法讲解 链式操作2018/4/26 10:29:50

ES6 Promise 用法讲解 链式操作

Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,原型上有then、catch等同样很眼熟的方法。那就new一个var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log("执行完成"); resolve("随便什么数据"); }, 2000);});Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“...未完,继续阅读→

es6proisejs

阅读(1108)条

canvas跨域绘制图片报错解决方案2018/4/4 16:37:42

canvas跨域绘制图片报错解决方案

概述:canvas绘制图片,由于浏览器的安全考虑,如果在使用canvas绘图的过程中,使用到了外域的图片资源,那么在toDataURL()时会抛出安全异常:Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.解决方案第一步:访问的服务器允许,资源跨域使用,也就是说设置了CORS跨域配置,Access-Control-Allow-Origin打开IIS,找到“HTTP响应标头”点进去,在右侧可以看到添加,然后添加如下标头即可Access-Control-Allow-Origin:* 第二...未完,继续阅读→

canvas跨域绘制

阅读(1125)条

js取json对象的键和值2018/4/3 15:36:36

js取json对象的键和值

在json数据不明的情况想要把键名和值都输出,确实是比较麻烦下面就介绍获取方法代码如下://构建一个json对象 var jb={"美的":49,"三星":35,"海信":25,"格力":16,"方太":14}; for(var key in jb){ alert(key); //json对象的key alert(jb[key]); //json对象的值 } 未完,继续阅读→

js键名json

阅读(1113)条

解决 百度分享之 模拟click()点击无效 方案2018/4/2 15:42:19

解决 百度分享之 模拟click()点击无效 方案

一、概述:今天因为客户有个功能需要一打开页面就要模拟点击百度的share分享插件,本来以为很简单。没想到直接click()是无效的。终于在一篇博客中找到了方法及原因。点击A标签本身,并不会触发跳转到指定链接的事件,就是说,我们平时都是点击的A标签中的文字了。所以要想用JS模拟点击A标签事件,就得先往A标签中的文字添加能被JS捕获的元素,然后再用JS模拟点击该元素即可。打印$("a")[0],得到的是http://www.86y.org ,但实际上$("a")[0]是一个object对象,或许说是DOM对象更贴切一些。二、解决方法:方案一:docu...未完,继续阅读→

js模拟点击

阅读(1022)条

主流浏览器内核的介绍2018/3/29 8:54:12

主流浏览器内核的介绍

一、浏览器市场份额本报告数据,来源于百度统计所覆盖的超过150万的站点,而不是baidu.com的流量数据。二、浏览器内核浏览器内核可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。2.1 渲染引擎渲染引擎负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。2.2 JS...未完,继续阅读→

移动端浏览器的四大浏览器内核2018/3/27 13:51:59

移动端浏览器的四大浏览器内核

手机浏览器种类:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,其他杂牌浏览器国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自助研发的内核,就像国内的手机操作系统都是基于Android修改的 全球仅有四大浏览器内核  目前全球仅有四个独立的浏览器内核,分别为微软IE的Trident、网景最初研发后卖给Mozilla基金会并演化成火狐的Gecko、KDE的开源内核Webkit以及Opera(欧朋)的Presto。其中,Presto是历史最悠久的内核。  目前微软的Trident在移...未完,继续阅读→

移动端Webkit

阅读(899)条

input文字超出宽度用省略号显示2018/3/27 13:45:34

input文字超出宽度用省略号显示

有的时候的某段文本太长了,会影响整个的布局,很多人用动态语言来解决这个问题,但必须区分中文和英文,因为中文相当于两个英文字符长度,这样不仅繁琐,而且加重了服务器的负担。其实,我们完全可以使用CSS完美解决这个问题,单行比较好解决,多行由于只兼容webkit内核的浏览器所在不在这里讨论。语法:text-overflow : clip | ellipsis参数:clip :  不显示省略标记(...),而是简单的裁切(clip这个参数是不常用的!)ellipsis :  当对象内文本溢出时显示省略标记(...)说明:设置或检索是否使用一个省略标记(...)标示对象内文本的溢出...未完,继续阅读→

cssellipsis裁剪

阅读(2549)条

JavaScript对Json的增删改属性2018/3/19 11:06:32

JavaScript对Json的增删改属性

使用JS对Json数据的处理,朋友遇到需要对Json数据进行相关操作,然后自己实验了一下,顺便把一些其它操作也一起加了进来。代码如下:var arr=[{"site":"86y.org","type":"study"},{"site":"baidu.com","type":"seach"},{"site":"google.com","type":"seach"}];for(var i=0;i>arr.length;i++){if(arr[i]["site"]=="86y.org"){//修改Json中的site值,因为Json中存在site属...未完,继续阅读→

jsjson修改增加

阅读(903)条

JS输入用户名自动显示邮箱后缀实例,兼容所有移动端2018/3/14 13:40:33

JS输入用户名自动显示邮箱后缀实例,兼容所有移动端

一、概述:这篇文章主要介绍了JS输入用户名自动显示邮箱后缀列表的方法,可实现自动显示邮箱后缀名列表的功能,非常具有实用价值,需要的朋友可以参考下原理:一个输入框 当我输入任何字的时候 自动下拉相应的邮箱提示,在输入框输入86y的时候 下拉框有所有对应的邮箱类型自动填充好了,点击选择下拉的邮箱就可以完成输入了,不需要填写邮箱后缀。经测试兼容所有移动端。效果如下:二、源代码如下:(预览地址:http://www.86y.org/demo/email_type.html)<!DOCTYPE HTML><html><head><meta http-equiv="Con...未完,继续阅读→

js邮箱移动端

阅读(1207)条

$(document).click 在iphone上不触发事件解决办法2018/3/14 10:51:26

 $(document).click 在iphone上不触发事件解决办法

<div class="name">点我</div>$(document).on("click", ".name", function() {alert("name");});以上代码在电脑浏览器和安卓上都能触发alert事件,但是在ios上却完全没有反应查阅了很多信息后,说是iphone这些元素上没有click事件,它是touch事件,就是说如果这个name标签是button的可click事件则是可以触发的,因为div本身默认不可点击1、有一个解决方法是给这个元素添加css.name{cursor:pointer;}这样是可以解决的2、但是如果你觉得粗暴的话,可以将click改为touchsta...未完,继续阅读→

bugjq

阅读(687)条

关于区块链的入门教程2018/3/3 9:34:37

关于区块链的入门教程

区块链(blockchain)是眼下的大热门,新闻媒体大量报道,宣称它将创造未来。可是,简单易懂的入门文章却很少。区块链到底是什么,有何特别之处,很少有解释。下面,我就来尝试,写一篇最好懂的区块链教程。毕竟它也不是很难的东西,核心概念非常简单,几句话就能说清楚。我希望读完本文,你不仅可以理解区块链,还会明白什么是挖矿、为什么挖矿越来越难等问题。需要说明的是,我并非这方面的专家。虽然很早就关注,但是仔细地了解区块链,还是从今年初开始。文中的错误和不准确的地方,欢迎大家指正。一、区块链的本质区块链是什么?一句话,它是一...未完,继续阅读→

区块链教程

阅读(887)条

ps导出渐进式jpg 来提升用户体验2018/2/1 16:38:15

ps导出渐进式jpg 来提升用户体验

1、概述jpg格式分为:Baseline JPEG(标准型)和Progressive JPEG(渐进式)。两种格式有相同尺寸以及图像数据,扩展名也是相同的,唯一的区别是二者显示的方式不同。Baseline JPEG(标准型)直观感觉为:Progressive JPEG(渐进式)直观感觉为: 两种格式区别:渐进式图片带来的好处是可以让用户在没有下载完图片就可以看到最终图像的大致轮廓,一定程度上可以提升用户体验。另外渐进式的图片的大小并不会和基本的图片大小相差很多,有时候可能会比基本图片更小。 2、生成Progressive JPEG(渐进式)在photoshop中有“存储为w...未完,继续阅读→

ps体验

阅读(1125)条

【C#】错误“System.NullReferenceException:未将对象引用设置到对象的实例“解析2018/1/19 16:00:02

【C#】错误“System.NullReferenceException:未将对象引用设置到对象的实例“解析

错误原因分析  首先,你要知道,在.net里面所有操作的变量都是对象。   一般的标示符,如int,string,char等等,最后都会转换为System命名空间下面的类名(如Int32,String,Char等等),当然类实例化的就更不用说了。对象就必然存在若干的属性和方法。你要操作一个对象,也必然是操作它的属性或者方法。   “未将对象引用设置到对象的实例”,也就是说你要调用对象实例里面不存你要操作的属性或者方法,而在确定你的对象里面有你要操作的属性或者方法,但是仍然报错,就多半是你操作的对象变成null了。因为null实际上...未完,继续阅读→

net错误

阅读(1078)条

js文字从右往左无限滚动 支持PC,移动端2017/12/25 10:49:31

js文字从右往左无限滚动 支持PC,移动端

一、概述:关于文字滚动插件太多,PC跟移动端使用来能同时兼容的并不多,基于以上原因自己还是动手写了一个单纯的文字从右向左滚动的DEMO,思路来源于上一篇《小程序 文字从右往左无限滚动》。一个页面支持多个滚动。二、实现过程:1、解决思路:如果宽度滚动小于文字内容宽度,则滚动,反之停止。默认是只有一条标签,但是在实现过程中需要最好需要二条来实现,所以js会自动添加一条相同的内容。滚动的时候最好的方法不是让它滚完,而是当第一条滚动完后,同于第一条和第二条是无缝的,所以重新又从第一个内容开始滚动,切换时完全看不出来有...未完,继续阅读→

js插件滚动

阅读(3499)条

当前第  1  页 / 共  28  页  总共546条记录  

12345678