摘要：鼠标悬浮,边框div边框的动画样式,效果图如下: 首先定义div及其样式: 界面展示效果如下: 通过指定样式clip来指定,裁剪的区域: 然后需要做的是将这个裁剪过程用动画连贯起来,修改css样式 更改之后的效果图如下: 同样可以定义出保留上边框和左边框的动画样式: 由于开篇示例中的动画,是左上,和 阅读全文

摘要：有了上一篇图片放大镜的铺垫,今天的这个例子是缩小镜,因为裁剪的原图往往很大,不能在工作区域看到全部图片,所以,要有缩小镜来显示,当前裁剪的区域是原图的个部分.按照惯例首先看下效果图: 功能一:载入默认图片 功能二:选择本地图片 功能三:拖拽(鼠标直接拖动工作区视窗) 功能四:放大,缩小(点击按钮放大 阅读全文

摘要：今天有时间开始动手,使用css+jquery实现了图片局部放大的组件,首先看看效果图: 界面设计思路如下: 本示例大部分编码在javascript脚本,以下列出各部分的源码: css: Javascript: 由于原图是1920*1080不是缩略视窗严格的2:1,计算中有小数等原因,使网格标识的区域 阅读全文

摘要：用flex,实现多级菜单分类展示,这里记录一下,方便以后查阅. 效果展示如下: 跟上面floor的设计差不多,鼠标hover全部商品分类的时候,将下拉列表展示在指定区域,这个类似鼠标悬浮商品图片期待上线的按钮出现的方式,不过由于一级分类和二级分类没有不是父子关系,在处理一级分类hover对应二级分类 阅读全文

摘要：有了上一篇,对flex的初次使用,心里痒痒的试着,实现了电商首页,商品展示的floor,先看下效果: 要实现首先是对组件构件的拆解,拆解如下: 页面布局如下: 样式如下: flex 弹性布局,在实现子元素对齐方式,和排列顺序上很方便! 阅读全文

摘要：一直想自己动手做一个图片轮播的控件,查查网上的资料大多引用已经做好的组件,其原理算法不是很清楚,于是自己用jquery写了一个.先看下效果图: 主要界面实现思路如下: 图片轮播设计思路: 下面是页面代码: 才开是学习前端,代码有需要重构的地方,比如页码hover的逻辑,也向左向右按钮的事件代码有重复 阅读全文