前端
关注
分享
扫一扫
文章平均质量分 51
付博瀚
学习ing
展开
-
图片预加载
图片预加载图片预加载的主要思路就是把稍后需要用到的图片悄悄的提前加载到本地，因为浏览器有缓存的原因，如果稍后用到这个url的图片了，浏览器会优先从本地缓存找该url对应的图片，如果图片没过期的话，就使用这个图片 如下是摘录具体的实现思路： 《javascript图片预加载详解》图片的加载速度往往影响着网站整体的用户体验，尤其对于包含大量图片的网站。对图片进行预加载，不失为一个高效的解决方案...转载 2018-05-25 11:44:12 · 325 阅读 · 0 评论 -
js中写文档write和innerHTML的区别
document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.in...原创 2018-07-15 12:54:43 · 1704 阅读 · 0 评论 -
js判断是否是pc端打开还是手机端打开
根据浏览器头判断是使用神马设备打开的网页 <script type="text/javascript"> function is_mobile() { var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|u...原创 2018-07-15 13:03:55 · 1778 阅读 · 0 评论 -
js 怎样判断用户是否在浏览当前页面？
可以通过document.hidden属性判断当前页面是否是激活状态。兼容性：IE10+，Firefox10+,Chrome14+,Opera12.1+,Safari7.1+ 兼容性写法示例：var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkit...原创 2018-07-15 13:12:48 · 2563 阅读 · 0 评论 -
Chrome web 开发用到的插件
现在设我是一位web开发人员，以Chrome为阵地。下面是一些能让我少花点时间的工具：WhatFont —— 名字就说明了一切。这是找出你最喜欢网站使用的字体的简单方法，这样你就可以为己所用了。Pesticide—— 修改CSS的绝佳程序。当我试着学习匣子模型的时候，它简直就是救命稻草般的存在。Colorzilla ——用于复制确切颜色的一个网站，用它可以将颜色直接复制到剪贴板上，这样你...原创 2018-07-29 10:40:16 · 3705 阅读 · 3 评论 -
js导航栏分享
滑动式导航栏 效果展示，源码下载。原创 2018-07-22 10:50:23 · 852 阅读 · 0 评论 -
js 网站通用浮框
网站通用的浮框，里面内容可以自己定义。 效果展示，源码下载。原创 2018-07-22 13:34:22 · 876 阅读 · 0 评论 -
animate stop带参数详解
<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script> $(document).原创 2018-07-22 15:03:28 · 2305 阅读 · 0 评论 -
图灵机器人 初接触
图灵机器人初接触项目源码，项目展示原创 2018-07-27 11:38:52 · 577 阅读 · 0 评论 -
h5拨打电话
需要拨打电话的地方：<a href="tel:10086">10086</a>发短信：<a href="sms:18688888888">发短信</a>js调用<button onclick="c原创 2018-07-31 12:31:53 · 4333 阅读 · 0 评论 -
less 学习-变量
很容易理解:@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue; }输出:#header { color: #6c94be; }甚至可以用变量名定义为变量:@fnord: "I am fnord.";@var: 'fnord';content: @@...原创 2018-08-09 17:45:57 · 889 阅读 · 1 评论 -
less学习-带参数混合
在 LESS 中，你还可以像函数一样定义一个带参数的属性集合:.border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius;}然后在其他class中像这样调用它:#header { .border-ra...原创 2018-08-14 08:49:35 · 3755 阅读 · 0 评论 -
less学习-模式匹配和导引表达式（带参数混合2）
有些情况下，我们想根据传入的参数来改变混合的默认呈现，比如下面这个例子：.mixin (@s, @color) { ... }.class { .mixin(@switch, #888);}如果想让.mixin根据不同的@switch值而表现各异，如下这般设置：.mixin (dark, @color) { color: darken(@color, 10%);...原创 2018-08-14 08:54:55 · 1629 阅读 · 0 评论 -
less 学习
koala 前端编辑less神器，下载原创 2018-08-06 17:59:33 · 814 阅读 · 1 评论 -
css 居中几种方法
记录下好文 https://www.w3cplus.com/css/elements-horizontally-center-with-css.html转载 2018-07-28 17:01:10 · 1375 阅读 · 0 评论 -
分享一个canvas代码2
HTML5 Canvas粒子效果文字动画特效DEMO演示展现地址：http://csdn.fubohan.cn/20187/原创 2018-07-18 17:43:08 · 1261 阅读 · 0 评论 -
input 属性placeholder 默认值颜色修改
input::-webkit-input-placeholder { /* WebKit browsers */ color: #fff;}input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fff;}input::-moz-placeholder { /* Mozilla Firefox 19+...原创 2018-07-04 11:05:31 · 3359 阅读 · 0 评论 -
点击图片中的某个部分来跳转页面
img 1.1 导入一张图片 1.2 属性 src 图片地址 width 设置图片宽 height 设置图片高 border 设置图片边框 alt 定义图片描述信息 title 定义图片描述信息 usemap map标签的name #name map 2.1 给图片划分区域 配合area 2.2 属性 name 给map指定一个nam...转载 2018-05-23 09:42:23 · 5072 阅读 · 1 评论 -
日历倒计，当前时间+2天，简单写法
公司出现这个问题，让写一个一直比当前时间天数大2的倒计时的日历。 刚开始是这样写的：得到系统时间年月日，将日的天数+2，并判断日的天数大小，并与闰年平年一起比较后将经过计算的年月日显示到桌面上。 写完后，发现代码行有点多，又重新写直接调用时间戳，进行计算，然后展示到页面。 最后这样写了：var dt = new Date();var curYear_start = dt.getFu...原创 2018-06-04 18:07:29 · 2251 阅读 · 0 评论 -
常用优化网页加载速度方法
许多研究发现，页面速度和访客的滞留时间，跳出率以及收入都有直接的关系。另外，谷歌的排名算法中也把页面加载速度作为其中一项考虑因素。因此，你网站的页面加载时间是至关重要的。从访问者的角度看，测试你的浏览器速度的一个很好的方法是清除你的浏览器缓存，然后加载页面。原创 2018-05-24 16:20:01 · 3835 阅读 · 1 评论 -
好文
用更合理的方式写 JavaScript原创 2018-07-27 08:56:25 · 1227 阅读 · 1 评论 -
自适应实用方法
网页设计最常用的单位是px,与之相对应的rem，能够对设置好的宽高进行自适应，所以在网页显示上面应该找准body上面设置字体等的px,以用来应付单位大小。 下面是根据屏幕宽度自适应设置字体大小的js (function() { setFontSize(); function setFontSize() { var html = d...原创 2018-06-13 12:34:59 · 856 阅读 · 0 评论 -
分享一个canvas代码
首先需要已入jquery<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>然后直接运行<canvas id="canvas" width="1349" height=&q原创 2018-06-13 12:39:52 · 1607 阅读 · 0 评论 -
前端页面兼容性问题学习
2018.6.16 端午节开始笔记说道前端页面兼容问题，首先应该了解，通过同一网站怎么判断打开用户是手机端还是pc端，这是前端页面兼容问题前提。 写到这里我想有人这样说，根据屏幕大小判断是否是手机还是电脑，这个我不否认可以，但是现在我说的是另一种方法。Navigator对象 首先来了解一下Navigator 对象，Navigator 对象包含有关浏览器的信息，下面的userAgent...原创 2018-06-16 12:13:24 · 2583 阅读 · 0 评论 -
文件下载
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head runat="server"&原创 2018-06-16 12:51:47 · 969 阅读 · 0 评论 -
禁止百度，神马，搜狗等搜索引擎转码
百度第一种，HTTP Response中显式声明Cache-control为no-transform。 第二种，meta标签中显式声明Cache-control为no-tranform，格式为： <meta http-equiv="Cache-Control" content="no-transform " /> 神马第一种. HTTP Response中显式声明...原创 2018-06-24 10:55:56 · 8366 阅读 · 0 评论 -
h5 meta标签大全
<!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写<head lang=”en”> 标准的 lang 属性写法<meta charset=’utf-8′> 声明文档使用的字符编码<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=...原创 2018-06-24 12:51:19 · 2127 阅读 · 0 评论 -
鼠标移到图片上图片放大
一在现在的网页设计中，鼠标移到图片上图片放大的效果常常被用到，这个效果多应用于文章列表里。我一开始以为是用JQuery来实现的，后来才知道原来是用CSS3来实现的。虽然用JQuery也能实现同样的效果，但用CSS3来实现会更加简单和方便。本文将介绍如何用CSS3来实现这个功能。<!DOCTYPE html><html><head><meta ...转载 2018-06-29 17:09:05 · 2573 阅读 · 0 评论 -
随机颜色
function bg1(){ return '#'+Math.floor(Math.random()*256).toString(10); } function bg2(){ return '#'+Math.floor(Math.random()*0xffffff).toString(16); } functi...原创 2018-07-01 14:13:30 · 1505 阅读 · 0 评论 -
h5获取当前浏览器ip和城市名称
直接4行代码搞定 &amp;lt;script src=&quot;http://pv.sohu.com/cityjson?ie=utf-8&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script type=&quot;text/javascript&quot;&amp;gt;原创 2018-07-10 14:41:28 · 8979 阅读 · 0 评论 -
CSS换行和不换行
强制不换行div{white-space:nowrap;}自动换行div{ word-wrap: break-word; word-break: normal; }强制英文单词断行div{word-break:break-all;}原创 2018-09-12 14:39:21 · 5457 阅读 · 0 评论