摘要: 尽管现在很多浏览器都支持圆角border-radius这个属性了。 以前做圆角还没那么简单的时候,能用其他方法模拟出圆角,但是不尽完美就是了。 以前在看对话框的时候就疑惑,对话框旁边的小尖角是怎么做的。 看到一篇博客用字符做出来,感觉又get到了技能。 用字符做圆角的话,还是略显粗糙,在浏览器放大到 阅读全文
posted @ 2017-12-08 14:31 柠檬张先生 阅读(375) 评论(0) 推荐(0) 编辑
摘要: 个人觉得蛮有意思的写法,可以考虑用进项目里 点击看效果demo 技术参考:http://www.zhangxinxu.com 阅读全文
posted @ 2017-12-08 10:43 柠檬张先生 阅读(290) 评论(0) 推荐(0) 编辑
摘要: 操作元素选取的是img元素 mvvm选取的是avalon框架 操作类名上感觉还是jquery有着很强的优势,毕竟有着toggle方法 mvvm上实现相同效果还得做逻辑判断,比较麻烦,代码行数就多了几行。 点击看效果demo 阅读全文
posted @ 2017-12-08 09:03 柠檬张先生 阅读(1890) 评论(0) 推荐(0) 编辑
摘要: 这几天深深得感觉到自己CSS能力的不足,以前自己总觉得一心学好JS就可以走遍天下都不怕。 沉下心来看别人CSS代码,确实觉得CSS也是一门精神的学问,丝毫不亚于JS的学问。 从小小的按钮就可以看出学问深浅。 谷歌按钮全是css代码构成的,没有一丁点的图片,从圆角,到高光渐变全是css实现。更难能可贵 阅读全文
posted @ 2017-12-07 17:36 柠檬张先生 阅读(224) 评论(0) 推荐(0) 编辑
摘要: 核心代码: 点击看效果demo 在循环中,返回闭包,记住图片序号值。 让运动函数负责图片序号值的图片展示。 demo源码: 效果图: 技术参考:http://www.zhangxinxu.com 阅读全文
posted @ 2017-12-07 15:56 柠檬张先生 阅读(219) 评论(0) 推荐(0) 编辑
摘要: 之前做了一个滑动展示大图片的demo,之后在大神博客发现大神也做过一个类似的插件。 于是把插件摘了下来研究了一下。 改动了插件显示文本的部分并增加了一点注释。效果比我的好用。 点击看效果demo 插件源码如下: demo源码如下 效果图如下 阅读全文
posted @ 2017-12-07 14:05 柠檬张先生 阅读(156) 评论(0) 推荐(0) 编辑
摘要: 一个盒子里文字过长,如果容器宽度固定,那么文字就会下溢,这样也就不美观。 所以在最末位超出宽度时用省略号显示会美观一点。 点击看效果demo demo源码。 效果图 个人总结: 如今几乎所有浏览器都支持了text-overflow:ellipsis; 所以实现方法可以给定盒子宽度和text-over 阅读全文
posted @ 2017-12-07 11:04 柠檬张先生 阅读(263) 评论(0) 推荐(0) 编辑
摘要: 这里的mvvm框架选用的是avalon. 元素插入用的是img做例子。 点击看效果demo 核心代码: 可以很清晰得看见。以上两种方式的效果是一样的,mvvm模式下的元素插入和删除会更加简洁。 demo源码 阅读全文
posted @ 2017-12-06 14:37 柠檬张先生 阅读(298) 评论(0) 推荐(0) 编辑
摘要: 核心方法: 鼠标滑动的时候通过触发动画动态改变目标图片和其他相邻图片的长度来突出目标图片 demo源码 点击看效果demo 效果图 这是划过第一个图片的伸缩效果 阅读全文
posted @ 2017-12-06 11:32 柠檬张先生 阅读(621) 评论(0) 推荐(0) 编辑
摘要: 话不多说,直接源码 点击看效果demo css主要用到两个地方: 1.垂直居中展示图片 2.圆角展示外框 以上两个地方的css可以看到前几篇的点击放大图片和垂直居中图片 阅读全文
posted @ 2017-12-06 10:44 柠檬张先生 阅读(153) 评论(0) 推荐(0) 编辑