随笔分类 -  JavaScript+HTML+CSS

JavaScript+CSS+HTML 编写手风琴效果
摘要：效果图： 可以通过 https://littlehiuman.github.io/03-Accordion/ 查看效果。 https://github.com/littleHiuman/littleHiuman.github.io 求点star~~~ 代码如下： * { margin: 0; pad 阅读全文
posted @ 2020-01-13 23:46 hiuman 阅读(383) 评论(1) 推荐(1)
HTML+CSS+JS（+Vue）写一个通讯录组件
摘要：求各位大大的Star(*/ω＼*)。 没有录屏，所以上传的是图片。后面已补充录屏效果。 效果：（主要是参考小米Note3的通讯录的效果做的） 主要功能： 1. 滚动后，通讯录的模块标题会固定在顶部（图2） 2. 下一个标题很接近时，将上一个标题推上去的效果（过程：图3、图4、图5） 实现： 1. 模 阅读全文
posted @ 2019-03-27 17:47 hiuman 阅读(503) 评论(2) 推荐(0)
canvas写的地铁地图
摘要：更新： 18-9-21：填了个坑，更新了canvas绘制过程。 根据的是百度提供的坐标，canvas的坐标是大的坐标在后面，所以跟实际生活方向相反。 所以canvas里的北方在下方，实际生活中北方在上方。 因为根据的是真实坐标，所以跟广州地铁提供的地图不一样。 左侧地图一种写法，右侧地图另一种写法。 阅读全文
posted @ 2017-03-06 21:06 hiuman 阅读(258) 评论(0) 推荐(0)
javascript 实现购物车页面
摘要：（2020-09-10更新：修复发现的bug，优化代码） 跟商城有关系的网站，难免会有购物车的结账界面。 我用javascript实现了增加数量/减少数量,实时计算总金额，删除该商品，选中商品/反选商品/全选/全反选...的操作。 欢迎指点！~ 图片没有提供，建议自己替换。 效果如图： 用到的素材： 阅读全文
posted @ 2017-02-06 18:46 hiuman 阅读(2753) 评论(0) 推荐(0)
手写JavaScript实现日历选择器 datePicker（鼠标上下拖动选择内容）
摘要：上次写这个的时候的博客：https://www.cnblogs.com/hiuman/p/7347406.html 上次是网上搜的插件，这次是自己写的。 欢迎指点～ 效果图： 可以通过 https://littlehiuman.github.io/09-DatePicker/ 查看效果。 https 阅读全文
posted @ 2017-01-17 19:45 hiuman 阅读(738) 评论(0) 推荐(0)
实现可拖动的轮播图，使用swiper插件
摘要：（涉及到swiper.min.js，swiper.min.css，记得导入这两个文件。） 两种样式： 1）标题 + 页数。 2）标题。 第一种：标题+页数。 <div class="swiper-container" id="swiper-container"> <div class="swiper 阅读全文
posted @ 2016-11-07 14:55 hiuman 阅读(1301) 评论(0) 推荐(0)
javascript写的轮播图
摘要：欢迎指点！ 预览图： 可以通过 https://littlehiuman.github.io/08-Carousel/index-2.html 查看本页面效果。 还有另一种的效果：https://littlehiuman.github.io/08-Carousel/index.html。 代码在这里 阅读全文
posted @ 2016-11-07 12:15 hiuman 阅读(203) 评论(0) 推荐(0)
css3实现菜单栏选中时的过渡效果
摘要：（如有错敬请指点，以下是我工作中遇到并且解决的问题） 效果图： 点击后的效果： 可以通过 https://littlehiuman.github.io/07-menus/index-2.html 查看效果。 https://github.com/littleHiuman/littleHiuman.g 阅读全文
posted @ 2016-10-14 11:56 hiuman 阅读(901) 评论(0) 推荐(0)
JavaScript实现多个菜单的显示隐藏（JavaScript实现二级/三级菜单的显示隐藏）
摘要：（如有错敬请指点，以下是我工作中遇到并且解决的问题） 效果图 : 可以通过 https://littlehiuman.github.io/07-menus/ 查看效果。 https://github.com/littleHiuman/littleHiuman.github.io 求点star~~~ 阅读全文
posted @ 2016-10-12 17:53 hiuman 阅读(1226) 评论(0) 推荐(0)
javascript 实现简单拖拽(鼠标事件 mousedown mousemove mouseup)
摘要：效果图： 可以通过 https://littlehiuman.github.io/06-Dragable/index.html 查看效果。 https://github.com/littleHiuman/littleHiuman.github.io 求点star~~~ CSS: * { margin 阅读全文
posted @ 2016-09-24 15:55 hiuman 阅读(563) 评论(0) 推荐(0)
js插件 日期选择器 datePicker（拖拽上下拉动的选项）
摘要：新版本更新：鼠标上下拖动选择内容：http://hiuman.iteye.com/blog/2353563 （如有错敬请指点，以下是我工作中遇到并且解决的问题） 一开始搜这个内容的时候，搜索结果基本都是不沾边的。 很多都是日历选择器，最接近的就是这两种。 一对比之下，自然是选右侧的，简洁大方，美观。 阅读全文
posted @ 2016-09-18 18:15 hiuman 阅读(623) 评论(0) 推荐(0)
js实现输入框搜索提示功能
摘要：效果图： 可以通过 https://littlehiuman.github.io/05-SearchList/ 查看效果。 https://github.com/littleHiuman/littleHiuman.github.io 求点star~~~ CSS: #kw { width: 286px 阅读全文
posted @ 2016-09-12 17:00 hiuman 阅读(1451) 评论(0) 推荐(0)
js生成一周内的日期+周几
摘要：（如有错敬请指点，以下是我工作中遇到并且解决的问题） 旧标题：js生成当前日期起，一周内的日期+周几/今日 效果有两种： 两者区别是 1.第一天（今天）显示今日 2.第一天（今天）显示周几 代码中改变showToday的值即可 可以通过 https://littlehiuman.github.io/ 阅读全文
posted @ 2016-09-08 10:41 hiuman 阅读(1129) 评论(0) 推荐(0)