jquery的特效源码_jquery特效代码

文章目录：

• 1、jQuery 页面加载等待特效，当数据加载完成效果消失的代码？
• 2、如何正确阅读jquery源码和jquery插件源码
• 3、完全理解jQuery源代码，在前端方面算什么水平
• 4、Jquery幻灯片特效代码分享--打开页面随机选择切换方式（3）
• 5、jQuery实现的导航动画效果(附demo源码)
• 6、使用JQuery在线制作ppt并在线演示源码特效

jQuery 页面加载等待特效，当数据加载完成效果消失的代码？

页面加载等待特效，当数据加载完成效果消失的代码如下:

$.ajax({

url:"",

type:"post",

data:{"xx":"xx"},

beforeSend:function(){

//这里是开始执行方法，显示效果，效果自己写

},

complete:function(){

//方法执行完毕，效果自己可以关闭，或者隐藏效果

},

success:function(){

//数据加载成功

},

error:function(){

//数据加载失败

}

});

如何正确阅读jquery源码和jquery插件源码

1. jQuery 里面有很多东西是出于兼容性，历史遗留。

比如 .ready() 之类的函数，为什么会很scroll 有关，那是为了兼容某些ie。这种代码对于编程思想来说不仅没用，而且是杂音，你要筛选出来就得了解这段代码的变动，费心费力得不偿失。

2. jQuery 里面的代码不一定是最优的，例如事件委托，每一次事件触发都要调用选择器，实际上是效率很低的。但是我又比较懒，没有提交patch。

3. jQuery 实际上很容易写出来一个 barebone alternative，在使用的过程中多想，多思考多总结就可以了。

4. jQuery 这类框架里真正有思维挑战性的东西不多，一半以上是堆代码而已，剩下的一点价值在于架构、抽象、扩展能力。

5. 我有一句话与所有的同行分享：工程师让需求成为现实，优秀工程师化复杂为简单，顶尖工程师变不可能为可能；架构师掌握现在，优秀架构师展望未来，顶尖架构师创造时代。

jQuery 的设计目的是，让前端工程师的工作更简单更轻松，但它并不适合所有的前端工程师，假如你的目标是成为优秀架构师、顶尖架构师的话，你在jQuery里也看不清未来。

完全理解jQuery源代码，在前端方面算什么水平

依读了2周jQuery源码的人感觉来说，完全理解jQuery，就拿jQuery 1.11这个版本10337行代码来说，水平已经很不错了。谦虚点说，已经入门。骄傲点，国内领先水平。但其码我感觉是js架构之路起行的第一步，完全理解源码，说明有独立构建或组织大型web前端框架的能力和基础。然后看看完全理解jQuery是一个怎么样的状态。

Jquery幻灯片特效代码分享--打开页面随机选择切换方式（3）

这篇文章主要介绍了jQuery实现幻灯片焦点图，可实现非常炫目时尚的幻灯片效果，非常具有实用价值，基本能满足你在网页上使用幻灯片(焦点图)效果，需要的朋友可以参考下

幻灯片效果描述：与前两节不同的是，这款特效可以打开页面随机选择切换方式（方向）

运行效果截图如下：

具体代码如下

head

meta

http-equiv="Content-Type"

content="text/html;

charset=gb2312"

/

titleJquery幻灯片焦点图插件/title

script

src="js/jquery-1.4a2.min.js"

type="text/javascript"/script

script

src="js/jquery.-1.2.1.min.js"

type="text/javascript"/script

script

type="text/javascript"

//打开页面随机选择

切换方式（方向）,怕增大KinSlideshow.js文件

就没把随机切换写到里面。

//使用时如有需要随机自己写在前面是一样的。而且还可以只固定随机切换哪几种。

var

moveStyle

var

rand

=parseInt(Math.random()*4)

switch(rand){

case

0:

moveStyle="left"

;break;

case

1:

moveStyle="right"

;break;

case

2:

moveStyle="down"

;break;

case

3:

moveStyle="up"

;break;

}

$(function(){

$("#KinSlideshow1").KinSlideshow({moveStyle:moveStyle});

})

/script

style

type="text/css"

#KinSlideshow{

overflow:hidden;

width:600px;

height:300px;}

/style

/head

body

h2打开页面随机选择切换方式（方向）---刷新看看

^_^/h2

div

id="KinSlideshow1"

style="visibility:hidden;"

a

target="_blank"img

src="images/11.png"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

a

target="_blank"img

src="images/23.png"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

a

target="_blank"img

src="images/4.jpg"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

a

target="_blank"img

src="images/5.jpg"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

a

target="_blank"img

src="images/22.png"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

/div

/body

/html

希望本文所述对大家的Jquery特效设计有所帮助。

jQuery实现的导航动画效果(附demo源码)

本文实例讲述了jQuery实现的导航动画效果。分享给大家供大家参考，具体如下：

经常在网上看到的，鼠标在导航上移动时，导航底部的横条会自动移动到鼠标悬浮的导航项上。

效果如下图：

利用jquery的

animate

函数，很好实现。代码很简单！

代码如下：

!DOCTYPE

html

html

head

meta

charset="utf-8"

title测试/title

script

src="jquery-1.9.1.min.js"/script

/head

body

div

class="2e8a-10e6-c33a-729d nav"

style="margin:

100px

auto;

width:960px;"

a

class="10e6-c33a-729d-3b12 active"

href="#"首页/a

a

href="#"产品/a

a

href="#"新闻中心/a

a

href="#"关于我们/a

a

href="#"联系我们/a

a

href="#"首页/a

a

href="#"首页/a

div

class="c33a-729d-3b12-eae8 line"/div

/div

style

.nav{

position:relative;

}

.nav

a{

padding:10px

20px;

border-bottom:solid

3px

#fff;

text-decoration:

none;

color:#666;

}

.nav

a:hover{

color:#66f;

}

.nav

.active,

.nav

.active:hover{

color:#f33;

}

.nav

.line{

position:absolute;

border-top:solid

2px

red;

width:0;

left:0;

top:0;

}

/style

script

function

navLine(o,

bo)

{

var

x

=

''

+

(o.position().top

+

o.outerHeight()

-

2)

+

'px';

var

y

=

''

+

o.position().left

+

'px';

var

w

=

''

+

o.outerWidth()

+

'px';

var

h

=

'2px';

$('.nav

.line').stop();

if

(bo)

{

$('.nav

.line').css({width:w,

height:h,

top:x,

left:y});

}

else

{

$('.nav

.line').animate({width:w,

height:h,

top:x,

left:y});

}

}

$(function(){

navLine($('.nav

.active'),

true);

$('.nav

a').hover(function(){

navLine($(this));

},

function(){

navLine($('.nav

.active'));

});

});

/script

/body

/html

完整实例代码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

使用JQuery在线制作ppt并在线演示源码特效

不多说，先给大家上效果图：

在线预览

源码下载

下面是jq在线制作ppt的html代码：

div

id="topbar"

class="729d-3b12-eae8-8ad6 navbar

navbar-fixed-top"

div

class="1c58-c250-d4ff-03c5 navbar-inner"

a

class="c250-d4ff-03c5-23d6 brand"

href="#"H5Slides/a

ul

class="d4ff-03c5-23d6-e09c nav"

id="title-label-wrapper"

data-bind="visible:

!editingTitle()"

lia

href="#"

id="label-title"

data-bind="text:

titleDisplay,

click:

editTitle"/a/li

/ul

form

class="03c5-23d6-e09c-1196 navbar-form

pull-left"

id="title-editor-wrapper"

data-bind="visible:

editingTitle"

onsubmit="return

false;"

input

type="text"

class="23d6-e09c-1196-3867 span2"

id="input-title"

placeholder="Input

Title

here..."

data-bind="value:

title,

hasfocus:

editingTitle"

/form

ul

class="e09c-1196-3867-dbdb nav

pull-right"

lia

href="#theme-manager"

data-toggle="modal"i

class="1196-3867-dbdb-48b2 icon-briefcase"/i

Themes/a/li

lia

href="#reset-confirm"

data-toggle="modal"i

class="3867-dbdb-48b2-6a37 icon-repeat"/i

Reset/a/li

li

a

href="#"

class="dbdb-48b2-6a37-2e8a dropdown-toggle"

data-toggle="dropdown"

i

class="48b2-6a37-2e8a-10e6 icon-play"/i

Preview

b

class="6a37-2e8a-10e6-c33a caret"/b

/a

ul

class="2e8a-10e6-c33a-729d dropdown-menu

pull-right"

lia

href="#"

id="preview-btn"From

start/a/li

lia

href="#"

id="preview-current-btn"From

current

page/a/li

/ul

/li

!--

lia

href="#"

id="publish-btn"i

class="10e6-c33a-729d-3b12 icon-ok"/i

Publish/a/li

--

!--

lia

href="#"

id="remove-btn"i

class="c33a-729d-3b12-eae8 icon-remove"/i

Remove/a/li

--

/ul

/div

/div