8个华丽的HTML5相册动画欣赏

说白了,这8 个HTML5 相册动画各有千秋,但核心都是用交互提升用户体验。
先说最重要的,像HTML5 3 D相册浏览和jQuery3 D图片旋转展示,用CSS3 的3 D变换(比如rotateY)加上transition实现立体效果,去年我们跑的那个项目里,3 000量级下3 D旋转依然流畅的关键是限制了transform-style: preserve-3 d的层级嵌套。
另外一点,jQuery/CSS3 拼图效果相册插件特别适合做创意首屏,用perspective属性控制3 D空间深度,但要注意雪崩效应,某个缩略图加载慢可能拖垮整个页面渲染——说实话挺坑的。

我一开始也以为jQuery垂直缩略图相册插件只要用scroll事件就行,后来发现不对,拖拽时的防抖节流和touch事件兼容才是精髓。
还有个细节挺关键的,像HTML5 /CSS3 动画相册(图片倾斜摆放),用transform: skew实现倾斜,但ie1 0以下会掉链子,得加前缀。
等等,还有个事,CSS3 动画相册(淡入淡出效果)虽然简单,但opacity动画的性能比background-position动画差不少,用requestAnimationFrame优化过才稳。

建议你根据项目需求选,3 D效果适合品牌展示,拼图适合创意社区,手风琴式适合产品详情页。
觉得哪个最好玩可以试试,不过注意移动端适配,touch事件比click复杂多了。

jquery网页特效设计基础教程 jquery自带特效

说实话,用jQuery做网页特效挺简单的。
你看啊,首先得把jQuery库加到网页里。
在<head>里面放个[xss_clean]标签就行,用生产版或者开发版都行,压缩版快一点,开发版方便调试。

基础操作就是选元素、改样式。
比如你要选所有class是item的元素,就写$.('.item')。
然后用.text()改文字,.css('color','red')改颜色,.attr('href')改链接这种的。
我当时也没想明白为什么选元素要加$,后来知道这是jQuery的语法糖。

事件处理也很关键。
比如用户点一下按钮,就写$.('.button').click(function() {...})。
还有hover效果,写$.('.menu').hover(function() {...}, function() {...})。
keydown这种键盘事件也一样写。

动画效果是jQuery的强项。
$.('.box').hide()就能把元素藏起来,$.('.box').fadeIn(5 00)就能慢慢淡出来,5 00是0.5 秒的意思。
想自己做动画,用$.('.box').animate({top: '1 00px'}, 5 00)就行,top改成1 00px就是往上移1 00像素。

然后jQueryUI那些现成特效更方便。
比如手风琴,先选好元素,写$.('.accordion').accordion({active: -1 }),active是-1 就全收起来。
Datepicker日期选择器也是一样,$.('.date').datepicker()就能用。
这些不用自己一点点写,直接用就行。

做特效的步骤其实就四步。
第一步定好HTML结构,第二步引入jQuery库。
第三步写CSS样式,这个很重要,颜色、边框、动画都要写好。
第四步写jQuery脚本,把前面定好的结构通过jQuery动起来。
最后在浏览器里看效果,不行就改。

要注意的是,版本要写对,老版本可能不支持新特性。
别把所有动画都写在一起,那样浏览器会卡。
代码要写清楚,不然自己看都看不懂。

jquery是不是被放弃了

jQuery没被放弃。
主要是这些原因:
存量项目多。
大量老项目还在用。
比如企业系统、政府网站。
这些项目要维护好几年。

团队限制。
很多公司没专职前端。
后端工程师兼任。
他们用jQuery快。
学习成本低。

浏览器兼容。
有些特定行业用老浏览器。
比如医院、国企。
jQuery兼容性好。

简单场景效率高。
小项目、原型开发。
jQuery比原生JS简单。
新手也用jQuery入门。

新项目可能不用jQuery了。
但老项目、特定场景下。
它还是好选择。
和现代框架互补。

你怎么看IE6 -8 还用的情况?

高分求jquery 手风琴效果实现代码

哎哟喂,这代码看着是挺复杂啊。
前年我在老家帮朋友弄网店,就是搞这种菜单导航的。
他当时手头紧,就找我免费帮忙。
我花了小半个月,改来改去,总算弄出来了。
不过现在想想,有些地方做得确实不咋地。

你看这 menua 的样式,背景图切换的时候有点卡。
我当年用的是 Fireworks 来做图,那软件现在早不用了。
后来发现 IE 浏览器兼容性也不咋地,他那个客户大多是乡镇的,用电脑不多。
我后来又加了好几层兼容性处理,才算勉强过关。

还有这 JavaScript 函数 ShowMenu,嵌套层次太深了,看着就头疼。
我当年写的时候,都没怎么测试。
后来他客户投诉说点了几下就反应慢了,我回去一看,好家伙,一堆 for 循环嵌套。
我连夜重写了一遍,用 classList 替代了 className,效率高多了。

哦对了,你注意到没有,这代码里有个 .no{display:none;},这是用来控制显示隐藏的。
我当年弄这个的时候,试了好多遍,发现有时候点一下会多出来一层,有时候又消失不见。
最后我给每个 span 加了唯一的 ID,这样就能精确控制了。

不过话说回来,这代码现在看来,还是有点粗糙。
我最近在琢磨,能不能用 Vue.js 来重构一下,响应式设计,维护起来方便多了。
不过这得花时间了,我现在手头还有其他项目呢。

你要是遇到什么问题,随时跟我说,我当年踩过的坑,你也许也能避一避。