小效果
关注
分享
扫一扫
文章平均质量分 65
CN-cheng
不断的学习，不断的充实自己
展开
-
css阴影的2种实现
在前端开发中，比较常用的有一种样式是阴影，我自己用的有2种写法来实现。第一种是box-shadow，应该是大家比较熟悉的了，这里不再详述。我主要想分享的是drop-shadow来实现。下面讲一下使用场景，比如有2种效果需要你来实现，如下图：图一图二图一是我在做移动端web页面时遇到的需求，是底部的添加按钮需要和底部导航一样有阴影。如果使用box-shaow的话，实现效果可能是这样的：在添加按钮也加上box-shadow，效果是这样的：都跟需要效果有出入。但是使用drop-shadow就可原创 2020-05-25 19:12:50 · 2381 阅读 · 0 评论 -
教你如何利用css来裁剪图片
突然想到了之前整理的图片裁剪插件，想了下实现的三种原理，下面就写一下简单的例子：背景定位代码块clip切割代码块position定位代码块由于只是简单说了下实现原理，网上也有很多插件，但是UI的设计不一，所以对于全面的实现效果并没有体现。背景定位 利用背景定位来实现裁剪效果代码块css：div{ width: 300px; height: 300px;原创 2016-12-22 17:01:57 · 4673 阅读 · 0 评论 -
HTML5拖放换位
HTML5拖放换位在线示例：示例页面结构<ul class="drop-div"> <li href="/black"> <div>1</div> <p>1</p> </li> <li href="/green"> <d...原创 2019-06-10 16:34:13 · 793 阅读 · 0 评论 -
HTML5拖放的封装
在项目中遇到了拖放的需求，之前虽然了解过，但是时间久了就忘记的差不多了。前些天进行简单实现和封装了一下，自己测试没有发现大问题，有个小问题就是拖放到的位置是以松开鼠标时指针的位置来判断插入位置，所以可能效果不甚完美，后面会继续优化。自己封装的js放在了GitHub，欢迎提issues：链接。具体的效果可以点击查看：示例HTML结构示例<div class="abs"> ...原创 2019-06-03 11:18:19 · 219 阅读 · 0 评论 -
html+js调用手机摄像头扫描二维码（生产勿用！）
&amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;title&amp;amp;amp;amp原创 2019-01-21 17:28:50 · 38258 阅读 · 40 评论 -
手势放大、缩小和移动图片
我写博客一般都是把在项目中遇到的一些问题记录下来，可以在以后遇到类似问题或者有新的思路时来回顾。前两天就遇到一个需求：在手机端，把html页面的图片内容放大和缩小、移动位置。花了我一天时间才做好，本来是自己先画逻辑草图和整理思路，做着做着发现有个别细节不对，所以走了一些弯路。现在把代码直接贴出来，功能和效果比较简陋，后面会继续完善，如果有疑问或建议可以留言，3Q。功能：双击图片放大，单点触摸...原创 2018-11-23 11:18:52 · 4452 阅读 · 23 评论 -
花你5分钟，轻松掌握如何实现超出内容显示省略号
超出显示省略号这几天不忙，整理了一下这个，方法现在用的有三种超出显示省略号单行多行支持非IE多行支持所有主流浏览器单行缺点：不适用于多行之后的省略 优点：美观，可用于单行省略 注：必须为块级元素，不然表格中会影响到其他列 例如：.p1{ text-overflow: ellipsis; white-space: nowrap; width: 500px;原创 2016-12-21 13:58:53 · 601 阅读 · 0 评论 -
position定位之后的内容滚动到底部加载更多
今天稍微清闲点，想起了前几天项目中遇到的问题，在页面position定位的内容里实现滚动加载更多，之前写了滚动加载更多是没有定位，通过window.onscroll()方法触发，现在的这个需求有些不一样，这里记录一下方便以后参考，下面直接放上代码：<!DOCTYPE html><html><head> <meta charset="ut...原创 2018-06-23 18:02:27 · 720 阅读 · 0 评论 -
使用JS进行图片懒加载
前几天修改了之前APP的一些功能，发现图片的加载太慢了，而且一个页面显示太多图片的话其他js什么的也都延迟了加载，造成事件方法未加载、操作无效果,用户体验差。原因除了图片显示的有点多之外还有我们的服务器限制的有下载速度，所以考虑到了图片的懒加载。下面我只是简单实现了一下效果，抛砖引玉，想一次加载一个屏幕那么多图片的话也不难，需要的可以另外加入判断即可，这里就不再赘述：CSS代码HTML代码JS代原创 2017-05-15 16:35:02 · 12120 阅读 · 0 评论 -
下拉多选checkbox
下拉多选checkbox本文原创，转载请注明出处目录下拉多选checkbox目录CSS代码HTML代码JS代码今天根据要求让实现下拉列表加入多选按钮，之前写过百度搜索效果，但是感觉不太适用。然后大概想了一下就动手开始试着去写，实现效果如下图：（注：选中下拉多选框之后点击输入框及下拉以外的地方隐藏下拉。依赖JQuery，为了写的方便些。）CSS代码定义一些样式：<style> u原创 2017-05-12 18:58:38 · 8261 阅读 · 0 评论 -
css文字描边效果
突然想到这个东西，然后写下来留个纪念，方法也很简单。CSS代码HTML代码效果如下： CSS代码主要利用的是文本阴影效果：text-shadow。 text-shadow兼容性：Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 <style> .content { font-size:50px; /*原创 2017-05-15 15:41:19 · 1803 阅读 · 0 评论 -
按钮点击波浪效果
看到手机app的点击波浪效果感觉挺不错的，自己用js+css写了下这种效果：CSSHTMLJS全部代码CSS：/*按钮样式*/#btn{ width: 200px; height: 35px; line-height: 35px; background-color: #00BB9E; color: white; outline: none;原创 2017-05-31 14:28:56 · 2975 阅读 · 0 评论 -
多张图片上传预览及上传到服务器
这周搞混合开发的时候给app提供帮助反馈页面，里面有图片上传功能。之前做过图片上传预览,但是上传到服务器用的插件，对于把图片上传到服务器的方法并不清楚。查了一些资料大部分也都是关于图片预览的，还好有上传到服务器的例子，根据例子做了一些修改方便用在移动端，当然PC端也是可以用的。可以获取到图片的名称、大小和类型。没有写成插件方便在不同的情况下使用，下面就直接把全部代码贴出来： 转载请注明出处全部原创 2017-05-25 10:30:05 · 2122 阅读 · 0 评论 -
上拉到底部加载更多
#之前写的有图片懒加载，写的比较粗糙-_-，望见谅。这篇写的是上拉到底部加载更多内容，原理跟那个图片懒加载有类似，下面直接开始代码：全部代码如果页面没有滚动时显示出‘加载更多’，就自动加载更多；滚动到底部显示出‘加载更多’时，自动加载一次，然后再次滚动到底部显示出‘加载更多’之后停止加载，且‘加载更多‘变为‘没有更多’：<!DOCTYPE html><html><head> <meta原创 2017-05-25 15:25:08 · 2425 阅读 · 0 评论