日星网
搜索

记录日常点点滴滴，欢迎来到我的小站。

0%

发表于 更新于 分类于

我们可以利用PC的浏览器来获得具体的位置情报，主要是利用Google Maps和JSON的外部服务来制作。

IP地址的取得

google谷歌已经为我们提供了获取IP地址的服务，我们可以直接利用，首先先添加google谷歌的AJAX API
通过这个API，我们可以获得经度，纬度，国家名，都市名称等信息。

阅读全文 »

发表于 更新于 分类于

IE还真是让设计师恨的牙痒痒的东西，且现在已经有IE6、IE7、IE8、IE9、IE10这个五种不同版本的浏览器，且都有一点小差异。但是没办法，为了让网页在每个浏览器中显示都一样还必须迁就它。

不过现在我基本上都不太愿意对低版本的IE去做兼容了。比如IE6、IE7这些直接忽略！IE8的话还凑合一下。好在IE9和IE10对网络标准支持都比较了，等IE9版本以上的浏览器普及以后就好很好了。

但是不做兼容归不做兼容，还是要简单的处理一下的。幸运的是 jQuery 提供了 browser 标记来让我们能判断现在的访客是用什么浏览器及版本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
        $(function() {
                var userAgent = window.navigator.userAgent.toLowerCase();
                var version = $.browser.version;
                $(".info").html(
                        "<h3>userAgent:</h3>" + userAgent + "<br />" +
                        "<h3>version:</h3>" + version
                );
        });
</script>

<body>
        <div class="info"></div>
</body>

我用了一点简单的范例来显示目前浏览器的 userAgent 及 jQuery.browser.version，接着在 IE 6~8 中测试，但其中显示的结果还真是让错愕咧！

阅读全文 »

发表于 更新于 分类于

一、开始

写一个插件，首先是要往 jquery.fn 对象中添加一个由你命名的function对象

1
2
3
jQuery.fn.myPlugin = function() {
  // code
};

如果要使用我们熟悉的 $ 符号，并不希望它与其他脚本库冲突，那么如下

1
2
3
4
5
(function( $ ) {
  $.fn.myPlugin = function() {
    // code
  };
})( jQuery );
阅读全文 »

发表于 更新于 分类于

jQuery插件的开发包括两种：
一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。

1、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：

1.1 添加一个新的全局函数

添加一个全局函数，我们只需如下定义：

1
2
3
jQuery.foo = function() {   
alert('This is a test. This is only a test.');  
};
阅读全文 »

发表于 更新于 分类于

展示图slider插件v 0.1

实现图片或内容在页面中，通过prev，和next按键进行上移动，下移动，左移动，右移动的插件。并实现循环展示。
实现在同一页面上多次调用该插件。
API

1
2
3
4
5
6
7
8
9
pic_box:'.pic_box', //装在图片的框
pic_num:3,                //图片总数
pic_box_w:100,        //每张图片的宽度
pic_box_h:100,
direction:'left',        //方向选择
autodo:false,        //是否自动运行
timeout:500,        //自动跳转时间       
prev:'.prev',        //后退
next:'.next'        //前进

链接: https://pan.baidu.com/s/1CBTJ6cwMdyTmw2ry-dk0Dw
提取码: d42c

发表于 更新于 分类于 
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!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-Type" content="text/html; charset=gb2312" />
  <title>无标题文档</title>
  <SCRIPT LANGUAGE="JavaScript">
    function switch_Tab(objTab)
                {
                        //下面tab对于内容div块的id前缀
                        f_id="div_box_list_";
                        li_list=objTab.parentNode.getElementsByTagName("li");
                        //alert(li_list.length);
                        //alert(li_list[0]);
                        tagIndex=-1;
                        //判断鼠标停留在哪个TAB标签区域
                        for (i=0;i<li_list.length;i++)
                        {
                                if (li_list[i]==objTab)
                                {
                                        tagIndex=i;
                                        break;
                                }
                        }
                        if (tagIndex==-1)
                                return;

                        //根据上面找到停留的标签号,修改要显示对应的div块的display属性:block,不是的标签display属性:none.
                        for (i=0;i<li_list.length;i++)
                        {

                                objTagDiv=document.getElementById(f_id+(i+1));

                                //id="div_box_list_1"到id="div_box_list_3",是哪一个tab标签
                                if (tagIndex==i)
                                {
                                        objTagDiv.style.display='block';
                                }
                                else
                                {
                                        objTagDiv.style.display='none';
                                }

                        }

                }
        </SCRIPT>



  <style type="text/css">
    #List_Box {
      width: 750px;
      height: auto;
    }

    #List_Box #List_Box_top {
      height: 29px;
      padding: 11px 0px 0px 15px;
    }

    #List_Box #List_Box_top ul li {
      list-style-type: none;
      float: left;
      height: 21px;
      width: 102px;
      padding: 8px 0px 0px 28px;
      font-weight: bold;
      cursor: default;
    }

    .TAB_List {
      width: 720px;
      margin: auto;
      height: 310px;
    }

    #list_box_li1,
    #div_box_list_1 {
      background-color: #99CC66;
    }


    #list_box_li2,
    #div_box_list_2 {
      background-color: #FFFF99;
    }

    #list_box_li3,
    #div_box_list_3 {
      background-color: #CC3300;
    }
  </style>
</head>

<body>

  <DIV id="List_Box">
    <DIV id="List_Box_top">
      <UL>
        <LI id="list_box_li1" onclick="switch_Tab(this)">TAB:I型</LI>
        <LI id="list_box_li2" onclick="switch_Tab(this)">TAB:II型</LI>
        <LI id="list_box_li3" onclick="switch_Tab(this)">TAB:III型</LI>
      </UL>
    </DIV>
    <!-- 初始显示由下列属性决定:style="display: block; "        -->
    <DIV id="div_box_list_1" class="TAB_List" style="display: block; ">
      <p>这是标签1<br />TAB:I型</p>
    </DIV>
    <DIV id="div_box_list_2" class="TAB_List" style="display: none; ">
      <p>这是标签2<br />TAB:II型</p>
    </DIV>
    <DIV id="div_box_list_3" class="TAB_List" style="display: none; ">
      <p>这是标签3<br />TAB:III型</p>
    </DIV>
  </DIV>
</body>

</html>

发表于 更新于 分类于

使用JS实现的两款不同效果的DIV展开和收缩效果，一个是整块的直接收缩和展开，一个是想舞台幕布一样上升和下降效果

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content" content="text/html charset=gb2312">
    <title>slide文字框缩放伸展效果 站长学院www.pigzz.com</title>
    <style type="text/css">
    *{margin:0; padding:0;}
    ul{list-style:none;}
    .box{width:300px; margin:10px; border:1px solid #ccc; overflow:hidden; position:relative; font-size:12px;}
    .oHx{height:30px; background:#eee; line-height:30px; font-size:14px; text-indent:14px; cursor:pointer;}
    .fold{position:absolute; top:9px; right:12px;}
    .box_content{line-height:18px; overflow:hidden; display:none;}
    </style>
    <script type="text/javascript">
    function getElementsByClassName(className,id,tag){
    tag = tag || "*";
    if(id){
    var id =  typeof id == "string" ? $(id) : id;
    }else{
    var id = document.body;
    }
    var els = id.getElementsByTagName(tag),arr = [];
    for(var i=0,n=els.length;i<n;i++){
    for(var j=0,k=els[i].className.split(" "),l=k.length;j<l;j++){
    if(k[j]==className){
    arr.push(els[i]);
    break;
    }
    }
    }
    return arr;
    };
    function Slide(slideClass,slideBtn,slideCon,slideSpeed) {
    this.oSlides = getElementsByClassName(slideClass);
    this.oTimer = null;
    this.slideBtn = slideBtn;
    this.slideCon = slideCon;
    this.slideSpeed = slideSpeed;
    }
    Slide.prototype = {
    oTimer:null,
    _init:function (){
    this._slideEvent();
    },
    _slideEvent:function (){
    var This = this;
    for(var i = 0,n=This.oSlides.length;i<n;i++){
    (function(n){
    var oSlide = This.oSlides[n];
    var oSlideBtn = getElementsByClassName(This.slideBtn,oSlide)[0];
    var oSlideCon = getElementsByClassName(This.slideCon,oSlide)[0];
    oSlideBtn.onclick = function (){
    if(oSlideCon.style.display == "block" && This.oTimer == null){
    This._slideClose(oSlideCon);
    }else if(!(oSlideCon.style.display == "block" ) && This.oTimer == null){
    This._slideOpen(oSlideCon);
    }
    }
    })(i)
    }
    },
    _slideOpen:function (slideCon){
    var This = this;
    slideCon.style.display = "block";
    slideCon.style.height = "auto";
    var slideHeight = slideCon.offsetHeight;
    slideCon.style.height = 0 + "px";
    This.oTimer = setInterval(function (){
    if(slideCon.offsetHeight < slideHeight){
    slideCon.style.height = slideCon.offsetHeight + 2 + "px";
    }else{
    clearInterval(This.oTimer);
    This.oTimer = null;
    }
    },This.slideSpeed);
    },
    _slideClose:function (slideCon){
    var This = this;
    This.oTimer = setInterval(function (){
    if(slideCon.offsetHeight <= 0){
    clearInterval(This.oTimer);
    slideCon.style.display = "none";
    This.oTimer = null;
    }else{
    slideCon.style.height =slideCon.offsetHeight - 2 + "px";
    }
    },This.slideSpeed);
    }
    }
    </script>
    </head>
    <body>
    <div class="box">
    <div class="oHx slide">收缩2</div>
    <div class="box_content">
    <ul class="uft" style="padding:10px;">
    <li><a href="/soft/11215.shtml" target="_blank">scscms V1.0 阳光企业网站系统</a></li><li><a href="/soft/9686.shtml" target="_blank">24点，VC++游戏源码</a></li><li><a href="/soft/11002.shtml" target="_blank">可记录图像的C#数据库记录单程序</a></li><li><a href="/soft/11134.shtml" target="_blank">jQuery 1.4 参考指南的实例源代码</a></li>
    </ul>
    </div>
    </div>
    <div class="box">
    <div class="oHx slide">收缩3</div>
    <div class="box_content">
    <ul class="uft"style="padding:10px;">
    <li><a href="/soft/11215.shtml" target="_blank">scscms V1.0 阳光企业网站系统</a></li><li><a href="/soft/9686.shtml" target="_blank">24点，VC++游戏源码</a></li><li><a href="/soft/11002.shtml" target="_blank">可记录图像的C#数据库记录单程序</a></li><li><a href="/soft/11134.shtml" target="_blank">jQuery 1.4 参考指南的实例源代码</a></li>
    </ul>
    </div>
    </div>
    <script type="text/javascript">
    var mySlide = new Slide("box","slide","box_content",10);
    mySlide._slideEvent();
    </script>
    </body>
    </html>

发表于 更新于 分类于 
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!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-Type" content="text/html; charset=gb2312" />
<title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)- www.ttwinbug.com </title>
</head>
<body>
<div id="colee" style="overflow:hidden;height:253px;width:410px;">
<div id="colee1">
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
</div>
<div id="colee2"></div>
</div>
<script>
var speed=30;
var colee2=document.getElementById("colee2");
var colee1=document.getElementById("colee1");
var colee=document.getElementById("colee");
colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
function Marquee1(){
//当滚动至colee1与colee2交界时
if(colee2.offsetTop-colee.scrollTop<=0){
 colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
 }else{
 colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
<!--向上滚动代码结束-->
<br>
<!--下面是向下滚动代码-->
<div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
<div id="colee_bottom1">
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
</div>
<div id="colee_bottom2"></div>
</div>
<script>
var speed=30
var colee_bottom2=document.getElementById("colee_bottom2");
var colee_bottom1=document.getElementById("colee_bottom1");
var colee_bottom=document.getElementById("colee_bottom");
colee_bottom2.innerHTML=colee_bottom1.innerHTML
colee_bottom.scrollTop=colee_bottom.scrollHeight
function Marquee2(){
if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)
colee_bottom.scrollTop+=colee_bottom2.offsetHeight
else{
colee_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,speed)
colee_bottom.onmouseover=function() {clearInterval(MyMar2)}
colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
</script>
<!--向下滚动代码结束-->
<br>
<!--下面是向左滚动代码-->
<div id="colee_left" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="colee_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
</tr>
</table>
</td>
<td id="colee_left2" valign="top"></td>
</tr>
</table>
</div>
<script>
//使用div时，请保证colee_left2与colee_left1是在同一行上.
var speed=30//速度数值越大速度越慢
var colee_left2=document.getElementById("colee_left2");
var colee_left1=document.getElementById("colee_left1");
var colee_left=document.getElementById("colee_left");
colee_left2.innerHTML=colee_left1.innerHTML
function Marquee3(){
if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度
colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度
else{
colee_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
colee_left.onmouseover=function() {clearInterval(MyMar3)}
colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
</script>
<!--向左滚动代码结束-->
<br>
<!--下面是向右滚动代码-->
<div id="colee_right" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="colee_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
</tr>
</table>
</td>
<td id="colee_right2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
var colee_right2=document.getElementById("colee_right2");
var colee_right1=document.getElementById("colee_right1");
var colee_right=document.getElementById("colee_right");
colee_right2.innerHTML=colee_right1.innerHTML
function Marquee4(){
if(colee_right.scrollLeft<=0)
colee_right.scrollLeft+=colee_right2.offsetWidth
else{
colee_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
colee_right.onmouseover=function() {clearInterval(MyMar4)}
colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
</script>
<!--向右滚动代码结束-->
</body>
</html>

发表于 更新于 分类于 
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
<!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-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script>
</head>

<body>
<script type="text/javascript">
var area = "";
try
{
if(geoip_country_code() != "" && geoip_country_code() != null)
area += geoip_country_code()+", ";       
if(geoip_city() != "" && geoip_city() != null)
area += geoip_city()+", ";
if(geoip_region_name() != "" && geoip_region_name() != null)
area += geoip_region_name()+", ";
if(geoip_country_name() != "" && geoip_country_name() != null)
area += geoip_country_name();

document.write(area);
}
catch(err)
{
area="";
}
</script>
</body>
</html>

通过maxmind.com公司提供的iP数据库接口，可以查询当前客户机的IP所在地。

缺点是不能查询指定IP。

发表于 更新于 分类于

JQuery 提供了两种方式来阻止事件冒泡。

1
2
3
4
5
方式一：event.stopPropagation();

        $("#div1").mousedown(function(event){
            event.stopPropagation();
        });

方式二：return false;

1
2
3
$("#div1").mousedown(function(event){
    return false;
});
阅读全文 »