宝哥软件园

基于jQuery倾斜打开侧边栏菜单特效代码

编辑:宝哥软件园 来源:互联网 时间:2021-09-08

基于jQuery多重图片无限循环动画效果。这是一款非常实用的jQuery多图片无限循环动画特效插件。

效果图如下:

在线预览源码下载

超文本标记语言代码:

div id='纸张背面' nav div class=' close '/div a href=' # ' Home/a href=' # ' About Us/a href=' # '我们的工作/a href=' # ' Contact/a/nav/div id=' paper-window ' div id=' paper-front ' div class=' hamburger ' span/span/div id=' container ' p节点击左上角的按钮打开菜单/p p适用浏览器:FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。英国铁路公司不支持工业管理学(工业工程)及以下浏览器。p/p脚本src=' http :/scripts/BC/_ gg _ _ _ .js ' type=' text/JavaScript '/script/p/section section/section/div/div js代码:

var paper menu={ $ window : $(' # paper-window '),$ paper front : $(' # paper-front '),$hamburger: $(').汉堡'),偏移量:页面高度: $(' #纸张前端').outhealth(),open:函数(){这个.$窗口。add CLaSS(' tilt ');这个$汉堡包。关闭(“点击”);$(' #容器,汉堡包')。打开('点击',这个。很接近。绑定(这个));this.hamburgerFix(真);//console.log('正在打开.');},关闭:函数(){这个.$窗口。移除类(“倾斜”);$(' #容器,汉堡包')。关闭("点击");这个$hamburger.on('click ',这个。打开。绑定(这个));这个。hamburgerfix(假);//console.log('正在关闭.');},updateTransformOrigin:函数(){ scrollTop=this .$窗口。scroll top();等式=(在此上方滚动。偏移量)/这个。页面高度*;这个$纸张正面。CSS('变换原点','中心'方程式' % ');},hamburgerFix:函数(开始){ if(开始){ $('。汉堡包')。css({ position: 'absolute ',top: this .$窗口。scroll ToP()' px ' });} else { setTimeout(函数(){ $(')。汉堡包')。css({ position: 'fixed ',top : ' px ' });}, );} },bindEvents:函数(){这个.$hamburger.on('click ',这个。打开。绑定(这个));$('.关闭')。打开('点击',这个。很接近。绑定(这个));这个$window.on('scroll ',这个。updatetransformorigin。绑定(这个));},init:函数(){这个。bindEvents();这个。updatetransformorigin();} };纸质菜单。init();

更多资讯
游戏推荐
更多+