文章关键字 ‘交互’

小tips: 滚动容器尺寸变化子元素视觉上位置不变JS实现

2018年02月2日,星期五

对于一个宽度不固定的滚动容器,如果里面内容已经滚动到了一定的高度,这个时候滚动容器的宽度发生变化,则里面内容的位置会进行重定位,一不留神就不知道刚才的位置是哪里了。

尤其是看小说这种非常考验眼力的场景。于是,就有需求:当滚动容器尺寸发生变化的时候(如宽屏窄屏切换,或者默认尺寸变全屏时候),最上面元素位置要保持不变,这样视觉体验就很好。不会因为突然的尺寸变化而不知道刚才看到哪里了。

那么该如何实现呢?

阅读全文…

基于active,checked等状态类名的web前端交互开发

2016年10月30日,星期日

常见的交互效果我们要不JS直接控制样式,要么添加一个具有我们希望样式的类名,但是,这两种实现都有不足之处,就是样式和行为耦合,对于日后的维护带来了隐患,怎么办呢?可以试试本文的基于active,checked等状态类名的web前端交互开发,说不定会为你打开另外一扇窗……

阅读全文…

折腾:2颗星星+纯CSS实现星星评分交互效果

2013年08月7日,星期三

发表评论的时候,我们经常会遇到点击星星做评分的交互。大部分情况下,大家使用的是5个一排5个一排的大块星星背景图实现的。实际上,两颗星星就可以搞定。本文就将展示这个。同时,有人觉得,实际需求还需要记住你选中的星星,CSS搞不定。实际上,这是可以使用CSS实现的。如何实现呢?就是本文要介绍的内容。

本文多技术展示,为便于理解,自制了不少原理示意图,以及必要的源代码展示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

Chrome下语音识别实现页面快速引导以及重要交互

2013年05月22日,星期三

今天,我们上线了一个小东西,基于Chrome浏览器语音识别功能实现的一个快速页面交互以及页面间跳转的效果,觉得大家都可以尝试尝试,因此,整理了下分享出来。

抛砖引玉、集思广益,有意见或建议什么的欢迎提出来,大家多多交流,共同进步。

阅读全文…

梳理:提高前端性能方面的处理以及不足

2013年04月3日,星期三

如题,自己折腾网站时候关于前端性能方面处理的一点经验梳理。自我总结同时也希望可以和大家多多交流。

阅读全文…

有意思:textarea resize属性下纯CSS交互效果

2013年03月27日,星期三

本文介绍的是使用纯CSS,利用textarea resize属性实现的一个交互效果,由于兼容性这个硬伤,仅供大家娱乐,仅供大家参考。

阅读全文…

基于HTML模板和JSON数据的JavaScript交互

2012年09月28日,星期五

本文内容如题,就是将如何是有HTML模板以及JSON数据进行JavaScript的数据呈现以及开发。里面的东西个人成分比较重,个人觉得是蛮好蛮实用的东西。因此,拿出来和大家分享分享。一如既往,有demo页面,有大量的截图配图以及必要的源代码展示。总之,希望本文的内容能够对您的学习有所帮助!

阅读全文…

翻译:关于表单每个设计师都必须知道的10件事

2012年04月11日,星期三

估计没有什么比表单更让设计师出气了。表单不一定可以让(设计师)表现创意,还是可以?我们可能需要从做基本的层面,重新审视表单,理解表单——表单是用户和软件之间的对话。

忘掉切换啊,点击什么的,表单是我们数字设计师(我想应该是依赖计算机进行设计的设计人员)将面临的最富有的交互。下一次,你要对付一个表单的时候,不要认为就是要应用好看的CSS效果或是添加漂亮的jQuery特效。表单设计的水是很深的。

我已经做过上百个表单用户测试,为保险公司、假期预订交互设计过一些非常复杂的表单,以及其他很多。可能你最近使用的某个表单就是我设计的……

阅读全文…

Apple iphone4官网图片“视网膜”放大效果实现

2010年08月25日,星期三


本文的内容就是展示苹果(Apple) iphone 官网上帅气的图片放大显示效果,同时并对其实现进行一番简单的讲解。内容主要涉及CSS3以及一些交互效果的实现,一如既往,巨丰富的页面截图,必要的代码展示,还是就是效果精湛的demo页面,但是,由于自身的懒惰,本文不提供打包的源文件下载。
本文的内容还是有一定的实际意义的,在实际的项目中是可以试试这种交互体验上佳的效果的。就技术而言,里面关于CSS3的一些内容,以及图片放大显示的实现,都有一定的学习价值的。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

js+flash(as3)实现复制文字内容到剪切板

2010年08月17日,星期二

单纯的js复制文字到剪切板较啰嗦,由于考虑到安全性等原因,使用类似点击按钮这类复制文字内容的操作往往多有限制,所以,总的来看,使用js实现文字等内容的复制不是个好方法。既然,js实现文字的复制有点啰哩吧嗦的,我们可以转向其他的方法,例如JavaScript的近亲,ActionScript,在AS3下,实现文字复制到剪切板要比js轻松很多。本文就是介绍如何通过flash为媒介实现将web页面上的文字复制到剪切板中。
提供代码展示,提供demo页面,提供源文件打包下载,希望能对您的学习有所帮助。

阅读全文…