40款经典前端特效插件---分享

JavaScript023

40款经典前端特效插件---分享,第1张

1.flavr—超级漂亮的jQuery扁平弹出对话框     

2.轻量级触摸响应滑块插件JQuery lightSlider      

3.带37种3D动画特效的跨浏览器CSS3动画框架       

4.jquery整屏滚动插件Scrollify        

5.jquery旋转木马插件SLICK         

6.jquery文字动画插件LetterFX          

7.jquery文本翻转插件Wodry.js       

8.jquery通知插件toastr       

9.jQuery滚动执行动画插件FadeThis      

10.jquery表单验证插件Bootstrap Validator       

11.jCountdown倒计时插件jQuery           

12.iCheck不一样的checkbok         

13.Owl Carousel强大的响应式jQuery焦点图轮播插件   

14.magic-带64种动画效果的CSS3动画库     

15.jQuery实时搜索插件-HideSeek       

16.bootstrap modal对话框             

17.一款模拟CSS3动画的js插件-move.js              

18.可替代CSS3 transition和transform的jQuery插件          

19.基于bootstrap的jQuery多功能模态对话框插件

20.带CSS3过渡效果的js模态窗口插件        

21.支持移动触摸设备的简洁js幻灯片插件

22.jQuery轻量级响应式扁平风格tabs选项卡插件

23.jQuery轻量级响应式Tooltip插件

24.jQuery简单且功能强大的图片剪裁插件

25.带CSS3动画过渡效果的jQuery模态窗口插件

26.中国省市区地址三级联动jQuery插件

27.移动端优先且支持jQuery和Zepto的模态对话框插件

28.jQuery简单实用的tooltip插件

29.带CSS3过渡动画效果的jQuery Tabs选项卡插件

30.x0popup-纯js弹出对话框插件

31.WOW.js-元素在页面滚动时展示CSS3动画JS插件

32.Windows8样式的消息提示框jQuery插件

33.jQuery星级评分插件

34.fsBanner-实用的网站响应式Banner手风琴插件

35.draggabilly-功能强大的拖动拖拽元素插件

36.验证插件vali.js

37.响应式jQuery图片放大镜插件magnificent.js

38.可快速生成各种阴影效果的jQuery插件

39.基于jquery的非常逼真的全屏下雪效果

40.纯文本Loading加载指示器特效

<div id="showId">显示的对话框</div>

<span id="clickDiv">点击</span>

相信给showId加上浮动,你应该能搞定,然后就是JS了,

jQuery

jQuery("#clickDiv").click(function(){ //点击clickDiv

jQuery("#showId").show()//显示showId

setTimeout(jQuery("#showId").hide(), 3000)//3秒后关闭showId

})

你可以试试!我没测试,不过这个很简单,你把代码看下应该就会明白了!

可以用jDialog插件实现,jDialog是一款基于jquery实现的轻量级多种类型的自定义对话框插件在项目开发中、一般会美化 alert();

参考如下:

<center>

<button id="test1">alert方式调用</button>

<br/><br/>

<button id="test2">confirm方式调用</button>

<br/><br/>

<button id="test3">iframe方式调用</button>

<br/><br/>

<button id="test4">只显示内容对话框</button>

<br/><br/>

<button id="test5">对话框配置按钮</button>

<br/><br/>

<button id="test6">message方式调用</button>

<br/><br/>

<button id="test7">tip方式调用</button>

</center>

以下是JS代码

$("#test1").click(function(){

var dialog = jDialog.alert(´欢迎使用jDialog组件´,{},{

showShadow: false,// 不显示对话框阴影

buttonAlign : ´center´,

events : {

show : function(evt){

var dlg = evt.data.dialog

},

close : function(evt){

var dlg = evt.data.dialog

},

enterKey : function(evt){

alert(´enter key pressed!´)

},

escKey : function(evt){

alert(´esc key pressed!´)

evt.data.dialog.close()

}

}

})

})

$("#test2").click(function(){

var dialog = jDialog.confirm(´欢迎使用jDialog组件,我是confirm!´,{

handler : function(button,dialog) {

alert(´你点击了确定!´)

dialog.close()

}

},{

handler : function(button,dialog) {

alert(´你点击了取消!´)

dialog.close()

}

})

})

$("#test3").click(function(){

// 通过options参数,控制iframe对话框

var dialog = jDialog.iframe(,{

title : ´

width : 1100,

height : 550

})

})

$("#test4").click(function(){

// 通过options参数,控制dialog

var dialog = jDialog.dialog({

title : ´自定义对话框´,

content : ´

})

})

$("#test5").click(function(){

// 通过options参数,控制dialog

var dialog = jDialog.dialog({

title : ´自定义对话框´,

content : ´,

buttons : [

{

type : ´highlight´,

text : ´你好´,

handler:function(button,dialog)

{

dialog.close()

}

}

]

})

})

$("#test6").click(function(){

var dialog = jDialog.message(´´,{

autoClose : 3000,// 3s后自动关闭

padding : ´30px´,// 设置内部padding

modal: true // 非模态,即不显示遮罩层

})

})

$("#test7").click(function(){

var dialog = jDialog.tip(´´,{

target : $(´#test7´),

position : ´left-top´,

trianglePosFromStart :0,

autoClose : 1000,

offset : {

top :-20,

left:10,

right:0,

bottom:0

}

})

})