jquery特效网页,jquery网页制作 收藏 0

jQuery 动画制作与特效

使用show()和hide()方法

在普通的javascript编程中,要实现元素的显示、隐藏通常是利用其CSS的display属性或者visibility属性。

在jQuery中提供了show()和hide()两个方法,来直接实现元素对象的显示和隐藏。

jQuery代码：

HTML代码：

制作多级菜单

jQuery代码:

HTML代码:

理解: e.target是引发事件的元素

this是当前执行事件句柄的元素,this等于e.currentTarget(在事件冒泡阶段中的当前DOM元素 )

if(this==e.target)语句作用。

this指的是定义事件的所有含有ul的li标签。

e.target指的是触发事件的对象,可能是包含ul的li, 也可能是该li内部的任何元素, 显然我们不能点击内部任意位置都触发事件，

所以必须添加判断, 只有点击当前菜单选项时才执行收起子菜单动作;如果去掉这个判断, 那么只要你点击二级菜单的任意位置, 就会收起菜单,

显然是不行的, 你可以去掉判断看看效果就明白了。

使用toggle()方法实现显隐切换

曾经介绍过toggle()方法,该方法接受两个函数作为参数,相互切换;

如果不接受参数,toggle()方法将默认为在show()和hide()之间切换,因此修改上面案列为:

HTML代码:

元素显隐和渐入渐出效果

show(duration,[callback]) duration表示动画执行的时间长短,可以是表示速度的字符串,包括slow、normal、fast，

也可以是表示时间的整数(毫秒);callback为可选的回调函数,在动画完成后执行;

jQuery代码：

HTML代码：

与show()和hide()方法一样,toggle()方法也可以接受两个参数,制作成动画的效果;

jQuery代码：

HTML代码:

使用fadeIn()和fadeOut()方法

fadeIn(duration,[callback]) 渐显(颜色增强)

fadeOut(duration,[callback]) 渐隐(颜色褪色)

其中参数duration和callback与slow()、hide()中的完全相同;

制作渐渐褪色的动画效果:

jQuery代码:

HTML代码:

使用fadeTo()方法自定义变幻目标透明度;

jQuery代码:

fadeTo(duration,opacity,callback)方法,能够让开发者自定义变幻的目标透明度.其中opacity的取值范围为0.0~1.0

HTML代码:

当使用fadeOut()方法时,图片完全消失后将不在占用<p>的空间,

而使用fadeTo(1000,0)时,虽然图片也完全不显示,但仍然占用着标记<p>的空间

幻灯片效果

slideUp()和slideDown()来模拟PPT中的类似幻灯片拉窗帘的特效

slideUp(duration,[callback]) 上滑(消失)

slideDown(duration,[callback]) 下滑(显示)

jQuery代码:

HTML代码:

停止所有在指定元素上正在运行的动画。

stop([clearQueue],[jumpToEnd])

clearQueue:如果设置成true, 则清空队列。可以立即结束动画。

gotoEnd:让当前正在执行的动画立即完成, 并且重设show和hide的原始样式, 调用回调函数等。

点击Go之后开始动画,点Stop之后会在当前位置停下来

HTML 代码:

jQuery 代码:

实例：阻止动画播放

delay(duration,[queueName])

设置一个延时来推迟执行队列中之后的项目。

总结：

1、基本效果

show()：将隐藏的元素显示

show(speed,[callback]) ：以动画的效果显示

hide()：将显示的元素隐藏

hide(speed,[callback]) ：以动画的效果隐藏

toggle()：显示或者隐藏

toggle(switch) ：如果参数为true则表示只显示, 反之如果参数为false则表示只隐藏

toggle(speed,[callback])：以动画的方式显示或者是隐藏

参数说明：

speed：速度 单位为毫秒

\”slow\”, 缓慢

\”normal\”, 正常

\”fast\” 快速

callback：回调函数 当动画执行完毕以后再来执行的函数

2、滑动效果

slideDown()：将隐藏的元素显示

slideDown(speed,[callback]) ：以动画的方式显示

slideUp()：将显示的元素隐藏

slideUp(speed,[callback]) ：以动画的方式隐藏

slideToggle()：隐藏或显示

slideToggle(speed,[callback])：以动画的方式隐藏或者显示

参数说明：

speed：速度 单位为毫秒

\”slow\”, 缓慢

\”normal\”, 正常

\”fast\” 快速

callback：回调函数 当动画执行完毕以后再来执行的函数

3、淡入淡出

fadeIn()：淡入

fadeIn(speed,[callback]) ：以动画的方式进行淡入

fadeOut()：淡出

fadeOut(speed,[callback])：以动画的方式进行淡出

fadeTo(speed,opacity,[callback]) ：淡入淡出到指定值

opacity：透明度 取值：0-1之间 0表示完全透明 1表示不透明

callback：回调函数 当动画执行完毕以后再来执行的函数

show() 显示元素 hide()隐藏元素 toggle()显示和隐藏切换

fadeIn() 渐显(颜色增强) fadeOut()渐隐(颜色褪色) fadeTo() 自定义变换目标透明度 fadeToggle() 淡入和淡出切换

slideUp() 幻灯片上滑(消失) slideDown() 幻灯片下滑(显示) slideToggle() 幻灯片上滑和下滑切换

4 停止所有在指定元素上正在运行的动画。

stop([clearQueue],[jumpToEnd])

clearQueue:如果设置成true, 则清空队列。可以立即结束动画。

gotoEnd:让当前正在执行的动画立即完成, 并且重设show和hide的原始样式, 调用回调函数等。

jQuery.ZoomLoad.js 仅1.5k

这是头一次开发jQuery插件。因为切图网的原因，本人一直在于网页前端开发打交道，jQuery写了多少行特效已经无法统计了，jQuery幻灯片，图片滚动，select，radio，checkbox美化等效果基本都是手写出来，滚动条事件的效果等，基于这个经验，开发一款jQuery插件就不是太难了，关键是执行力不好，很多时候想到的事情，到最后都没有做出来。

做插件是很好的一件事情，如果时间很多的话，它的好处在于，下次项目中就可以直接用插件了，所以插件需要具备最关键的一点就是灵活性高，兼容性好等，jQuery.ZoomLoad.js 插件的开发还是碰到了很多困难，好在查阅文档都一一解决了。并运用到了一个客户项目中，效果和兼容性都不错。

写插件有点像写作文的小结，是会以往项目中好的代码的一个聚合和总结，反复优化，所以以后有时间会经常出一些插件分享。

以下来自文档的说明

———————————————-

jQuery.ZoomLoad是一款基于jQuery开发的插件，它可以让你的网站图片以放大的形式打开，并且支持滚动条的响应，可以增强用户体验，并且调用很简单，一行代码调用就可以让你的网站炫起来。PS：它与lazyload不一样，它不具备替网站提速的“功效”，它只是在图片的打开方式上让用户获得一种全新的体验。

http://www.qietu.com/p/jquery_zoomload

不懂代码也能做出酷炫可视化大屏

最近在做一个数据可视化大屏项目，从指标设计、视觉设计、可视化动效到大屏硬件、开发工具整个流程，总结了一些经验和观点，想和大家分享。

大屏制作工具

大屏的制作，可以用代码开发或现成的可视化工具来实现。

用的比较多的就是JS+Ecahrts，但数据量支撑、后台响应、实时更新、平台运维等应该还要调用更多的技术，这个不是非常懂就不赘述了。

另一种是用现成的可视化工具，能相对简单高效的搭建一个数据大屏，比如帆软FineReport，阿里dataV。

大屏硬件

大屏的展示工具几乎都是LED拼接屏，如果是boss办公室这种也有用大屏幕显示器的。

用LED拼接屏，UI设计时不用考虑屏幕缝隙影响内容的呈现，内容不会丢失，但有可能影响视觉的表现。设计时需要建立缝隙位置的参考线避，免类重要信息被分割。现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏，缝隙越小越贵。

拼接的每块小屏一般是16:9的高清屏，设计尺寸可以把上下高度设定为1080px，长度按照拼接屏的数量比例得出长度的设计尺寸。例如3乘5的一块大屏幕，高度3块屏设为1080，每块高就是360，360除9乘16等640，640就是一块屏幕的长度，640乘5块屏＝3200最后得出设计稿尺寸就是：高1080px乘宽3200px。

下图是天猫可视化大屏设计，图中屌炸天的3D地球围绕粒子效果。

接下来就来讲讲制作可视化大屏的重头戏，指标、布局、设计、动效。以FineReport制作大屏为例，这篇文章将教你怎么实现可视化。

指标设计

设计大屏，大家可能会被酷炫的可视化所感动，但一定要谨记，大屏一定是以展示数据为核心，任何炫酷屌炸天的表现都要建立在不影响数据的有效展示上！

所以，大屏首要考虑的是放哪些数据，那么多指标应该放那些？

一般而言，一个大屏一定会有明确的主题，比如销售数据大屏，集团营业数据大屏。针对这种主题明确的可视化，推荐一个非常好用的套路——多维度拆解北极星指标法。

第一步：确定一个北极星指标。如销售大屏，你的销售总额一定是最重要的吧，这就是主题。

第二步：多维度拆解北极星指标，把你的销售额情况分解。

从时间的维度。每个季度每个月的销售额情况是如何，销售额特别高的时间段，原因是什么，做了哪些措施？

从地理维度。各大区域销售额情况如何？可以做个排名情况。

从计划维度。和年初定的计划相比，差了多少？

从占比维度。各个产品占的销售额多少，哪些是带来贡献最多的明星产品。

布局

布局的目的是为了让业务指标和数据合理的展现。由于往往展现的是一个全局的业务，一般分为主要指标和次要指标两个层次，主要指标反映核心业务，次要指标用于进一步阐述分析，所以在制作时给予不一样的侧重。

这里推荐几种常见的版式：

上面几个版式不是金科定律，只是通常推荐的主次分布版式，能让信息一目了然。实际情况中，不一定使用主次分布，也可以使用平均分布，或者可以二者结合进行适当调整。比如下图所示，指标很多很多，存在多个层级的，就根据上面所说的基本原则进行一些微调，效果会很好。

视觉设计

设计的风格，背景色一般用深色调，深色调紧张感强，让视觉更好的聚焦，大屏暗色调看上去更柔和舒服不刺眼，也会较省电。

大屏设计跟网页不一样，页面不能有滚动条，大屏的长宽都是固定的。

字号跟网页设计一样不小于12号字，可以用于图表的标注，数据信息建议14号字以上，大屏观者远距离才能看全内容，所以字号可以稍大一点。字体不一定只用一种，可以用到一些科技感强的字体，这里要注意，记得把字体给开发一份。

设计完成先去大屏上看一下效果，大屏的品质不一样色调也会有很大的差别，要根据自家的大屏呈现效果做调整。

可以去看一个开源的jquery插件库网站，里面有很多很棒的动态效果！

交互设计

我把大数据可视化大屏分为两种，一种“纯展示型”另一种“展示＋功能型”。纯展示型几乎没有交互，后台录入数据，在大屏上展示就行了。展示＋功能型，例如实时监控数据、采集数据、数据对比功能、云计算数据、分析与预警等等。

这里着重说一下带有功能型的大屏产品的结构层（信息架构）。一切功能结构都要围绕核心数据主页面来架构，因为大屏展示的核心就是将一些业务的关键指标数据以数据可视化的方式展示出来。

动效设计

大数据可视化大屏设计少不了动效，动效是可视化重要的组成部分，动效的增加能让大屏看上去是活的，增加观感体验。但过分的动效极其容易喧宾夺主，让观看者的眼球不知道往哪里聚焦，反而弱化了数据的展示。

其实，把握动效设计这个度其实并不难，只要看的舒服不影响数据清晰展示就可以，有数据展示的页面最好动的地方不易过多，如果要多，几个动画就得有节奏的变化，例如一个动画表现的视觉强，另一个就表现稍弱化，有强有弱、有主有次节奏才会舒服，同时动效能结合数据的变化而变化最好，这样就不容易看数据内容被动画抓走眼球。

动效怎么实现？

我习惯用AE的插件Bodymovin生成json文件实现。

这里用FineReport做大屏自带一些可视化动效：

3D动效怎么实现？

如果自己开发，用软件C4D+AE+PS，先建模选软再导入AE视觉稿。这里我就用了FineReport自带的3D动效。无非就是个炫，放一两个就够了。

3D地球可视化

开篇给大家留个悬念，怎么设计3D地球动画。天猫双十一阿里的3D地球是有专门人员设计的，阿里也有这方面的组件库。我们可以用开源网站类似组件来实现，大数据页面用到的图表这个网站几乎都有，且免费。最终的效果是用两个组件拼合在一起实现的，左边就是代码，后台录入信息可以让粒子效果匹配数据，最终实现数据的可视化。

同样有很多的图表组件，可以用Echarts和Highcharts。前者免费、开源、效果炫酷、原生全中文，但兼容性差、经常报错、文档不够详情。或者用更强大的Highcharts，优点是文档实例很详细、易懂易学、兼容性强可兼容到IE6，但是收费。

下图是我用FineReport做项目时的3D地球可视化插件。

最后，附上几张FineReport的大屏图。带自动播放效果及3D动画特效的数据可视化！

FineReport的大屏可以离屏用ipad控制，做到内容交互，简直是业务演示汇报的利器！

实际应用场景。

总结

大屏设计是一个长期跟进的过程，有很多问题会在数据真正进来时，放在大屏上才能发现，所以等产品做到落地时设计方面要积极跟进改进。

好了就这么多感谢阅读，希望这篇文章对你有一点用！想尝试大屏制作的，先从下载FineReport学做dashboard开始吧。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com