qq_21700537-优快云博客

转载 css3美化滚动条样式

1.改变浏览器默认的滚动条样式::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性background-color:#f8f8f8;}::-webkit-scrollbar {//滚动条的宽度width:9px;height:9px;}::-webkit-scrollbar-thumb {//滚动条的设置backgr...

2019-06-28 22:36:56 595

转载 web移动端开发技巧与注意事项汇总

二、meta的使用1、<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览...

2019-01-29 15:30:42 315

转载 H5移动端弹出键盘时遮挡输入框

H5移动端弹出键盘时遮挡输入框2017年08月03日 11:00:03 风中乘凉阅读数：11836在写移动端时，如果使用绝对定位Fixed将输入框（input或者textarea）,当手机的输入法为自带输入法时可能问题不大，但是当使用类似搜狗等输入法时，由于会高出自带输入法大约30个像素，就会造成输入框被遮盖一部分的现象，很尴尬。下边简单说说简单的解决思路，当然还有复杂的。延时一...

2018-11-21 10:13:17 899

转载移动端富文本踩坑

移动端富文本踩坑移动端web vue.js最近在做一个vue的项目。之前的前端同事离职了，和女朋友去云南潇洒去了，剩下我一个苦逼坐在电脑前哒哒哒敲代码。刚刚接手就开始做移动端富文本编辑器的需求。主管说压了半个月，尽快做出来。在网上找了不少编辑器，前段时间做过react的后台项目，用了百度的编辑器。功能很多很强，遗憾的是ios不支持flash，在移动端并不适用。因为要兼容io...

2018-08-17 11:22:32 2753

转载模仿微信朋友圈图片浏览 js javascript 支持图片预览，滑动切换，双指缩放，图片缓存

模仿微信朋友圈图片浏览 js javascript 支持图片预览，滑动切换，双指缩放，图片缓存2017年08月10日 12:11:38阅读数：2311previewImage-mobile仿微信js-sdk wx.previewImage javascript实现，支持图片预览，滑动切换，双指缩放，图片缓存;it is a plugin previewImage for mo...

2018-07-19 16:08:49 1381

转载用wow.js实现页面滚动时触发animate.css动画特效

有时候项目需要一些动画来提升用户体验，吸引用户注意力。这时wow是个不错的选择wow.js依赖animate.css，不需要jquery；animate.css是纯css动画官网：http://mynameismatthieu.com/WOW/建议去官网一看bootstrap CDN服务：http://www.bootcdn.cn/wow/ 当您滚动时显示动画。非常Animate.css朋友:-...

2018-07-11 16:37:14 988

转载多行文本溢出显示省略号(…)全攻略

多行文本溢出显示省略号(…)全攻略发表于 2014年09月30日 by 愚人码头被浏览 548,960 次分享到：小编推荐：掘金是一个面向程序员的高质量技术社区，从一线大厂经验分享到前端开发最佳实践，无论是入门还是进阶，来掘金你不会错过前端开发的任何一个技术干货。大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度...

2018-07-04 09:25:41 277

转载 H5分享到微信好友朋友圈QQ好友QQ空间微博二维码

H5分享到微信好友朋友圈QQ好友QQ空间微博二维码这是分享按钮：<button onclick="call()">通用分享</button><button onclick="call('wechatFriend')">微信好友</button><button onclick="call('wechatTimeline')&quot

2018-07-03 09:40:35 1903

转载 https://eleditor.fixel.cn/

（此编辑器仅适用移动端，chrome请按F12模拟手机设备进行浏览）使用方法：  <script src="Eleditor目录/jquery.min.js"> </script>  <script src="Eleditor目录/eleditor.min...

2018-07-03 09:04:36 1689

转载 CSS3 object-fit理解以及object-fit的兼容性，包括兼容IE9+浏览器

本文还是着重讲下object-fit:cover，特别是关于object-fit:cover的兼容性问题，如何去兼容更多浏览器。具体的object-fit:cover用法请看《object-fit:cover 剪裁图片尺寸适配div - 居中并裁剪图片》下面简单讲述下object-fit的含义以及如何提高兼容性，比如兼容IE！object-fit理解CSS3 background-size出现的比...

2018-06-22 11:27:25 20883 4

转载如何用纯CSS将图片填满div，自适应容器大小，已有两个不太完善的方案

我有一个模板，想按常规做一个div里面放置一个img图片，并且让图片铺满容器，自适应容器大小。HTML结构代码如下（在这个盒模型上，我已经放置了一些不重要的样式）。<div style="height:270px;width:400px;border:2px black solid;"> <a href="http://www.paipk.com"><img ...

2018-04-10 18:09:03 7767 2

转载实现点击div 触发select

1 2 3 function change() { var st = document.getElementById("st"); if (st.size === 1) { st.size = st.length; } else {

2018-01-09 17:02:20 5241 1

转载 Sublime Text 3 快捷键汇总

转自：http://blog.sina.com.cn/s/blog_73c5cfbe0101ldj8.htmlSublime Text 3非常实用，但是想要用好，一些快捷键不可或缺，所以转了这个快捷键汇总。用惯了vim，有些快捷键也懒得用了，尤其是在win下面，还有图形界面，所以个人觉得最有用的还是搜索类，对于阅读和修改代码来说，非常实用。选择类

2017-11-15 14:13:52 154

转载前端知识库 code_xzh 2017-03-02 22:30:55 浏览20219 评论18 javascript html5 react 性能 HTTPS http js 浏览器 angular

前端知识库code_xzh 2017-03-02 22:30:55 浏览20219 评论18javascript html5 react 性能 HTTPS http js 浏览器 angular jquery 插件 html github摘要：前端开发全面知识库，包括HTML5，CSS3和js的基本框架知识，以及DOM和BOM操作的基础知识和一些基本工具和IDE。学习

2017-10-13 11:30:21 999

转载让DIV中的垂直滚动条自动滚到最底部

让DIV中的垂直滚动条自动滚到最底部在聊天窗口中当消息增多超过消息窗体DIV的高度时就会出现滚动条，但此时滚动条在绝大多数浏览器中都始终位于DIV的顶部，这样就会导致之后的消息看不见，必须往下拖动滚动条才能看到新的消息，如果做到当出现滚动条时，滚动条始终位于DIV的底部呢？方式一：设置DIV的scrollTop=scrollHeight;方式二：在DIV的底部添加一隐藏

2017-10-10 11:36:02 1548

转载自定义单选按钮、复选框

单选按钮 / 复选框样式自定义一直以来都对单选按钮（radio） / 复选框（checkbox）的默认样式感到头疼，不够美观！恰好学习css3 学到了一个选择器：checked，学着做了一个简单的样式自定义。主要的思想在于：设置自带的样式的透明度为0，然后使用绝对定位混淆视听先来说说单选按钮代码如下： css:

2017-10-09 17:28:21 267

转载超级强大的SVG SMIL animation动画详解

超级强大的SVG SMIL animation动画详解这篇文章发布于 2014年08月31日，星期日，03:07，归类于 SVG相关。阅读 163808 次, 今日 117 次更新于2017-02-24拒有些资料显示，Chrome 45 & Opera 32版本之后 SMIL会在控制台console会有警告（虽然本人没有看到），以后有可能不支持的风险。我觉得应该是打算

2017-09-19 14:15:44 543

转载在网页中使用SVG技术

在网页中使用SVG技术分享： 0可缩放矢量图形（SVG）是矢量图形家族的一部分。相比其他光栅图形（JPEG、GIF 和 PNG），SVG 图形具有更多的优势。本文将探讨 SVG 图形的基本概念和在 HTML5 中的使用。学习绘制、过滤器、渐变、文本和将 SVG XML 添加到网页。简介可缩放矢量图形 (SVG) 是基于矢量的图形家族的一部分。它们

2017-09-18 13:44:07 1016

转载 flash动画老鼠

链接http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0

2017-09-08 10:38:33 715

转载 CSS实现单行、多行文本溢出显示省略号（…）

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：overflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略

2017-09-04 16:21:53 354

转载 CSS div文本垂直居中

CSS div文本垂直居中问题：vertical-align，在div中设置文本垂直居中，是不起作用的。那怎么样设置div的文本垂直居中哦！关于"CSS文本垂直居中"的文章在网上可以找到很多，它们主要涉及3种方法：1、单行文本垂直居中：方法：把文本段落高度(line-height)和所在区域高度(height)设为一致即可。缺点：这种方法只

2017-08-31 11:41:02 332

转载 touchjs

touch.js demo left：0 top：0 scale：1 rotate：0

2017-07-06 08:53:21 312

转载移动端滑屏 touch事件

移动端滑屏 touch事件移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛，类似于PC端的图片轮播，但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。以下是四种touch事件touchstart: //触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。touchmove: //在屏

2017-06-30 10:19:28 468

转载自定义滚动条

自定义滚动条（课程链接）学了这节课，感觉收获了许多，所以想记一下笔记。思路整体思路第一步：创建一个构造函数CusScrollBar第二步：通过new操作符实例化这个构造函数（初始化函数_init）拖动滑块内容滚动的思路滑块的可移动距离 = 整个滚动条的高度 - 滑块的高度内容可滚动的高度 = 内容的整个高度 - 内容的高度内容

2017-04-20 13:36:39 391

转载 HTML meta viewport属性说明(mark)

什么是Viewport手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大

2017-04-20 11:39:31 201

转载纯css炫酷旋转

无标题文档html { background: black;}div { -webkit-animation: spinny 60s ease-in-out infinite; animation: spinny 60s ease-in-out infinite; border-radius:0%; width: 6

2017-01-19 10:40:51 201

翻译解决IE下输入框不支持placeholder属性

解决IE下不支持placeholder属性 .text{width: 200px;padding: 10px;} ;(function($){ $.fn.placeholder = function(options){ var opts = $.exten

2017-01-19 10:32:44 345

qq_21700537的博客