




已阅读5页,还剩11页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
凌云 353630544Jquery深入浅出精华教程Jquery精华教程1目的:为jquey 菜鸟提供一份从简单到复杂的jquery教程11、用户无操作自动处理12、图层拖动33、自定义鼠标右键64、 鼠标滑过改变背景85、靠右悬浮,点击自动靠边126、禁止全选、复制、右键157、 轨迹动画15目的:为jquey 菜鸟提供一份从简单到复杂的jquery教程1、用户无操作自动处理默认10秒无用户操作发生,则自动跳转 用户无操作 $(function() util_global_nothing_init(); $(#btn).click(function() util_global_nothing_reset(); ); ) var util_global_nothing_fun=null;var util_global_nothing_time=10;/监听器function util_global_nothing_init()util_global_nothing();$(document).bind(click mouseover,function() util_global_nothing_reset(); );/重置函数function util_global_nothing_reset()util_global_nothing_time=10;if(util_global_nothing_fun!=null)window.clearInterval(util_global_nothing_fun); util_global_nothing();/倒计时函数function util_global_nothing()util_global_nothing_fun=window.setInterval(function() util_global_nothing_time-; if(parseInt(util_global_nothing_time)1) window.clearInterval(util_global_nothing_fun); else $(#mess).html(util_global_nothing_time); ,1000); 2、图层拖动提供控件化的函数,只需要调用就可拖动DIV $(document).ready(function() move(tab);)/拖动函数function move(id_)var id=$(#+id_);/定义可移动id.css(position:absolute);/鼠标按下样式$(document).mouseup(function()id.css(cursor,default);$(this).unbind(mousemove);)/按下移动id.mousedown(function(e)/e鼠标事件$(this).css(cursor,move);/改变鼠标指针的形状var offset = $(this).offset();/DIV在页面的位置var x = e.pageX - offset.left;/获得鼠标指针离DIV元素左边界的距离var y = e.pageY - offset.top;/获得鼠标指针离DIV元素上边界的距离$(document).bind(mousemove,function(ev)/绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件id.stop();/加上这个之后var _x = ev.pageX - x;/获得X轴方向移动的值var _y = ev.pageY - y;/获得Y轴方向移动的值id.animate(left:_x+px,top:_y+px,3););); 标题 发布时间 状态 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 3、自定义鼠标右键 鼠标右键操作 $(function() function document.oncontextmenu()event.returnValue=false; $(#tab td).mousedown(function(e) /e.which: 【1:鼠标左键】 【2:鼠标中间键】 【3:鼠标右键】 /e.clientX,e.clientY :鼠标点击位置坐标 var mouseX=e.clientX; var mouseY=e.clientY; var screenX=window.screen.availWidth;/浏览器宽度 var screenY=window.screen.availHeight;/浏览器高度 var screenX=document.body.clientWidth;/网页内容区宽度 var screenY=document.body.clientHeight;/网页内容区高度 if(mouseXscreenX-200) mouseX=mouseX-200; if(mouseYscreenY-100) mouseY=mouseY-100; if(e.which=3) $(#rightMenu).css(top:mouseY,left:mouseX).show(); ); /窗体上点击,隐藏鼠标右键 $(document).bind(click,function() $(#rightMenu).hide(); ) $(#add).bind(click,function() alert(add); ) $(#rightMenu li).hover( function() $(this).css(background:red); , function() $(this).css(background:white); ); ) 增加子节点 修改 删除 -功能菜单- 标题 发布时间 状态 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 4、 鼠标滑过改变背景 用户无操作 .ss background-color:#FF9600; $(function() $(#tab table td).hover( function() $(this).toggleClass(ss); ); ) 交通 公交站 出租车 地铁站 长途客运站 停车场 加油站 自行车租赁 机票代售 火车票代售 生活 超市 银行 ATM 学校 医院 药店 商场 公厕 美食 酒店 餐饮 酒吧 咖啡厅 茶苑 娱乐 电影院 洗浴中心 KTV 足疗 网吧 棋牌室 出游 景点 公园 广场 博物馆 游乐场 5、靠右悬浮,点击自动靠边 靠右悬浮 $(function() toggleMenu(rightMenu); ) /控件函数 function toggleMenu(id_) var id=$(#+id_); var hei=id.height(); id.css(z-index:9999,position:absolute,right:10px,top:50px); var ok=id.find(.ok); var tab=id.find(.tab); ok.toggle( function() tab.hide(100); ok.html(); ok.height(hei); , function() tab.show(); ok.html(); ok.height(hei); ); 标题 发布时间 状态 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 6、禁止全选、复制、右键为body添加属性 7、 轨迹动画 靠右悬浮 $(function() $(#btn).click(function() $(.block).animate(left: 800px, 2000); $(.block).animate(top: 400px, 2000); $(.block).animate(left: 10px, 2000); $(.block).animate(top: 100px, 2000););$(#btn2).click(function() $(
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年助理会计师考试试题及答案
- 智能化管理与远程监控系统部署方案
- 初中数学课堂分组教学的实施背景与影响因素
- 基于健康素养的婴幼儿托育课程设置与教学策略创新
- 改建工程效益预测与风险评估
- 安徽省合肥市庐阳区第四十二中学2026届中考四模英语试题含答案
- 二零二五年度二手模具转让与配套工具销售合同样本
- 人形机器人生产线项目投标书
- 二零二五年度大坝整改工程施工安全防护与合同
- 二零二五年度特种化学品购销合同规范文本
- 脑部抗衰护理方案
- 特殊学生教育课题申报书
- 2025冠心病临床路径:从诊断到康复的全程管理
- CO2还原合成甲醇反应器研究进展
- DB3713T-291-2023工程建设项目“多测合一”技术规程
- 土壤重金属迁移模型构建-洞察分析
- 临床用血总结
- 《如何推行改善提案》课件
- 【大学课件】商业银行风险管理
- 钢筋机械连接技术规程 JGJ 107-2016
- 农业机械的智能控制
评论
0/150
提交评论