  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2 <html xmlns="http://www.w3.org/1999/xhtml"> 
  3 <head> 
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5 <title>jQuery弹出窗口 - 计划-博客园</title> 
  6 <meta name="keywords" content="www.cnblogs.com/jihua"/>
  7 <style type="text/css"> 
  8 .window{ 
  9     width:250px; 
 10     background-color:#d0def0; 
 11     position:absolute; 
 12     padding:2px; 
 13     margin:5px; 
 14     display:none; 
 15     } 
 16 .content{ 
 17     height:150px; 
 18     background-color:#FFF; 
 19     font-size:14px; 
 20     overflow:auto; 
 21     } 
 22     .title{ 
 23         padding:2px; 
 24         color:#0CF; 
 25         font-size:14px; 
 26         } 
 27 .title img{ 
 28         float:right; 
 29         } 
 30 </style> 
 31 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 32 <script type="text/javascript" language="javascript">
 33     $(document).ready(function () {
 34         $("#btn_center").click(function () {
 35             popCenterWindow();
 36         });
 37 
 38         $("#btn_right").click(function () {
 39             popRightWindow();
 40         });
 41         $("#btn_left").click(function () {
 42             popLeftWindow();
 43         });
 44 
 45     }); 
 46  
 47 </script> 
 48 </head> 
 49 <body>
 50  <div style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;">
 51 <input type="button" value="居中窗口" id="btn_center" /> 
 52 <input type="button" value="居左下角" id="btn_left" /> 
 53 <input type="button" value="居右下角" id="btn_right" /> 
 54 </div>
 55    <div class="window" id="center"> 
 56 <div id="title" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居中窗口</div> 
 57 <div class="content">jihua.cnblogs.com</div> 
 58    </div> 
 59     
 60   <div class="window" id="left"> 
 61 <div id="title2" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居左窗口</div> 
 62 <div class="content">jihua.cnblogs.com</div> 
 63   </div> 
 64   <div class="window" id="right"> 
 65 <div id="title3" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居右窗口</div> 
 66 <div class="content">jihua.cnblogs.com</div> 
 67   </div>
 68   <script type="text/javascript">
 69   //获取窗口的高度 
 70 var windowHeight; 
 71 //获取窗口的宽度 
 72 var windowWidth; 
 73 //获取弹窗的宽度 
 74 var popWidth; 
 75 //获取弹窗高度 
 76 var popHeight; 
 77 function init(){ 
 78    windowHeight=$(window).height(); 
 79    windowWidth=$(window).width(); 
 80    popHeight=$(".window").height(); 
 81    popWidth=$(".window").width(); 
 82 } 
 83 //关闭窗口的方法 
 84 function closeWindow(){ 
 85     $(".title img").click(function(){ 
 86         $(this).parent().parent().hide("slow"); 
 87         }); 
 88     } 
 89     //定义弹出居中窗口的方法 
 90     function popCenterWindow(){ 
 91         init(); 
 92         //计算弹出窗口的左上角Y的偏移量 
 93     var popY=(windowHeight-popHeight)/2; 
 94     var popX=(windowWidth-popWidth)/2; 
 95     //alert('jihua.cnblogs.com'); 
 96     //设定窗口的位置 
 97     $("#center").css("top",popY).css("left",popX).slideToggle("slow");  
 98     closeWindow(); 
 99     } 
100     function popLeftWindow(){ 
101         init(); 
102         //计算弹出窗口的左上角Y的偏移量 
103     var popY=windowHeight-popHeight; 
104     //var popX=-(windowWidth-popWidth); 
105     //alert(popY); 
106     //设定窗口的位置 
107     $("#left").css("top",popY-50).css("left",50).slideToggle("slow"); 
108     closeWindow(); 
109     } 
110     function popRightWindow(){ 
111         init(); 
112         //计算弹出窗口的左上角Y的偏移量 
113     var popY=windowHeight-popHeight; 
114     var popX=windowWidth-popWidth; 
115     //alert(www.cnblogs.com/jihua); 
116     //设定窗口的位置 
117     $("#right").css("top",popY-50).css("left",popX-50).slideToggle("slow"); 
118     closeWindow(); 
119     } </script> 
120 </body> 
121 </html>

随笔分类 - Javascript

摘要: ZoneMenu是一个菜单jQuery插件，只需占用页面上的一个小区域，却可以实现多级菜单。在线体验：http://keleyi.com/jq/zonemenu/点击这里下载完整HTML文件代码：ZoneMenu- jquery pluginZoneMenu DemoZoneMenuKeleyi H...阅读全文

posted @ 2014-08-05 01:33 计划阅读(179) | 评论 (0) 编辑

jquery投色子动画

摘要: 可以点击这里体验效果：http://keleyi.com/keleyi/phtml/jqtexiao/26.htm效果图：代码如下： 1 2 3 4 5 jQuery掷色子并显示随机结果-可乐义 6 24 25 48 49 50 51 jQuery掷色子并显示随机结果52 请点击色子：53...阅读全文

posted @ 2014-08-03 11:19 计划阅读(145) | 评论 (0) 编辑

程序员用HTML5给女朋友制作的3D相册

摘要: 程序员给女朋友用HTML5制作的3D相册，使用鼠标拖拽，能看到3D旋转效果，点击相片，相片能放大，移近。程序员发挥自己的专长，这是那些不懂编程的人望尘莫及的。本相册使用了HTML5的画布技术，需要谷歌浏览器或火狐浏览器等现代浏览器才能正常观看。效果网址：http://keleyi.com/keley...阅读全文

posted @ 2014-05-20 22:10 计划阅读(991) | 评论 (2) 编辑

jQuery刮彩票兑奖效果

摘要: 效果体验：http://keleyi.com/a/bjad/uaq24pxt.htm其中拖拽刮涂层效果使用jquery UI的draggable方法，请参考：http://keleyi.com/a/bjac/9dd21532ed1dbf23.htm以下是源代码： 1 2 3 4 jQuery UI模拟刮彩票涂层显示结果-柯乐义 5 6 12 13 14 41 42 43 说明：不支持IE6！44 45 效果一（拖拽灰条）：46 47 48 请完全刮开查看中奖结果。49 50 51 效果二（点击灰条）：52 53 54 请完全刮开查看中奖结果。55 56 57 原文58 59 we...阅读全文

posted @ 2014-03-18 22:31 计划阅读(403) | 评论 (0) 编辑

滚动变色的文字js特效

摘要: Js实现滚动变色的文字效果，在效果展示页面，可看到文字在交替变色显示，以吸引人的注意，效果真心不错哦，把代码拷贝到你的网站后，修改成想要的文字就OK了。查看效果：http://keleyi.com/a/bjad/bd55blos.htm以下是源代码： 1 2 3 4 滚动变色的文字js特效-柯乐义 5 6 7 8 请注意下方的文字，部分文字染成红色，且红色循环移动。原文 9 10 55 56 keleyi.com57 58 web前端：http://www.cnblogs.com/jihua/p/webfront.html阅读全文

posted @ 2014-03-05 08:49 计划阅读(178) | 评论 (0) 编辑

HTML5 随机弹跳的小球

摘要: 查看效果:http://keleyi.com/a/bjad/tc1y11dy.htmChrome效果图：火狐效果图：以下是源码： 1 2 3 4 HTML5 随机弹跳的小球-柯乐义 5 18 19 20 柯乐义 HTML5特效随机弹跳的小球 21 请使用支持HTML5的浏览器开打本页。原文暂停 22 继续 23 增加小球刷新 24 每次刷新页面的小球大小，颜色，运动路线，都是新的，可以点击上面各个按钮看看效果。 25 26 27 28 29 30 31 143 144 web前端：http://www.cnblogs.com/jihua/p/webfro...阅读全文

posted @ 2014-02-12 20:30 计划阅读(492) | 评论 (0) 编辑

带节日和农历的js日历

摘要: 带农历的脚本：http://keleyi.com/keleyi/phtml/jstexiao/11.htmhttp://keleyi.com/tools/rili/ 1 2 3 4 带农历的日历 5 300 301 302 303 304 305 306 307 308 公历 309 年月 318 319 320 日321 一322 二323 三324 ...阅读全文

posted @ 2014-01-28 17:00 计划阅读(667) | 评论 (1) 编辑

使用javascript和canvas画月半弯

摘要: 使用javascript和canvas画月半弯，月半弯好浪漫！浏览器须支持html5查看效果：http://keleyi.com/a/bjad/8xqdm0r2.htm以下是代码： 1 2 3 4 使用javascript和canvas画月半弯-柯乐义 5 8 9 10 使用javascript和canvas画月半弯·柯乐义 11 12 57 58 web前端：http://www.cnblogs.com/jihua/p/webfront.html阅读全文

posted @ 2014-01-26 00:02 计划阅读(388) | 评论 (1) 编辑

HTML5 Canvas眨眼睛动画

摘要: 效果请看：http://keleyi.com/a/bjad/p9exlcwi.htm请使用支持HTML5的浏览器查看效果。以下是代码： 3 4 5 6 7 8 web前端：http://www.cnblogs.com/jihua/p/webfront.html阅读全文

posted @ 2014-01-20 23:12 计划阅读(540) | 评论 (0) 编辑

仿腾讯QQ竖直滑动导航菜单

摘要: 菜单就像qq软件的分组，鼠标经过自动显示相应组的内容。效果体验网址：http://keleyi.com/a/bjad/nf86w2dv.htm以下是源代码： 1 2 3 仿腾讯QQ竖直滑动导航菜单-柯乐义 4 5 56 57 58 59 60 Javascript 61 日期选择输入js控件JS错误引发、捕捉和处理js数组的增删访问排序等操作 62 js桌球小游戏 js实现旋转的3D球体标签云使用js判断是否按下了Shift键 63 js判断鼠标左、中、右键哪个被点击谷歌粘土js特效js获取网址中某个参数的值 64 JSLint介绍JS输入用户名自动显示邮箱后缀...阅读全文

posted @ 2014-01-16 00:57 计划阅读(305) | 评论 (0) 编辑

图片放大镜实例

摘要: 点击这里查看效果效果图：以下是代码： 1 2 3 4 5 图片放大镜-柯乐义 6 7 8 9 10 34 35 图片放大镜把光标移动到下面图片上原文36 37 38 39 40 41 42 原文：http://keleyi.com/a/bjad/q2ee2xyt.htmweb前端：http://www.cnblogs.com/jihua/p/webfront.html阅读全文

posted @ 2014-01-13 22:16 计划阅读(203) | 评论 (2) 编辑

js快捷输入日期

摘要: 点击这里查看效果http://keleyi.com/keleyi/phtml/jstexiao/10.htm以下式代码： 1 2 3 4 5 js快捷输入日期-柯乐义 6 18 19 20 21 22 日期选择控件:23 24 25 26 27 原文28 29 30 47 48 49 点击这里下载源码原文：http://keleyi.com/a/bjad/tw09x2nt.htmweb前端：http://www.cnblogs.com/jihua/p/webfront.html阅读全文

posted @ 2014-01-09 17:12 计划阅读(198) | 评论 (0) 编辑

js实现web网页版台球游戏

摘要: js桌球小游戏在线试玩地址：http://keleyi.com/game/13/游戏截图：完整代码，保存到html文件可以试玩： 1 2 3 4 5 js实现web页面台球游戏特效 - 柯乐义 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 来源：柯乐义更多游戏原文适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 24 25 转载自：http://keleyi.com/a/bjad/mroxdkos.htmweb前端：http://www.cnblogs.com/...阅读全文

posted @ 2014-01-05 16:00 计划阅读(179) | 评论 (0) 编辑

jquery在线五子棋

摘要: 在线五子棋试玩地址：http://keleyi.com/game/12/以下是完整代码，保存到html文件打开也可以玩： 1 2 3 4 在线五子棋-柯乐义 5 6 7 8 9 10 11 26 27 28 29 30 31 简体中文32 English33 ...阅读全文

posted @ 2014-01-03 00:09 计划阅读(221) | 评论 (2) 编辑

祝大家圣诞节快乐！

摘要: 在圣诞节来临之际，分享这份网页的代码，祝愿大家圣诞节快乐！点击这里查看效果以下是源代码，可以保存到html文件打开看效果： 1 2 3 4 5 柯乐义祝大家圣诞节快乐！ 6 7 8 9 10 16 17 18 42 43 49 50 51 52 53 54 55 56 57 原文58 59 转载自：http://keleyi.com/a/bjac/iqiiedy2.htmweb前端：http://www.cnblogs.com/jihua/p/webfront.html更多节日网页阅读全文

posted @ 2013-12-24 13:20 计划阅读(142) | 评论 (2) 编辑

无限级ddsmoothmenu菜单实例

摘要: 点击这里查看效果以横向ddsmoothmenu下来菜单为例，以下是实现代码： 1 2 3 4 5 6 Item 1 7 Folder 0 8 9 Sub Item 1.110 Sub Item 1.211 Sub Item 1.312 Sub Item 1.413 Sub Item 1.214 Sub Item 1.315 Sub Item 1.416 17 18 Folder 119 20 Sub Item 1.121 Sub Item 1.222 Sub Item 1.323 Sub Item 1.424 Sub Item 1.225 Sub Item 1.326 Sub It...阅读全文

posted @ 2013-12-16 20:14 计划阅读(343) | 评论 (0) 编辑

JS全屏漂浮广告、移入光标停止移动

摘要: 点击这里查看效果以下是代码： 1 2 3 4 5 JS全屏漂浮广告-柯乐义 6 9 10 11 12 13 JS全屏漂浮广告，移入光标停止移动·柯乐义原文14 15 我是广告keleyi.com16 44 45 转载自：http://keleyi.com/a/bjac/ara6jk5h.htmhttp://www.cnblogs.com/jihua/p/webfront.html阅读全文

posted @ 2013-12-06 15:19 计划阅读(301) | 评论 (2) 编辑

keleyi菜单0.1.5版本发布了

摘要: keleyi菜单是一个让你轻松创建向上弹出菜单的jquery插件。最新版本0.1.5增加了显示三角形的功能，当一级菜单包含有子菜单时，会在一级菜单的右侧显示一个小三角形。如图所示：查看例子：http://keleyi.com/keleyi/下载地址：https://files.cnblogs.com/jihua/jquerymenu.rarkeleyi菜单帮助阅读全文

posted @ 2013-11-19 20:15 计划阅读(146) | 评论 (0) 编辑

向上弹出菜单jQuery插件

摘要: 插件名：柯乐义英文名：Keleyijs文件名称：jquery.keleyi.js插件功能：该插件可以让你轻易地在页面上构建一个向上弹出的二级菜单。示例查看：http://keleyi.com/keleyi/更多示例：0123456789101112从示例可以看出，Keleyi这个菜单插件使用方便，可以灵活自定义多种样式，包括颜色，位置，菜单项宽度等等。下面给出一个示例的HTML文件代码： 1 2 3 4 Keleyi(jQuery Menu Plugin) - keleyi.com 5 6 7 14 15 16 Keleyi17 A jQuery Menu Plugin 18 19...阅读全文

posted @ 2013-11-06 11:00 计划阅读(910) | 评论 (0) 编辑

jQuery拉开关闭帷幕

摘要: 查看效果：http://keleyi.com/keleyi/phtml/jqtexiao/7.htmHTML文件代码： 1 2 3 4 5 jQuery拉开关闭帷幕--柯乐义 6 7 8 9 10 11 12 13 14 15 16 17 18 原文19 20 原文：http://keleyi.com/a/bjac/bqii05en.htmWeb前端资源：http://www.cnblogs.com/jihua/p/webfront.html阅读全文

posted @ 2013-11-05 21:58 计划阅读(353) | 评论 (2) 编辑

javascript俄罗斯方块游戏

摘要: 在线试玩：http://keleyi.com/game/5/操作指南：键盘方向键←→控制左右移动，↑键变形，↓键快速下落。别看这段js代码只有短短的100多行，效果却非常不错，用键盘的方向键操作，向上键是变形，赶紧试试。把下面代码保存到html文件，打开就可以。 1 俄罗斯方块-柯乐义 2 3 原文 4 原文：http://keleyi.com/a/bjac/600xsi0s.htmweb前端：http://www.cnblogs.com/jihua/p/webfront.html阅读全文

posted @ 2013-10-25 16:24 计划阅读(234) | 评论 (0) 编辑

选美大赛示例你会选谁

摘要:

阅读全文

posted @ 2013-10-24 16:02 计划阅读(277) | 评论 (0) 编辑

js鼠标滚轮滚动图片切换效果

摘要: 效果体验网址：http://keleyi.com/keleyi/phtml/image/12.htmHTML文件代码： 1 2 3 4 5 6 7 js鼠标滚轮滚动图片切换效果-柯乐义 8 9 22 23 24 25 26 27 28 29 柯乐义30 31 32 33 基于鼠标滚轮驱动的图片切换效果34 35 36 37 柯乐义38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 把光标停在图片上，转动鼠标滚轮就可以切换图片，也可以拖动下方水平的滚动条，也可以点击非顶端的图片切换到对应图。55 56 57 Powered by k...阅读全文

posted @ 2013-10-16 21:21 计划阅读(226) | 评论 (0) 编辑

图片动画横条广告带上下滚动

摘要: 查看效果：http://keleyi.com/keleyi/phtml/flash/以下是HTML文件代码： 1 2 3 4 5 6 7 横条广告带上下滚动_柯乐义 8 9 10 横条广告带上下滚动11 12 13 46 47 原文代码整理：柯乐义48 49 web前端:http://www.cnblogs.com/jihua/p/webfront.html最新请参考：http://keleyi.com/a/bjac/8qx83gls.htm点击这里下载阅读全文

posted @ 2013-10-15 21:11 计划阅读(139) | 评论 (0) 编辑

淘宝顶部导航菜单

摘要: 效果体验：http://keleyi.com/keleyi/phtml/menu/3.htmHTML文件代码： 1 2 3 4 5 6 7 柯乐义顶部导航菜单_柯乐义 8 9 10 11 12 13 14 15 16 17 18 柯乐义首页 19 我要买 20 21 22 我的买卖 23 24 25 26 已买到的软件 27 已卖出的软件 28 29 30 31 32 33 34 购物车 35 收藏夹 36 37 搜索 38 39 40 搜索 43 44 45 46 47 48 49 5...阅读全文

posted @ 2013-10-13 22:14 计划阅读(509) | 评论 (0) 编辑

JavaScript实现HTML5烟花特效

摘要: 烟花效果如下（请使用支持HTML5的浏览器查看）：点击这里查看效果：http://keleyi.com/keleyi/phtml/html5/14.htm源代码如下： 1 2 3 原文：http://keleyi.com/a/bjac/3pipmkmg.htm触须：http://keleyi.com/a/bjac/k3pi4ehx.htmweb前端：http://www.cnblogs.com/jihua/p/webfront.html阅读全文

posted @ 2013-10-07 23:35 计划阅读(948) | 评论 (0) 编辑

javascript的switch的使用注意

摘要: 如果是以下代码：1 你会发现没有弹出对话框，alert没有执行。原因：这里需要明确的是，switch在判断的时候使用的是全等号“===”，全等号在比较的时候首先看数据类型是不是一样的，而在这里，t_keleyi_com是Number类型，而'65'是String。下面的代码则对话框会弹出：1 原文：http://keleyi.com/a/bjac/9a9irmcm.htmweb前端汇总：http://www.cnblogs.com/jihua/p/webfront.html阅读全文

posted @ 2013-09-30 20:45 计划阅读(105) | 评论 (0) 编辑

Web前端资源汇总

摘要: 本文地址：http://www.cnblogs.com/jihua/p/webfront.html使用jquery增加网站粘度祝朋友中秋快乐多级弹出菜单jQuery插件ZoneMenu向上弹出菜单jQuery插件万圣节快乐!!!jQuery鼠标经过显示大图CSS实现弹出导航菜单使用CSS3制作立体效...阅读全文

posted @ 2013-09-27 23:16 计划阅读(2459) | 评论 (0) 编辑

javascript使浏览器关闭前弹出确认

摘要: 当用户关闭页面时，弹出对话框，让用户确认是否关闭，选择确定则页面关闭，否则页面不关闭。效果体验：http://keleyi.com/keleyi/phtml/js/index.htm完整代码：关闭网页确认-柯乐义当您关闭页面时，会弹出对话框，让您确认是否离开页面，选择确定则页面关闭，否则页面不关闭。原文Javascript的变量作用域原理详解js获取屏幕分辨率JS的encodeURI和encodeURIComponent...js存、取、删除cookies实例javascript正则表达式基础入门与进阶js获取页面中图片的总数HTML DOM Document 对象概述匹配HTML标记的jSc阅读全文

posted @ 2013-09-26 16:13 计划阅读(165) | 评论 (0) 编辑

js获取页面中图片的总数

摘要: 查看效果：http://keleyi.com/keleyi/phtml/image/9.htm下面是完整代码：本页中图片的总数是：效果如下：本页中图片的总数是：你能全部找到吗？总结：使用document.images.length可以获取页面中图片的总数，包括使用javascript加入的图片，但是css定义的背景图片不算原文：http://keleyi.com/a/bjac/ovyge49k.htm阅读全文

posted @ 2013-08-21 20:42 计划阅读(168) | 评论 (0) 编辑

jQ获取浏览器window的高宽

摘要: Window 对象Window 对象表示浏览器中打开的窗口。JavaScript 层级中的顶层对象，表示浏览器窗口。如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。注释：没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。使用jQuery可以这样获取window的宽高：宽度： $(window).width() 高度： $(window).height()实际效果：相同的屏幕不同的浏览器，即使都最大化，宽度也可能不一样，可以在IE，Chrome，火狐的浏览器中打开本阅读全文

posted @ 2013-08-20 15:55 计划阅读(559) | 评论 (0) 编辑

js获取本机的外网/广域网ip地址

摘要: 完整源代码：客户端外网IP--柯乐义您的IP地址是：效果如下：您的IP地址是：也可到这里查看效果：http://tool.keleyi.com/ip/wodeip.htm使用方法：一、把这个放到源代码中要显示IP地址的位置二、然后在源代码的前输入：原文：http://keleyi.com/a/bjac/5ny3tgps.htm阅读全文

posted @ 2013-08-10 20:55 计划阅读(326) | 评论 (3) 编辑

图片效果集合(js、jquery或html5)

摘要: 1.jQuery HTML5 幻灯片使用支持HTML5的浏览器会有特殊效果，即切换图片时颜色的改变文章：http://keleyi.com/a/bjac/b8i3xdui.htm效果：http://keleyi.com/keleyi/phtml/html5/1.htm2. jQuery图片延迟加载一开始不加载实图，只用灰图占位，当图片出现在视线中才加载实图，减少对服务器的压力。效果网址：http://keleyi.com/keleyi/phtml/image/index.htm文章网址：http://keleyi.com/a/bjac/et551617.htm3.jquery使用ColorBo阅读全文

posted @ 2013-06-20 22:56 计划阅读(265) | 评论 (0) 编辑

js实现右下角可关闭最小化div

摘要: 本实例使用Javascript实现右下角可关闭最小化div，可以用于展示推荐内容，效果预览网址：http://keleyi.com/keleyi/phtml/xuanfudiv/3.htm效果图片：完整源代码： 1 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xh阅读全文

posted @ 2013-06-18 01:13 计划阅读(527) | 评论 (0) 编辑

js+div+css下拉导航菜单完整代码

摘要: 效果预览：http://keleyi.com/keleyi/phtml/menu/1.htmjs+div+css下拉导航菜单完整代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>cs阅读全文

posted @ 2013-06-15 21:41 计划阅读(402) | 评论 (0) 编辑

找到一个端午节赛龙舟的特效

摘要: 可以在这里体验：http://keleyi.com/keleyi/phtml/duanwu/index.htm请把鼠标移动到大鼓上，然后选择三只龙舟中的一只，然后击鼓。源码和 ps文件下载：http://down.keleyi.com/source/duanwu.rar使用说明：1.把duanwu文件夹传到网站根目录或者其他目录2.在LOGO相应位置改为（自己调整LOGO路径和JS路径，还有CSS细节）<div id="m" style="float:left"><p id="lg"><img src=阅读全文

posted @ 2013-06-12 13:46 计划阅读(269) | 评论 (0) 编辑

js代码着色

摘要: 本实例是使用Javascript插件,在浏览器客户端动态的为代码着色,可以显示行号.Javascript代码着色实例效果：http://www.keleyi.com/keleyi/phtml/codecolor/a/index.htm以下是代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/199阅读全文

posted @ 2013-05-29 16:52 计划阅读(324) | 评论 (0) 编辑

KeleyiTextarea类

摘要: KeleyiTextarea类,是一个Javascript操作textarea的类,封装集合了操作textarea的多个方法,包括获取光标位置,添加内容到光标位置,选中字符串,设置光标位置,删除光标前后字符串等(兼容IE,chrome,firefox)。应用示例效果：http://www.keleyi.com/dev/d96239733d2635bc.htm类的代码如下：<script type="text/javascript">var KeleyiTextarea= {/** 获取光标位置 www.keleyi.com* @Method getCursorP阅读全文

posted @ 2013-05-20 07:18 计划阅读(146) | 评论 (0) 编辑

滚动页面时DIV到达顶部时固定在顶部

摘要: 本示例使用Javascript实现了滚动页面时，DIV到达顶部时固定在顶部。在IE下效果有点闪，效果网址：http://www.keleyi.com/keleyi/phtml/fixdiv.htm下面是代码：<body style="margin:0px;"><div style="height:300px;background:#e0e0e0"></div><div id="fixedMenu_keleyi_com" style="background:#ffffff;width:阅读全文

posted @ 2013-05-20 06:29 计划阅读(816) | 评论 (0) 编辑

JS在textarea光标处插入文本

摘要: 本实例使用Javascript实现在textarea光标处插入文本,支持多种浏览器,效果网址：http://www.keleyi.com/dev/36d87291ba370420.htm下面是代码:--------------------------------------------------------------------------------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-阅读全文

posted @ 2013-03-21 22:59 计划阅读(192) | 评论 (0) 编辑

HTML5时钟

摘要: 本示例使用HTML5的canvas标签和Javascript脚本，在页面上模拟显示了一个时钟，请使用支持HTML5的浏览器预览效果：点击这里查看效果http://www.keleyi.com/keleyi/phtml/html5clock.htm以下是完整代码，保存到html文件可以查看效果。<!DOCTYPE html><html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>阅读全文

posted @ 2013-03-10 17:55 计划阅读(531) | 评论 (0) 编辑

在图片上显示左右箭头的翻页代码

摘要: 使用JS实现在图片上显示左右箭头的翻页代码，预览效果网址：http://www.keleyi.com/keleyi/phtml/picnext/本实例使用了javascript的onmousemove 事件。onmousemove 事件会在鼠标指针移动时发生。语法onmousemove="SomeJavaScriptCode"SomeJavaScriptCode是必需参数。规定该事件发生时执行的 JavaScript。下面是核心代码（完整代码请在效果页面查看源代码）：<script type="text/javascript">functio阅读全文

posted @ 2013-03-03 15:50 计划阅读(316) | 评论 (0) 编辑

JS验证URL函数

摘要: 搜集一个JS验证URL函数1 function CheckUrl(str) {2 var RegUrl = new RegExp();3 RegUrl.compile("^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$");//jihua.cnblogs.com4 if (!RegUrl.test(str)) {5 return false;6 }7 return true;8 }阅读全文

posted @ 2012-10-12 00:14 计划阅读(44) | 评论 (0) 编辑

jQuery实现右下角滑动弹出可关闭重现层完整代码

摘要: 经常看到网页右下角有滑动弹出的广告，这种效果可以使用jQuery弹出层实现。本实例使用jQuery实现右下角滑动弹出可关闭重现层。.完整代码如下： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head>阅读全文

posted @ 2012-10-10 18:17 计划阅读(963) | 评论 (2) 编辑

jQuery弹出窗口完整代码

摘要: 效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 2 3 4 5 jQuery弹出窗口 - 计划-博客园 6 7 31 32 48 49 50 51 52 53 54 55 56 计划博客园-居中窗口 57 jihua.cnblogs.com 58 59 60 61 计划博客园-居左窗口 62 jihua.cnblogs.com 63 64 65 计划博客园-居右窗口 66 jihua.cnblogs....阅读全文

posted @ 2012-10-08 14:15 计划阅读(7006) | 评论 (0) 编辑

jquery树形菜单完整代码

摘要: 本实例实现了树形的动态菜单，兼容IE8,火狐，Chrome等浏览器。使用了jQuery的toggle() 方法。效果和代码如下： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <me阅读全文

posted @ 2012-10-07 11:29 计划阅读(3350) | 评论 (0) 编辑

jQuery固定DIV实现“返回顶部”

摘要: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>jQuery实现“返回顶部”（固定DIV） - 计划 - 博客园</title> <meta name="k阅读全文

posted @ 2012-10-05 01:06 计划阅读(748) | 评论 (0) 编辑

jquery聚焦文本框

摘要: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>jquery聚焦文本框 - 计划 - 博客园</title> <script src="http://aja阅读全文

posted @ 2012-10-02 23:18 计划阅读(878) | 评论 (0) 编辑

JS正则表达式验证账号、手机号、电话和邮箱

摘要: 验证帐号是否合法验证规则：字母、数字、下划线组成，字母开头，4-16位。function checkUser(str){ var re = /^[a-zA-z]\w{3,15}$/; if(re.test(str)){ alert("正确"); }else{ alert("错误"); } }checkUser("jihua_cnblogs");//调用验证手机号码验证规则：11位数字，以1开头。function checkMobile(str) { var re = /^1\d{10}$/ if (re.te...阅读全文

posted @ 2012-09-28 11:48 计划阅读(4061) | 评论 (0) 编辑

JS window.onload 提示尚未实现

摘要: 如果window.onload 提示“尚未实现”，那么可能是JS脚本格式错误。例如：<script language="javascript" type="text/javascript"> window.onload=alert('jihua.cnblogs.com');</script>上面这样是不对的。应该像下面这样才对：<script language="javascript" type="text/javascript"> window.onload =阅读全文

posted @ 2012-09-28 00:54 计划阅读(221) | 评论 (0) 编辑

JS当前页面登录注册框，固定DIV，底层阴影

摘要: 这是一个实例，保存代码为html文件运行试试吧。兼容火狐、ie6、ie7、ie8、Chrome等。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content阅读全文

posted @ 2012-09-27 18:33 计划阅读(749) | 评论 (0) 编辑

DIV、CSS和JavaScript实现可隐藏并重现悬浮版块

摘要: 如果经常上网，会发现有一些广告悬浮版块，点击隐藏，就只剩下一小块地方留在边缘，当鼠标本移到那小块地方时，广告就又非常积极的重新出现在你的视线。本实例使用DIV、CSS和JavaScript，实现了这个效果，在多种浏览器下测试通过。首先看一下效果图，该图是DIV版块悬浮在浏览器左边的效果：下图是DIV版块隐藏后只留下一个重现箭头的效果。废话少说，直接放代码：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>DIV、CSS和JavaScript实现可隐藏并重现悬浮版块 - 计划阅读全文

posted @ 2012-09-27 12:13 计划阅读(591) | 评论 (0) 编辑

posted on 2014-09-15 16:05 HackerVirus 阅读(8337) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

公告