最近接到一个很有意思的需求，能否做到当内容横向溢出时，依然能够使用鼠标滚轮对内容进行滚动的方法。什么意思呢？来看看这么一种情况：我们有一个垂直方向溢出滚动的容器，以及一个水平方向溢出滚动的容器：如果使用的是非触控板（大部分用户没有触控板），而是使用鼠标来进行操作，会发现，这两个容器中，只有垂直方向溢出滚动的容器，是可以响应鼠标滚轮的：垂直方向溢出滚动的容器，正常响应鼠标滚轮，可滚动内容水平方向溢出滚动的容器，不会响应鼠标滚轮，不可滚动内容那么，这里可能就是一个用户痛点。如果在一些特定场景下，确实有横向滚动的内容，譬如横向的图片内容展示等。又想使用鼠标滚轮对内容进行滚动，能否做到呢？那是必须的，
最近接到一个很有意思的需求，能否做到当内容横向溢出时，依然能够使用鼠标滚轮对内容进行滚动的方法。什么意思呢？来看看这么一种情况：我们有一个垂直方向溢出滚动的容器，以及一个水平方向溢出滚动的容器：如果使用的是非触控板（大部分用户没有触控板），而是使用鼠标来进行操作，会发现，这两个容器中，只有垂直方向溢出滚动的容器，是可以响应鼠标滚轮的：垂直方向溢出滚动的容器，正常响应鼠标滚轮，可滚动内容水平方向溢出滚动的容器，不会响应鼠标滚轮，不可滚动内容那么，这里可能就是一个用户痛点。如果在一些特定场景下，确实有横向滚动的内容，譬如横向的图片内容展示等。又想使用鼠标滚轮对内容进行滚动，能否做到呢？那是必须的，
今天，来实现这样一个有意思的交互效果：将原本的鼠标指针样式，修改成自己想要的效果，并且添加上一些特殊的交互效果。修改鼠标样式首先，第一个问题，我们可以看到，上图中，鼠标指针的样式被修改成了一个圆点：正常而言应该是这样：当然，这里比较简单，在CSS中，我们可以通过cursor样式，对鼠标指针形状进行修改。利用cursor修改鼠标样式cursorCSS属性设置鼠标指针的类型，在鼠标指针悬停在元素上时显示相应样式。cursor:auto;cursor:pointer;...cursor:zoom-out;/*使用图片*/cursor:url(hand.cur)/*使用图片，并且设置fallback兜
今天，来实现这样一个有意思的交互效果：将原本的鼠标指针样式，修改成自己想要的效果，并且添加上一些特殊的交互效果。修改鼠标样式首先，第一个问题，我们可以看到，上图中，鼠标指针的样式被修改成了一个圆点：正常而言应该是这样：当然，这里比较简单，在CSS中，我们可以通过cursor样式，对鼠标指针形状进行修改。利用cursor修改鼠标样式cursorCSS属性设置鼠标指针的类型，在鼠标指针悬停在元素上时显示相应样式。cursor:auto;cursor:pointer;...cursor:zoom-out;/*使用图片*/cursor:url(hand.cur)/*使用图片，并且设置fallback兜
开心一刻 有个问题一直困扰着我：许仙选择了救蛇，为什么杨过却选择救雕（而不救蛇） 后面想想，其实杨过救神雕是有原因的，当年神雕和巨蛇打架的时候 雕对杨过说：杀蛇，杀蛇，杀蛇！ 蛇对杨过说：杀雕，杀雕，杀雕！ 杨过果断选择了杀蛇业务场景 业务描述 业务上有这样的需求，张三、李四两个用户，如果互相关注则成为好友 设计上有两张表，关注关系表： tbl_follow 朋友关系表： tbl_friend 我们以张三关注李四为例，业务实现流程是这样的 1、先查询李四有没有关注张三 2、如果李四关注了张三，则成为好友，往 tbl_friend 插入一条记录；如果李四没有关
开心一刻 有个问题一直困扰着我：许仙选择了救蛇，为什么杨过却选择救雕（而不救蛇） 后面想想，其实杨过救神雕是有原因的，当年神雕和巨蛇打架的时候 雕对杨过说：杀蛇，杀蛇，杀蛇！ 蛇对杨过说：杀雕，杀雕，杀雕！ 杨过果断选择了杀蛇业务场景 业务描述 业务上有这样的需求，张三、李四两个用户，如果互相关注则成为好友 设计上有两张表，关注关系表： tbl_follow 朋友关系表： tbl_friend 我们以张三关注李四为例，业务实现流程是这样的 1、先查询李四有没有关注张三 2、如果李四关注了张三，则成为好友，往 tbl_friend 插入一条记录；如果李四没有关
今天，群友问了这样一个问题，如下所示的鼠标跟随交互效果，如何实现：简单分析一下，这个交互效果主要有两个核心：借助了CSS3D的能力元素的旋转需要和鼠标的移动相结合本文，就将讲述如何使用纯CSS实现类似的交互效果，以及，借助JavaScript绑定鼠标事件，快速还原上述效果。纯CSS实现元素的3D旋转如果不借助JavaScript，仅仅只是CSS，如何实现类似的3D旋转效果呢？这里会运用到一种名为正反旋转相消或者是正负旋转相消的小技巧。嗯，名字起的很奇怪，好像数学概念一样。在动画中，旋转是非常常用的属性，{transform:rotate(90deg);}如果我们给不同的层级的元素，添加不同方向
今天，群友问了这样一个问题，如下所示的鼠标跟随交互效果，如何实现：简单分析一下，这个交互效果主要有两个核心：借助了CSS3D的能力元素的旋转需要和鼠标的移动相结合本文，就将讲述如何使用纯CSS实现类似的交互效果，以及，借助JavaScript绑定鼠标事件，快速还原上述效果。纯CSS实现元素的3D旋转如果不借助JavaScript，仅仅只是CSS，如何实现类似的3D旋转效果呢？这里会运用到一种名为正反旋转相消或者是正负旋转相消的小技巧。嗯，名字起的很奇怪，好像数学概念一样。在动画中，旋转是非常常用的属性，{transform:rotate(90deg);}如果我们给不同的层级的元素，添加不同方向
小程序≠微信小程序说到小程序，大部分同学的第一反应，可能是微信小程序、支付宝小程序，确实，小程序的概念深入人心，并且已经被约定俗成的绑定到某些互联网公司的APP上。但是，“小程序”并不是一个注册商标，也不是哪一家的专利。小程序作为一种人机交互的软件载体、一种数字内容格式、一种代码分发传播机制，也到了被商业机构“借鉴”采用的时刻。企业们不是已经一直在用小程序吗？不算。因为他们不过是作为某个互联网大平台的内容贡献者、参与者，“免费”向互联网平台提供了自己的内容与服务，成为了别人的“生态一员”，换取流量的转化，以触达更多的互联网消费者。小程序类技术的企业商用，意味着：企业拥有了和互联网平台们类似的技
小程序≠微信小程序说到小程序，大部分同学的第一反应，可能是微信小程序、支付宝小程序，确实，小程序的概念深入人心，并且已经被约定俗成的绑定到某些互联网公司的APP上。但是，“小程序”并不是一个注册商标，也不是哪一家的专利。小程序作为一种人机交互的软件载体、一种数字内容格式、一种代码分发传播机制，也到了被商业机构“借鉴”采用的时刻。企业们不是已经一直在用小程序吗？不算。因为他们不过是作为某个互联网大平台的内容贡献者、参与者，“免费”向互联网平台提供了自己的内容与服务，成为了别人的“生态一员”，换取流量的转化，以触达更多的互联网消费者。小程序类技术的企业商用，意味着：企业拥有了和互联网平台们类似的技
