jquery+html5的3D焦点图特效

3 篇文章 0 订阅
1 篇文章 0 订阅

功能特点:
9个3D&2D转换与过渡画廊!
易于使用的视觉过渡建设者 -创建自己的自定义转换,并用它与滑块!
(大多是独特的)功能(YouTube和Vimeo的视频,自动暂停幻灯片自动播放和自动预览图像,如果视频正在播放,暂停悬停,图像预压,回路,
支持视频播放(优酷等)。
支持所有主要的浏览器(包括IE7-11,我们建议您使用Chrome浏览器,Safari或Firefox)。
翻译插件的支持(如qTranslate)创建多语言滑块。(未提供)
皮肤编辑器,你可以修改皮肤从您的WordPress管理。(未提供)
支持wordpress,discuz、phpcms、dedecms等。(未提供)
内置功能强大的API。(未提供)
在一个页面上的多个滑块。
20套(可扩展和替换)皮肤支持。(未提供)
分层的皮肤文件中包含PSD格式。(未提供)
幻灯模板。(未提供)
幻灯模块(可无限扩展)功能。
开发者文档。(未提供)
免费的支持和未来的自动更新功能更新。(未提供)

jQuery("#html5zoo-1").html5zoo({
	jsfolder:jsFolder,
	width:1000, <!-- 相册宽度。 true false ->
	height:450, <!-- 相册高度。 true false ->
	skinsfoldername:"",
	loadimageondemand:false,
	isresponsive:false, <!-- 鼠标触发自动响应。 true false ->
	autoplayvideo:false, <!-- 自动播放视频。 true false ->
	pauseonmouseover:true, <!-- 鼠标移上去暂停,离开继续播放。 true false ->
	addmargin:true,
	randomplay:false, <!-- 随机播放。 true false ->
	slideinterval:5000, <!-- 播放间隔时间。 5000, ->
	enabletouchswipe:true,
	transitiononfirstslide:false,
	loop:0, <!-- 循环播放。 0(无限循环) 1(循环1次) ->
	autoplay:true, <!-- 自动播放。 true false ->
	navplayvideoimage:"../../images/bg/play-32-32-0.png",
	navpreviewheight:60,
	timerheight:2,
	shownumbering:false,
	skin:"Frontpage", <!-- 皮肤。 "Frontpage", ->
	addgooglefonts:true,
	navshowplaypause:true,
	navshowplayvideo:true,
	navshowplaypausestandalonemarginx:8,
	navshowplaypausestandalonemarginy:8,
	navbuttonradius:0,
	navthumbnavigationarrowimageheight:32,
	navmarginy:20,
	showshadow:false,
	navfeaturedarrowimagewidth:16,
	navpreviewwidth:120,
	googlefonts:"Inder",
	textpositionmarginright:24,
	bordercolor:"#ffffff",
	navthumbnavigationarrowimagewidth:32,
	navthumbtitlehovercss:"text-decoration:underline;",
	navcolor:"#999999",
	arrowwidth:48,
	texteffecteasing:"easeOutCubic",
	texteffect:"fade",
	navspacing:12,
	playvideoimage:"../../images/bg/playvideo-64-64-0.png",
	ribbonimage:"../../images/bg/ribbon_topleft-0.png",
	navwidth:24,
	showribbon:false,
	arrowimage:"../../images/bg/arrows-48-48-3.png",
	timeropacity:0.6,
	navthumbnavigationarrowimage:"../../images/bg/carouselarrows-32-32-0.png",
	navshowplaypausestandalone:false,
	navpreviewbordercolor:"#ffffff",
	ribbonposition:"topleft",
	navthumbdescriptioncss:"display:block;position:relative;padding:2px 4px;text-align:left;font:normal 12px Arial,Helvetica,sans-serif;color:#333;",
	arrowstyle:"mouseover",
	navthumbtitleheight:20,
	textpositionmargintop:24,
	navswitchonmouseover:false,
	navarrowimage:"../../images/bg/navarrows-28-28-0.png",
	arrowtop:50,
	textstyle:"static",
	playvideoimageheight:64,
	navfonthighlightcolor:"#666666",
	showbackgroundimage:false,
	navpreviewborder:4,
	navopacity:0.8,
	shadowcolor:"#aaaaaa",
	navbuttonshowbgimage:true,
	navbuttonbgimage:"../../images/bg/navbuttonbgimage-28-28-0.png",
	textbgcss:"display:block; position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:#333333; opacity:0.6; filter:alpha(opacity=60);",
	navdirection:"horizontal",
	navborder:4,
	bottomshadowimagewidth:110,
	showtimer:true,
	navradius:0,
	navshowpreview:true,
	navpreviewarrowheight:8,
	navmarginx:16,
	navfeaturedarrowimage:"../../images/bg/featuredarrow-16-8-0.png",
	navfeaturedarrowimageheight:8,
	navstyle:"bullets",
	textpositionmarginleft:24,
	descriptioncss:"display:block; position:relative; margin-top:4px; font:14px Inder,Arial,Tahoma,Helvetica,sans-serif; color:#fff;",
	navplaypauseimage:"../../images/bg/navplaypause-28-28-0.png",
	backgroundimagetop:-10,
	timercolor:"#ffffff",
	numberingformat:"%NUM/%TOTAL ",
	navfontsize:12,
	navhighlightcolor:"#333333",
	navimage:"../../images/bg/bullet-24-24-4.png",
	navheight:24,
	navshowplaypausestandaloneautohide:false,
	navbuttoncolor:"#999999",
	navshowarrow:true,
	navshowfeaturedarrow:false,
	titlecss:"display:block; position:relative; font:16px Inder,Arial,Tahoma,Helvetica,sans-serif; color:#fff;",
	ribbonimagey:0,
	ribbonimagex:0,
	navshowplaypausestandaloneposition:"bottomright",
	shadowsize:5,
	arrowhideonmouseleave:1000,
	navshowplaypausestandalonewidth:28,
	navshowplaypausestandaloneheight:28,
	backgroundimagewidth:120,
	textautohide:true,
	navthumbtitlewidth:120,
	navpreviewposition:"top",
	playvideoimagewidth:64,
	arrowheight:48,
	arrowmargin:0,
	texteffectduration:1000,
	bottomshadowimage:"../../images/bg/bottomshadow-110-100-5.png",
	border:0,
	timerposition:"bottom",
	navfontcolor:"#333333",
	navthumbnavigationstyle:"arrow",
	borderradius:0,
	navbuttonhighlightcolor:"#333333",
	textpositionstatic:"bottom",
	navthumbstyle:"imageonly",
	textcss:"display:block; padding:12px; text-align:left;",
	navbordercolor:"#ffffff",
	navpreviewarrowimage:"../../images/bg/previewarrow-16-8-0.png",
	showbottomshadow:true,
	textpositionmarginstatic:0,
	backgroundimage:"",
	navposition:"bottom",
	navpreviewarrowwidth:16,
	bottomshadowimagetop:100,
	textpositiondynamic:"bottomleft",
	navshowbuttons:true,
	navthumbtitlecss:"display:block;position:relative;padding:2px 4px;text-align:left;font:bold 14px Arial,Helvetica,sans-serif;color:#333;",
	textpositionmarginbottom:24,
	ribbonmarginy:0,
	ribbonmarginx:0,
	slide: {
		duration:1000,
		easing:"easeOutCubic",
		checked:true
	},
	crossfade: {
		duration:1000,
		easing:"easeOutCubic",
		checked:true
	},
	threedhorizontal: {
		checked:true,
		bgcolor:"#222222",
		perspective:1000,
		slicecount:1,
		duration:1500,
		easing:"easeOutCubic",
		fallback:"slice",
		scatter:5,
		perspectiveorigin:"bottom"
	},
	slice: {
		duration:1500,
		easing:"easeOutCubic",
		checked:true,
		effects:"up,down,updown",
		slicecount:10
	},
	fade: {
		duration:1000,
		easing:"easeOutCubic",
		checked:true
	},
	blocks: {
		columncount:5,
		checked:true,
		rowcount:5,
		effects:"topleft,bottomright,top,bottom,random",
		duration:1500,
		easing:"easeOutCubic"
	},
	blinds: {
		duration:2000,
		easing:"easeOutCubic",
		checked:true,
		slicecount:3
	},
	shuffle: {
		duration:1500,
		easing:"easeOutCubic",
		columncount:5,
		checked:true,
		rowcount:5
	},
	threed: {
		checked:true,
		bgcolor:"#222222",
		perspective:1000,
		slicecount:5,
		duration:1500,
		easing:"easeOutCubic",
		fallback:"slice",
		scatter:5,
		perspectiveorigin:"right"
	},
	transition:"slide,crossfade,threedhorizontal,slice,fade,blocks,blinds,shuffle,threed" <!-- 过渡效果(共9种)。 slide,crossfade,threedhorizontal,slice,fade,blocks,blinds,shuffle,threed ->
});

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery是一个功能强大的JavaScript库,它简化了JavaScript在网页开发中的使用。jQuery提供了许多用于操作HTML元素、处理事件和动画效果、发送网络请求等常用操作的方法,使得开发者能够更高效地编写交互性的网页应用。 Bootstrap是一个流行的前端开发框架,它提供了一套美观、易用、响应式的CSS和JavaScript组件,可以快速构建现代化的网站和Web应用。Bootstrap包含了许多预定义的CSS样式和布局,可以轻松实现响应式设计、网格系统、表单样式等常见的页面组件。 HTML5是最新的HTML标准,引入了许多新的特性和功能,使得在网页上实现丰富多样的内容和交互效果变得更加容易。HTML5提供了新的标签和API,例如video和audio标签可以直接在网页上播放视频和音频,canvas标签可以实现绘功能,localStorage和sessionStorage API可以在客户端存储数据等等。 这三个技术和工具常常被同时使用于网页开发中。我们可以使用jQuery来简化DOM操作,例如选择元素、修改元素属性、添加删除元素等。而Bootstrap提供了美观的CSS样式和用户界面组件,可以用于快速构建网页的外观和布局。HTML5则提供了更多的交互功能和多媒体支持,例如使用canvas标签来绘制动画,使用localStorage来缓存数据等。 虽然这三个技术和工具的源代码非常庞大,但是它们的功能和用法相对简单。开发者可以在官方文档和各种教程中找到详细的用法和示例代码,可以根据自己的需要进行学习和使用。同时,这三个技术和工具都有着活跃的开发者社区和丰富的插件生态系统,可以进一步扩展它们的功能和应用范围。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值