一个猜你所选的小程序随写
1.背景介绍 关于本篇文章的命名《一个猜你所选的小程序随写》我也是很无奈，没有特别突出的主题，更像是随写一样，给我多年前知道的一款猜你所选的一个游戏交互的一个呈现，所以下文的所有内容将是想到哪里写到哪里。 大概是在2007年左右吧，一个同学给我展示了一个小小的“绝活”让我眼前一亮，主要是拿了十五张扑克牌，我默选一张（不对外告知），由他分别堆成三叠，每叠五张，通过按一定的规则摆放，前后共三次最终可挑选出我选定的那一张牌。这个小技巧也是逢年过节我常拿来为大家展示的一个雕虫小技，值得大家来了解一下，不过这其中的算法我肯定是不知道，只能是按照渣渣程序的方式进行一个鸡肋的实现。 十五个元素可以是十五张小纸条，十五个麻将，十五个扑克牌等等，本次也使用十五张扑克牌来模拟共计十五个元素，分别是：A，2，3，4，5，6，7，8，9，10，J，Q，K，小王，大王，它们可以是顺序排列，也可以是随机乱序组合，以下...
文章分类：前端技术 HTML/JS/CSS
websocket学习着编写了一款chrome小插件
背景介绍 半年前有幸分享了一下浏览器开发者工具的技术分享，当时的PPT在写至最后处总感觉理论讲解多于代码分享，于是琢磨着编写一下相关的代码，在经过一番苦思冥想后最终锁定了浏览器插件编写的实现上，所以在经过一番知识百科后，略微掌握了一部分的理论知识，随着深入的了解后，于是就实现了一个小小的插件，算是技术知识总结吧，或许是为了备忘吧，也或许是为了丰富本站博客技术文章内容吧，也就有了本文。本文以代码实践为主，直接上代码（懒得去花太多事件了）。 manifest.json { "name": "渣渣插件", "version": "1.0.0", "manifest_version": 2, "description": "这是一款比较简单的插件示例。", "browser_action": { "default_icon": "statics/images/logo.png" , "defaul...
文章分类：前端技术 HTML/JS/CSS
CSS3的开门效果
记得在2010年的时候，学了一下flex语言，看到一个示例是一个开门效果，那时感觉很高大上，虽然早已有了CSS3，但发现从网上找了一下类似这种效果的实现还是真的比较少，反正搜了一些相关的没有搜索到，点击图片查看效果，示例写的比较简单，右键源文件为相关代码。 运行结果 点击图片开门效果，门开了没关上，只能开一次 参考代码 <title>开门大吉-点击图片</title> <style type="text/css"> .imageBox{ margin: 10px auto; width: 300px; height: 300px; position: relative; overflow: hidden; } #bg_box{ width: 100%; height: 300px; position:absolute; top:0; left: 0; background:url("bg....
文章分类：前端技术 HTML/JS/CSS
简单的图片轮播效果实现（二）
背景描述 接着前面两篇轮播图片实现的文章，发现想要实现各种各样的效果都是可以的，这不再来奉上一篇从中间向周围扩散的实现。期初的构想是较为简单的，从一个5x5或7x7的矩阵中，先找出正中心点，然后再根据一个点分别向上、左、下、右的顺序逐步扩散去实现突破切换，实际上这种实现就束缚了必须是一个正方形的图像才能比较准确的从正中间向周围扩散，那就这样吧，等后期有机会了我再调整为能够满足长方形的实现，现在不是不能满足，得需要做一些兼容，并且如果是长方形的话，就无法从正中心点扩散了，先就这么着，你得信任这点我是可以做到的。如下几个图分别是5x5、7x7的分析图，其中椭圆形的框为最中间的一个点，放形中为以中心的斜下放开水旋转（构成一个圆形区域）的先后顺序，也就是将一个二维的数组转换为以这种结构包裹的新数组即可实现，参考如下： 参考代码 实现的Java代码为（示例的右键源文件中有同等的js的实现代码），其中...
文章分类：前端技术 HTML/JS/CSS
简单的图片轮播效果实现（一）
背景介绍 看了一下腾讯课堂这里的教程https://ke.qq.com/course/204364 （第22个小节） ，感觉这个效果值得拥有，于是就有了这个实例，目前实现的较为简单，从左到右和从右到左，理论上讲后期我会加上4个对角线和中心开始效果，转至实例页面：“/demo/simpleImageSwitch/index.html”，左右切换效果参考如下： （图片从左至右切换） 实现原理 实现原理比较简单，实际上就是把一个矩形划分成横向与纵向的坐标，再使用css的背景图坐标填充的方式定时轮询显示即可。所以基于此种方式的实现还可以有更多种的实现效果，比如从上至下、从下至上、从左上角至右下角、从右上角至左下角等一共9种方式的图片轮播切换。本篇文章共实现了从上至下、从左至右、左上至右下5中效果，其实搞清楚这个实例是如何写的之后“任何效果”都可以实现，以后有机会再继续丰富。其中左上至右下还是稍微复...
文章分类：前端技术 HTML/JS/CSS
CSS3画太极图
看了下兄弟连的CSS3视频讲解，觉得圆角边框处值得学习学习，就按照视频中的讲解也做了一份儿示例，算是加深印象吧。示例中有使用纯css画出一个太极图的效果，瞬间感觉好像很高大上的样子，东西比较简单，作为总结分享的一个知识点，特别需要注意的是视频中的示例存在一个小小的兼容性问题，由于视频中的运行示例在chrome下显示正常，放到IE10下时的运行效果为： 也就是说在IE10下面出现的效果是多出边框与背景共存的一个宽度X的像素，后经过查找资料找到添加 background-clip:content-box;样式即可，具体可以在IE10下或chrome等浏览器下运行查看示例效果。 参考代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>div的圆角学习</title> <style type="tex...
文章分类：前端技术 HTML/JS/CSS
使用CSS3山寨一款iPhone效果
一款渣防iPhone效果的实现，看了一下实现这种效果的视频教程，学着去做了一款，示例中的效果为黑色的iPhone，这里给换成白色的，审美和专业方面经不起推敲，大致看上去像那么回事儿就可以了，使用CSS3实现的。 运行效果 参考代码 <!DOCTYPE html> <html> <head> <title>山寨iPhone</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> body{ margin: 0; padding: 0; background-color: #1a1a1a; } #phone{ width:230px; height:450px; background-color: rgba(240,240,240 , 0.9); ...
文章分类：前端技术 HTML/JS/CSS
CSS3效果的幽灵按钮
前几天在腾讯课堂看了下幽灵按钮的实现，凭着感觉实现了一下，不知道这种效果是不是传说的幽灵按钮效果，只在Chrome与Firefox兼容较好，Chrome效果最佳，点击这里查看效果。 运行效果 参考代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>幽灵按钮,在Chrome与Firefox下运行</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style type="text/css"> body{ margin: 0; padding: 0; font-size: 12px; } #box{ width: 800px; height: 300px; margin: 100px ...
文章分类：前端技术 HTML/JS/CSS
CSS3的圆角属性学习及示例
参考示例 参考代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div的圆角学习</title> <style type="text/css"> #div1{ width: 200px; height: 100px; border: 2px solid red; line-height: 100px; text-align: center; font-weight: bold; } #div2{ width: 200px; height: 100px; border: 2px solid red; line-height: 100px; text-align: center; font-weight: bold; border-radius: 20px; } #div3{ width: 200px; height:...
文章分类：前端技术 HTML/JS/CSS
仿Baidu百科中的内容链接
背景介绍 前一段项目中使用到了仿照百度百科中内容查看方式的实现，今天抽了点时间将其单独摘出来，分享一下，方便再使用。下面对于这个小功能的特点进行一下 页面右侧浮动显示快捷链接菜单 滚动条滚动到某个位置时自动选中当前位置的链接菜单 点击某个链接菜单滚动条定位到相关的位置 运行效果 相关下载 在线预览页面已取消，可见历史上的本站"/demo/scrollMenu/index.html" 注 上述许多内容已经过时和过期了，留存本篇文章仅为方便个人查看，原始文章的信息参考： 原始链接：https://www.chendd.cn/information/viewInformation/myLog/135.a 最后更新：2015-08-07 14:39:58 访问次数：278 评论次数：0 点赞个数：0...
文章分类：前端技术 HTML/JS/CSS
运营时间： 天
用户数量： 人
文章数量： 篇
评论数量： 条
点赞个数： 个
最后更新：