随笔分类 -  1.JS案例

平常练习写的一些JS小插件。
关于部分手机显示商品列表被截断的问题总结
该文被密码保护。
posted @ 2016-10-08 11:46 ZRainna 阅读(4) 评论(0) 推荐(0) 编辑
秒杀模块的实现思路
摘要：最近新做了个h5活动页面的秒杀模板，样式类似于日期是一个tab的列表，时间是一个tab的列表，商品是一个可以左右滑动的列表，结构从上到下排列。这里具体的代码就不贴了，简单介绍下实现的思路。 实现原理 处理页面的显示逻辑即是处理数据。当页面初始化时，遍历秒杀商品的数据列表，每个商品和分割线的宽度是固定 阅读全文
posted @ 2016-04-27 14:14 ZRainna 阅读(3419) 评论(1) 推荐(0) 编辑
JS实现颜色值的转换
摘要：从网上看了个案例，是实现颜色值转换的，就想着自己也写个。网上的案例链接找不到了，这里也就不贴了。JavaScript颜色转换的核心就是进制间的转换。rgba(0,0,0,.4)转换成#000000，就是Number.toString(16)#ffffff转换成rgb(255,255,255)，就是p... 阅读全文
posted @ 2015-08-28 17:17 ZRainna 阅读(3597) 评论(0) 推荐(0) 编辑
PC网站应用接入微信登录
摘要：参考文档：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=&lang=zh_CNhttps://open.weix... 阅读全文
posted @ 2015-08-26 19:54 ZRainna 阅读(11938) 评论(2) 推荐(0) 编辑
分享到微信微博空间等第三方平台的JS代码
摘要：分享功能有利于传播更多优质的内容，所以在web项目中也是比较常用的。今天就抽空整理下常用的分享平台的JS代码。这些代码可以在对应平台的官方网站上生成，官网上对分享内容的参数也有详尽说明。这里只对常用的几个参数说明下，案例未做兼容性处理，建议在chrome下预览。1.分享到微信，易信分享到微信，易信比... 阅读全文
posted @ 2015-01-23 12:40 ZRainna 阅读(4198) 评论(0) 推荐(1) 编辑
自定义微信易信平台分享内容
摘要：当一个链接在微信或易信浏览器里打开时，不管这个链接是公众号里的内容还是扫码打开的链接，分享给好友或是朋友圈时，分享的内容默认从网页中取，包括页面中的图片和title。当页面中没有图片时，会采用平台默认的图片，当页面没有title时，会使用页面的链接地址作为分享的标题。这里可以通过设置shareDat... 阅读全文
posted @ 2014-10-14 15:40 ZRainna 阅读(2878) 评论(4) 推荐(1) 编辑
JS案例之8——从一个数组中随机取数
摘要：近期项目中遇到一个需求，从一个列表中随机展示列表的部分内容，需求不大，JS也非常容易实现。主要是运用到了Math对象的random方法，和Array的splice方法。思路是先新建一个数组，存放所有的列表，然后算出随机数，从数组中取出这个随机索引对应的值，然后组成一个随机数组。源代码如下： 1 2... 阅读全文
posted @ 2014-09-17 14:41 ZRainna 阅读(6535) 评论(0) 推荐(0) 编辑
JS案例之7——瀑布流布局(2)
摘要：这个例子与上一篇类似，唯一的区别是排序的方式有差别。上一篇是在高度最小的列里插入内容，这个案例是按顺序放置内容。两种方法各有优缺点。第一种需要在图片内容加载完成的情况下有效。这个例子不需要在window.onload之后执行，直接计算每列的索引，按照顺序一列一列的放置。用下面的图做说明。说明：上一个... 阅读全文
posted @ 2014-08-25 13:31 ZRainna 阅读(445) 评论(0) 推荐(0) 编辑
JS案例之6——瀑布流布局(1)
摘要：在实际的项目中，偶尔会用到一种布局——瀑布流布局。瀑布流布局的特点是，在多列布局时，可以保证内容区块在水平方向上不产生大的空隙，类似瀑布的效果。简单的说，在垂直列表里，内容区块是一个挨着一个的。当内容较多且不固定时，就依赖于html结构的顺序，非常受限制。这里给了一个简单的例子，只要传入列表的数量和... 阅读全文
posted @ 2014-08-25 12:23 ZRainna 阅读(2108) 评论(5) 推荐(0) 编辑
JS案例之5——移动端触屏滑动
摘要：移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。以下是四种touch事件touchstart: //手指放到屏幕上时... 阅读全文
posted @ 2014-08-14 21:04 ZRainna 阅读(38483) 评论(5) 推荐(4) 编辑
JS案例之4——Ajax多图上传
摘要：近期项目中有好几次用到多图上传，第一次在项目中真正用到Ajax技术，稍微整理了下，贴个案例出来。我们传统的做法是当用户提交一个表单时，就向web服务器端发送一个请求。服务器接受并处理传来的表单信息，处理完成后返回一个新的页面。这个做法比较浪费带宽，当请求数较多时，页面响应的时间就依赖于服务器处理的时... 阅读全文
posted @ 2014-08-12 15:51 ZRainna 阅读(2964) 评论(2) 推荐(3) 编辑
JS案例之3——倒计时
摘要：利用简单的数字累加循环模拟倒计时的效果，逻辑比较简单。如果大牛们有更好的办法欢迎补充。这种效果经常用于在规定的时间做某件事。比如在1分钟之后重新发送验证码等。案例演示：源代码如下： 1 2 3 4 5 JS实现倒计时 6 7 8 9 17 18 19 20 请输入倒计时时间... 阅读全文
posted @ 2014-08-04 20:12 ZRainna 阅读(1166) 评论(1) 推荐(2) 编辑
JS案例之2——cycle元素轮播
摘要：元素轮播效果是页面中经常会使用的一种效果。这个例子实现了通过元素的隐藏和显示来表现轮播效果。效果比较简单。效果图如下：源代码如下： 1 2 3 4 5 cycle demo 6 7 8 9 10 21 22 23 24 25 ... 阅读全文
posted @ 2014-08-01 22:10 ZRainna 阅读(905) 评论(3) 推荐(0) 编辑
JS案例之1——pager 分页
摘要：学习JS大半年之久，第一次自己尝试写一些小插件，写法参考网上某位牛人写代码的思路。此处代码写的是静态分页。如果需动态分页，还可以修改下。第一次写，还有很多地方可以优化。希望各位大牛踊跃拍砖。预览图源代码 1 2 3 4 5 pager demo 6 7 8 9 ... 阅读全文
posted @ 2014-07-17 12:42 ZRainna 阅读(1811) 评论(2) 推荐(0) 编辑

点击右上角即可分享
微信分享提示