菜单

flip插件实现的翻牌效果示例_jquery_脚本之家

2020年3月15日 - 新闻中心

flip插件实现的翻牌效果示例_jquery_脚本之家。正文实例陈说了jQuery
flip插件完结的翻牌效果。分享给大家供大家参谋,具体如下:

正文实例叙述了jQuery完毕导航滚动到钦定内容效果。分享给我们供大家参照他事他说加以考察,具体如下:

近年做了个相似于塔罗牌翻牌的成效,共享给我们。

做页面制作也许有七年了,在那之中也做过无数页面效果,有大致的,也许有复杂的,后天就来享受三个导航滚动到故事情节的特效。

 flip  *{margin:0;padding:0;} .content{background:orange;height:300px;margin:100px auto;width:200px;}  ${ $.click{ var _this = $; _this.flip({ direction: 'lr', content: '反转后显示的内容,反转后显示的内容,反转后显示的内容,反转后显示的内容', onEnd: function(){ _this.css({ background: 'orange', color: 'white' }).unbind;

日常大家做导航滚动到剧情都以因而锚点来做,刷的一念之差就一向跳到内容了,未有一丝的轮转效应,並且url 链接最终会有“小尾巴”,前日本身就介绍一款 jquery
做的轮转的特效,既能安装滚动速度,又能够在 url 链接上未有“小尾巴”。

参数表达:

   #a{height:800px;background:red;} #b{height:800px;background:green;} #c{height:800px;background:black;} #d{height:800px;background:yellow;}   1111111111 2222222222 3333333333 4444444444     function scroll.ScrollTo;}

direction:翻转方向,总共有 4 个值,暗中认可 tb

jquery.scrollto.js:

content:设置翻转后容器内显示的剧情,能够是文本,能够是 html,甚至足以是
jquery 对象

jQuery.getPos = function { var l = 0; var t = 0; var w = jQuery.intval); var h = jQuery.intval(jQuery.css; var wb = e.offsetWidth; var hb = e.offsetHeight; while { l += e.offsetLeft + (e.currentStyle?jQuery.intval(e.currentStyle.borderLeftWidth):0); t += e.offsetTop + (e.currentStyle?jQuery.intval(e.currentStyle.borderTopWidth):0); e = e.offsetParent; } l += e.offsetLeft + (e.currentStyle?jQuery.intval(e.currentStyle.borderLeftWidth):0); t += e.offsetTop + (e.currentStyle?jQuery.intval(e.currentStyle.borderTopWidth):0); return {x:l, y:t, w:w, h:h, wb:wb, hb:hb};};jQuery.getClient = function { w = e.clientWidth; h = e.clientHeight; } else { w =  ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth; h =  ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight; } return {w:w,h:h};};jQuery.getScroll = function  { t = e.scrollTop; l = e.scrollLeft; w = e.scrollWidth; h = e.scrollHeight; } else { if (document.documentElement && document.documentElement.scrollTop) { t = document.documentElement.scrollTop; l = document.documentElement.scrollLeft; w = document.documentElement.scrollWidth; h = document.documentElement.scrollHeight; } else if  { t = document.body.scrollTop; l = document.body.scrollLeft; w = document.body.scrollWidth; h = document.body.scrollHeight; } } return { t: t, l: l, w: w, h: h };};jQuery.intval = function ; return isNaN ? 0 : v;};jQuery.fn.ScrollTo = function { o = jQuery.speed; return this.each{ new jQuery.fx.ScrollTo;};jQuery.fx.ScrollTo = function { var z = this; z.o = o; z.e = e; z.p = jQuery.getPos; z.s = jQuery.getScroll(); z.clear = function(){clearInterval;z.timer=null}; z.t=; z.step = function.getTime / z.o.duration; if (t >= z.o.duration+z.t) { z.clear(); setTimeout{z.scroll; } else { st = /2) + 0.5) *  + z.s.t; sl = /2) + 0.5) *  + z.s.l; z.scroll; } }; z.scroll = function {window.scrollTo}; z.timer=setInterval;},13);};

$;//id是跳转到内容的id;speed是滚动速度,值越大,滚动越慢

color:设置翻转后容器的背景观

完整实例代码点击这里本站下载。

speed:设置翻转速度,值越小速度就越快

越多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jQuery窗口操作本领总结》、《jQuery拖拽特效与手艺总括》、《jQuery常用插件及用法计算》、《jquery中Ajax用法计算》、《jQuery表格操作才干汇总》、《jQuery扩张技能总括》、《jQuery平淡无奇优异特效汇总》、《jQuery动漫与特功效法总计》及《jquery选拔器用法计算》

onBefore:设置翻转前供给实施的内容

企望本文所述对咱们jQuery程序设计具备利于。

onAnimation:设置翻转到贰分一的时候要求施行的内容

onEnd:设置翻转达成后须要实行的内容

PS:

jqueryui 供给加载 core 和 effects core

官方网址地址:

完整实例代码点击这里本站下载。

更加多关于jQuery相关内容感兴趣的读者可查看本站专项论题:《jQuery窗口操作本事计算》、《jQuery拖拽特效与才干总计》、《jQuery常用插件及用法计算》、《jquery中Ajax用法计算》、《jQuery表格操作技能汇总》、《jQuery增添本事总计》、《jQuery平淡无奇优良特效汇总》、《jQuery动漫与特功能法总计》及《jquery选取器用法总括》

指望本文所述对大家jQuery程序设计有着匡助。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图