摘要: 今晚无事,翻出来以前的一个练手作品,看了下,还是蛮有意义的,特分享出来,其实也不是太难的东西,就是留个记忆.点击下载 文件废话不多说,先看效果图:大概的实现功能通过这张图应该能看的很清楚了,就是鼠标点击拖动图片交换位置下面贴下实现的html+js代码,当然用到的插件,可以点击上面的下载链接下载,或直接去jquery-ui的代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Pic 阅读全文
posted @ 2012-03-31 22:20 妙計出自山人 阅读(2586) 评论(0) 推荐(0) 编辑
摘要: 今天网上看到一个能够兼容大部分主流浏览器(本人测试过的:firefox,chrome,oprea,IE6~9)的css3圆角做法,特记文分享:HTML:1 <div class="wrap">2 <div class="border"></div>3 </div>CSS:1 .wrap{background:#0f0; padding:10px 10px; width:500px; height:400px;}2 .border{background:#f00; width:100%; height:100 阅读全文
posted @ 2012-03-12 11:23 妙計出自山人 阅读(306) 评论(0) 推荐(0) 编辑
摘要: 今天下午写了这个nav菜单插件,点击下载,特记之用法讲解(example): 1 $("div.header").Nav({ 2 /**主菜单选项**/ 3 number : 5, //主菜单数量 4 NavText : ['首页','简介','我的信息','我的博客','关注'], //主菜单名参数 5 NavHref : ['?m1','?m2','?m3','?m4'], //主菜单链接,务必和菜单选项保持一致 6 NavWi 阅读全文
posted @ 2012-03-09 15:45 妙計出自山人 阅读(4365) 评论(0) 推荐(0) 编辑
摘要: 今天下午写了这个图片切换的jQuery插件,点击下载,它能由用户设置图片切换的模式,目前支持两种:fadein(渐入渐出)和scroll(从右向左)用法(example):1 $("div.img").picShow({2 imgPath : 'img/', //图片路径,默认为 images/ 图片名称以数排序命名:1.jpg,2.jpg,3.jpg……3 width : 500,4 height : 250,5 number : 4, //图片数量6 time : 3, //图片移动时间间隔,单位为s7 mode : 'sc... 阅读全文
posted @ 2012-03-08 14:54 妙計出自山人 阅读(3201) 评论(1) 推荐(0) 编辑
摘要: 一、起点: 1 /*global*/ 2 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, a, blockquote, th { margin: 0;padding: 0;} 3 h1, h2, h3, h4, h5, h6 { font-size: 100%; } 4 ol, ul { list-style: none; } 5 table {border-collapse: collapse;border-spacing: 0px;} 6 fieldset, 阅读全文
posted @ 2012-03-07 20:23 妙計出自山人 阅读(902) 评论(0) 推荐(0) 编辑
摘要: 插件下载:点击下载 1 html:4t (HTML 4.01 Transitional) 2 html:4s (HTML 4.01) 3 html:xt (XHTML 1.0) 4 html:xs (XHTML 1.0 Strict) 5 html:xxs (XHTML 1.1) 6 html:5 (HTML5) 7 8 meta:utf, meta:compat 9 style, link:css, link:print, link:favicon, link:rss,10 script, script:src11 12 div, p, a, ul, ol, input:t, in... 阅读全文
posted @ 2012-03-07 20:08 妙計出自山人 阅读(617) 评论(0) 推荐(0) 编辑
摘要: 今天下午写了个弹出对话框的jQuery插件,点击下载,特记之一、Html1 <div class="button">click me</div>2 <a href="#" class="con">内容</a>二、css 1 /**弹出框css**/ 2 #popup_mask{width:100%; height:100%; background:#666; position:absolute; top:0px; left:0px; z-index:10; filter:alpha(op 阅读全文
posted @ 2012-03-07 15:18 妙計出自山人 阅读(458) 评论(0) 推荐(0) 编辑
摘要: 首先可以运行下下面一段代码看结果: 1 function RP(){ 2 RP.propertyA = "RP.propertyA"; 3 this.propertyA = "this.propertyA"; 4 } 5 RP.prototype.propertyA = "RP.prototype.propertyA"; 6 //test 7 var rp = new RP(); 8 console.log(RP.propertyA); 9 console.log(rp.propertyA);//当前有rp.propertyA,所以优 阅读全文
posted @ 2012-03-06 21:36 妙計出自山人 阅读(414) 评论(0) 推荐(0) 编辑
摘要: 一、基本的代码结构: 方法一: 1 //name : 插件名 2 (function(){ 3 $.fn.name = function(options){ 4 //自定义参数对象(插件自带) for example 5 var defaults = { 6 value1 : 'a', 7 value2 : 'b' 8 }; 9 var opts = $.extend(defaults,options); //此处options为用户设置的参数对象(用户传参)10 //实现插件的... 阅读全文
posted @ 2012-03-06 16:55 妙計出自山人 阅读(6459) 评论(0) 推荐(2) 编辑
摘要: 查看jQuery源代码,发现:1 jQuery.fn = jQuery.prototype = { 2 init: function( selector, context ) {3 //... 4 },5 //...6 }; 阅读全文
posted @ 2012-03-06 14:46 妙計出自山人 阅读(258) 评论(1) 推荐(0) 编辑
摘要: 关于IE的bug1. 图片label bug,影响版本ie6/ie7/ie8。当label中有img的时候无法触发点击选中form元素事件.demohttp://haslayout.net/demos/Image-Label-Focus-Bug-Demo.htmlfixdemohttp://haslayout.net/demos/Image-Label-Focus-Bug-Fixed-Demo-CMS.html解决方案:通过给<label>内加入一个空的span标签,然后设置position:absolute;background:url(#); 设置label float:lef 阅读全文
posted @ 2012-02-10 17:15 妙計出自山人 阅读(223) 评论(0) 推荐(0) 编辑
摘要: 1. HTTP Headers 入门http://rlog.cn/?p=5212. 当你输入一个网址的时候,实际会发生什么?http://article.yeeyan.org/view/54517/913673. 你真的了解HTML吗?题目<P>&nbsp;&nbsp;哥写的不是HTML,是寂寞。<br><br>&nbsp;&nbsp;我说:<br>不要迷恋哥,哥只是一个传说解答考点1:html和 xhtml的区别这行代码在html 4.01 strict下是完全正确的,在xhtml 1.0 strict下是错误一 阅读全文
posted @ 2012-02-10 17:08 妙計出自山人 阅读(334) 评论(0) 推荐(0) 编辑
摘要: 此文转载自一个朋友的js学习小记:1. 你应该使用的20个有用的jQuery方法http://www.haojii.com/2010/04/20-helpful-jquery-methods-you-should-be-using/2. jQuery的三种写法 1 第一种: 2 3 $(document).ready(function() { 4 // 代码 5 }); 6 7 第二种: 8 9 $(function() {10 // 代码11 });12 13 第三种(避免与其他框架冲突):14 15 (function($) {16 // 代码17 })(jQ... 阅读全文
posted @ 2012-02-10 17:04 妙計出自山人 阅读(1368) 评论(0) 推荐(0) 编辑
摘要: Html:1 <div class="down">click</div>2 <div class="con hide">show-area</div>CSS:.hide{display:none;}js: 1 $(document).ready(function(){ 2 $("div.down").click(function(e){ 3 e.stopPropagation(); 4 $("div.con").removeClass("hide" 阅读全文
posted @ 2012-02-10 16:53 妙計出自山人 阅读(691) 评论(2) 推荐(1) 编辑
摘要: 前端页面代码:<a href="javascript:bookmarkit()">加入收藏</a>JS代码:显示JS代码<script type="text/javascript">function bookmarkit(){ // window.external.addFavorite(document.URL,document.title); var ua = navigator.userAgent.toLowerCase(); if(ua.indexOf("msie 8")>-1){ e 阅读全文
posted @ 2011-08-02 14:55 妙計出自山人 阅读(334) 评论(0) 推荐(0) 编辑