标题: 【神器】细节决定成败 哈哈好久没爆了
时间: 2013-07-01
①
实现在下拉框中打开友情链接2种方法
分类： css
javascript 网易采用下拉框，当选取下拉列表框时，找开对应的网址，有两种：本地窗口打开，新窗口打开
新窗口的打开代码：
<select name="select2" onchange="javascript:window.open(this.options[this.selectedindex].value)" >
<option selected> --- 友情链接 --- </option>
<option value=http://www.163.com>网易</option>
<option value=http://www.sina.com.cn>新浪</option>
<option value=http://www.sohu.com>搜狐</option>
</select>
跳转到当前页：
<select name="here " onchange="location.href=this.options.value;">
<option selected> --- 友情链接 --- </option>
<option value= "http://www.163.com "> 163 </option>
<option value= "http://www.sina.com "> sina </option>
<option value= "http://www.taobao.com "> taobao </option>
</select>
跳转到新页面：【这个我喜欢比较通用的】
<select size="1" onchange="if(this.value!='#') window.open(this.value);" >
<option selected> --- 友情链接 --- </option>
<option value="http://www.163.com">163 </option>
<option value="http://www.sina.com">sina </option>
<option value="http://www.taobao.com">taobao </option>
</select>
②
设为首页、加入收藏
分类： js
javascript url
<a onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.txlxx.com/');">设为首页</a>
<a target=_top href="javascript:window.external.addFavorite('http://www.txlxx.com/','屯溪路小学');">加入收藏</a>
貌似只有ie的··
③
如何设置select下拉菜单的高度
分类： css
div众所周知，select要设置宽度很简单，但是真要设置它的高度貌似还没啥好办法。
select有一个size属性，就是显示option的项数目，那么我们可以通过这个属性去想想办法，请看下面这段：
<select id=tt name=tt onmouseover="this.size='4';" onmouseout="this.size='1';">
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
<option>河北</option>
<option>山西</option>
<option>内蒙古</option>
</select>
好像还不错是吧？哈哈，但一定要记得如果弄不好会出现页面被挤来挤去的现象，所以一定要记得设置好父元素(div、li、td)的高度。
④
简单图片缩放插件 CSS & jQuery
分类： js css jquery 插件 jquery url 脚本 filter网上找到的一个不错的插件叫Zoomy 是一个非常容易实现的jQuery插件，它可以实现图像放大的功能。除了缩略图以外还需要一张原始尺寸的图片。这边焦点部分使用了CSS3技术，如果是IE用户可能看到焦点形状不是圆形，另外图片还有个加载效果。
浏览地址： http://www.sunflowamedia.com/web-design/examples/jquery/20110125/
Step1. 创建HTML
[xhtml] view plaincopyprint?<p id="zoomy"><a class="zoom" href="images/lucyZoom.jpg" mce_href="images/lucyZoom.jpg"><img src="images/lucyTn.jpg" mce_src="images/lucyTn.jpg" /></a></p>
<p id="zoomy"><a class="zoom" href="images/lucyZoom.jpg" mce_href="images/lucyZoom.jpg"><img src="images/lucyTn.jpg" mce_src="images/lucyTn.jpg" /></a></p>
Step2. 创建CSS
[css] view plaincopyprint?#zoomy {
width: 500px;
margin: 0 auto;
border: 1px solid #2d353f;
padding: 5px;
}
.zoomy{
position: absolute;
display: none;
background-repeat: no-repeat;
-webkit-box-shadow: 3px 3px 10px #000;
-moz-box-shadow: 3px 3px 10px #000;
border: 0;
cursor: url(../images/blank.gif), move;
line-height: 100px;
text-align: center;
background-image: url(../images/loading.gif);
background-position: center;
background-color: #fff;
z-index: 1000;
}
.zoomy span{
display: block;
margin: 10px auto;
background:-webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.50, rgba(255, 255, 255, 0)), to( rgba(255, 255, 255, .5)));
background:-moz-linear-gradient(bottom center, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .5) 100%);
}
.zoomy img{
opacity: 0;
filter: alpha(opacity=0);
}
.zoomy a{ color: #333;
text-decoration: none;
}
.broke a{
display: block;
height: 100%;
width: 100%;
}
#brokeZoomy{
display: block;
position: absolute;
width: 30px;
height: 30px;
top: 0px;
left: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background: #fff url(../images/broke.gif) center no-repeat;
}
#zoomy {
width: 500px;
margin: 0 auto;
border: 1px solid #2d353f;
padding: 5px;
}
.zoomy{
position: absolute;
display: none;
background-repeat: no-repeat;
-webkit-box-shadow: 3px 3px 10px #000;
-moz-box-shadow: 3px 3px 10px #000;
border: 0;
cursor: url(../images/blank.gif), move;
line-height: 100px;
text-align: center;
background-image: url(../images/loading.gif);
background-position: center;
background-color: #fff;
z-index: 1000;
}
.zoomy span{
display: block;
margin: 10px auto;
background:-webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.50, rgba(255, 255, 255, 0)), to( rgba(255, 255, 255, .5)));
background:-moz-linear-gradient(bottom center, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .5) 100%);
}
.zoomy img{
opacity: 0;
filter: alpha(opacity=0);
}
.zoomy a{
color: #333;
text-decoration: none;
}
.broke a{
display: block;
height: 100%;
width: 100%;
}
#brokeZoomy{
display: block;
position: absolute;
width: 30px;
height: 30px;
top: 0px;
left: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background: #fff url(../images/broke.gif) center no-repeat;
}
Step3. 插入jQuery和脚本包
[javascript] view plaincopyprint?$(function(){
$('.zoom').zoomy();
});
$(function(){
$('.zoom').zoomy();
});
脚本包和插件:
[javascript] view plaincopyprint?script type="text/javascript" src="http://www.baijs.nl/js/jquery-1.4.2.min.js"></script>
<mce:script type="text/javascript" src="js/jquery.zoomy0.5.min.js" mce_src="js/jquery.zoomy0.5.min.js"></mce:script>
script type="text/javascript" src="http://www.baijs.nl/js/jquery-1.4.2.min.js"></script>
<mce:script type="text/javascript" src="js/jquery.zoomy0.5.min.js" mce_src="js/jquery.zoomy0.5.min.js"></mce:script>
压缩包to sunny呵呵-
我是不愿去搞的⑤
鼠标经过样式
css layout image
[c-sharp] view plaincopyprint?a{display: block;border-bottom: 1px solid #BBB;padding: 4px;color: #666;text-decoration: none;}
a:hover{background: #FE4902;color: white;}
h2{ font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;font-weight: normal;font-size: 50px;margin: 0;padding: 50px 0 20px 0;text-align: center;text-shadow: 1px 1px 1px black;color:#FE4902;}
ul { margin:0; padding:0; width:500px;}
li{ list-style:none;}
a{display: block;border-bottom: 1px solid #BBB;padding: 4px;color: #666;text-decoration: none;}
a:hover{background: #FE4902;color: white;}
h2{ font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;font-weight: normal;font-size: 50px;margin: 0;padding: 50px 0 20px 0;text-align: center;text-shadow: 1px 1px 1px black;color:#FE4902;}
ul { margin:0; padding:0; width:500px;}
li{ list-style:none;}
[xhtml] view plaincopyprint?<h2>Creating Simple 你好！</h2>
<ul>
<li><a href="#" mce_href="#">Portfolio Slider Gally with CSS & jQuery</a></li>
<li><a href="#" mce_href="#">Mirror Image Slideshow with CSS & jQuery</a></li>
<li><a href="#" mce_href="#">Fixed SideNav Layout with CSS & jQuery</a></li>
</ul>
<h2>Creating Simple 你好！</h2>
<ul>
<li><a href="#" mce_href="#">Portfolio Slider Gally with CSS & jQuery</a></li>
<li><a href="#" mce_href="#">Mirror Image Slideshow with CSS & jQuery</a></li>
<li><a href="#" mce_href="#">Fixed SideNav Layout with CSS & jQuery</a></li>
</ul>
效果图：
⑥
还有很多呢演示http://3g.cn.nfiWeibo腾讯开放api微博系统
官方网站：http://open.t.qq.com/apps/iweibo/程序介绍：
iWeibo系统是基于腾讯微博开放平台API开发的一套免费微博系统，广大开发者和站长可下载安装文件部署到自己的服务器上，为网站提供微博服务，也可以在此系统基础上进行更丰富的功能开发。
1．提供功能完整的微博系统
包含腾讯微博全面功能+运营管理后台，与腾讯微博帐号对接，用户信息/收听关系同步。
2．可进行运营内容与前端展现定制
提供运营内容管理后台，可方便的定制面向用户运营推荐元素；
页面代码完全开源，可自定义个性化前端展示。
3．稳定强大的技术支持
兼容多种服务器配置海量数据下稳定的后台；
腾讯提供超大规模用户在线承载能力；
通过授权机制，为用户信息与资料安全提供强力保障。
4．海量用户群中的营销机会
通过iWeibo系统，从腾讯微博中获取海量的用户资源；
将网站产生的信息通过微博传播到千万级用户的腾讯平台中，得到营销推广机会。
5．自动化安装流程
⑦
中国象棋php开发在线游戏online
287kb-小吧？web版的线上棋牌游戏。
能建房间，更改玩家名称，在游戏中发送即时消息等。
安装方法：运行install.php，填写好服务器、数据库、用户名、密码等信息，然后提交即可。
⑧
斗兽棋php开发在线游戏online32kb-小吧?web版的线上棋牌游戏。
能建房间，更改玩家名称，在游戏中发送即时消息等。
安装方法：运行install.php，填写好服务器、数据库、用户名、密码等信息，然后提交即可。
纯js版星际争霸
不信试试
实现在下拉框中打开友情链接2种方法
分类： css
javascript 网易采用下拉框，当选取下拉列表框时，找开对应的网址，有两种：本地窗口打开，新窗口打开
新窗口的打开代码：
<select name="select2" onchange="javascript:window.open(this.options[this.selectedindex].value)" >
<option selected> --- 友情链接 --- </option>
<option value=http://www.163.com>网易</option>
<option value=http://www.sina.com.cn>新浪</option>
<option value=http://www.sohu.com>搜狐</option>
</select>
跳转到当前页：
<select name="here " onchange="location.href=this.options.value;">
<option selected> --- 友情链接 --- </option>
<option value= "http://www.163.com "> 163 </option>
<option value= "http://www.sina.com "> sina </option>
<option value= "http://www.taobao.com "> taobao </option>
</select>
跳转到新页面：【这个我喜欢比较通用的】
<select size="1" onchange="if(this.value!='#') window.open(this.value);" >
<option selected> --- 友情链接 --- </option>
<option value="http://www.163.com">163 </option>
<option value="http://www.sina.com">sina </option>
<option value="http://www.taobao.com">taobao </option>
</select>
②
设为首页、加入收藏
分类： js
javascript url
<a onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.txlxx.com/');">设为首页</a>
<a target=_top href="javascript:window.external.addFavorite('http://www.txlxx.com/','屯溪路小学');">加入收藏</a>
貌似只有ie的··
③
如何设置select下拉菜单的高度
分类： css
div众所周知，select要设置宽度很简单，但是真要设置它的高度貌似还没啥好办法。
select有一个size属性，就是显示option的项数目，那么我们可以通过这个属性去想想办法，请看下面这段：
<select id=tt name=tt onmouseover="this.size='4';" onmouseout="this.size='1';">
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
<option>河北</option>
<option>山西</option>
<option>内蒙古</option>
</select>
好像还不错是吧？哈哈，但一定要记得如果弄不好会出现页面被挤来挤去的现象，所以一定要记得设置好父元素(div、li、td)的高度。
④
简单图片缩放插件 CSS & jQuery
分类： js css jquery 插件 jquery url 脚本 filter网上找到的一个不错的插件叫Zoomy 是一个非常容易实现的jQuery插件，它可以实现图像放大的功能。除了缩略图以外还需要一张原始尺寸的图片。这边焦点部分使用了CSS3技术，如果是IE用户可能看到焦点形状不是圆形，另外图片还有个加载效果。
浏览地址： http://www.sunflowamedia.com/web-design/examples/jquery/20110125/
Step1. 创建HTML
[xhtml] view plaincopyprint?<p id="zoomy"><a class="zoom" href="images/lucyZoom.jpg" mce_href="images/lucyZoom.jpg"><img src="images/lucyTn.jpg" mce_src="images/lucyTn.jpg" /></a></p>
<p id="zoomy"><a class="zoom" href="images/lucyZoom.jpg" mce_href="images/lucyZoom.jpg"><img src="images/lucyTn.jpg" mce_src="images/lucyTn.jpg" /></a></p>
Step2. 创建CSS
[css] view plaincopyprint?#zoomy {
width: 500px;
margin: 0 auto;
border: 1px solid #2d353f;
padding: 5px;
}
.zoomy{
position: absolute;
display: none;
background-repeat: no-repeat;
-webkit-box-shadow: 3px 3px 10px #000;
-moz-box-shadow: 3px 3px 10px #000;
border: 0;
cursor: url(../images/blank.gif), move;
line-height: 100px;
text-align: center;
background-image: url(../images/loading.gif);
background-position: center;
background-color: #fff;
z-index: 1000;
}
.zoomy span{
display: block;
margin: 10px auto;
background:-webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.50, rgba(255, 255, 255, 0)), to( rgba(255, 255, 255, .5)));
background:-moz-linear-gradient(bottom center, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .5) 100%);
}
.zoomy img{
opacity: 0;
filter: alpha(opacity=0);
}
.zoomy a{ color: #333;
text-decoration: none;
}
.broke a{
display: block;
height: 100%;
width: 100%;
}
#brokeZoomy{
display: block;
position: absolute;
width: 30px;
height: 30px;
top: 0px;
left: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background: #fff url(../images/broke.gif) center no-repeat;
}
#zoomy {
width: 500px;
margin: 0 auto;
border: 1px solid #2d353f;
padding: 5px;
}
.zoomy{
position: absolute;
display: none;
background-repeat: no-repeat;
-webkit-box-shadow: 3px 3px 10px #000;
-moz-box-shadow: 3px 3px 10px #000;
border: 0;
cursor: url(../images/blank.gif), move;
line-height: 100px;
text-align: center;
background-image: url(../images/loading.gif);
background-position: center;
background-color: #fff;
z-index: 1000;
}
.zoomy span{
display: block;
margin: 10px auto;
background:-webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.50, rgba(255, 255, 255, 0)), to( rgba(255, 255, 255, .5)));
background:-moz-linear-gradient(bottom center, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .5) 100%);
}
.zoomy img{
opacity: 0;
filter: alpha(opacity=0);
}
.zoomy a{
color: #333;
text-decoration: none;
}
.broke a{
display: block;
height: 100%;
width: 100%;
}
#brokeZoomy{
display: block;
position: absolute;
width: 30px;
height: 30px;
top: 0px;
left: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background: #fff url(../images/broke.gif) center no-repeat;
}
Step3. 插入jQuery和脚本包
[javascript] view plaincopyprint?$(function(){
$('.zoom').zoomy();
});
$(function(){
$('.zoom').zoomy();
});
脚本包和插件:
[javascript] view plaincopyprint?script type="text/javascript" src="http://www.baijs.nl/js/jquery-1.4.2.min.js"></script>
<mce:script type="text/javascript" src="js/jquery.zoomy0.5.min.js" mce_src="js/jquery.zoomy0.5.min.js"></mce:script>
script type="text/javascript" src="http://www.baijs.nl/js/jquery-1.4.2.min.js"></script>
<mce:script type="text/javascript" src="js/jquery.zoomy0.5.min.js" mce_src="js/jquery.zoomy0.5.min.js"></mce:script>
压缩包to sunny呵呵-
我是不愿去搞的⑤
鼠标经过样式
css layout image
[c-sharp] view plaincopyprint?a{display: block;border-bottom: 1px solid #BBB;padding: 4px;color: #666;text-decoration: none;}
a:hover{background: #FE4902;color: white;}
h2{ font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;font-weight: normal;font-size: 50px;margin: 0;padding: 50px 0 20px 0;text-align: center;text-shadow: 1px 1px 1px black;color:#FE4902;}
ul { margin:0; padding:0; width:500px;}
li{ list-style:none;}
a{display: block;border-bottom: 1px solid #BBB;padding: 4px;color: #666;text-decoration: none;}
a:hover{background: #FE4902;color: white;}
h2{ font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;font-weight: normal;font-size: 50px;margin: 0;padding: 50px 0 20px 0;text-align: center;text-shadow: 1px 1px 1px black;color:#FE4902;}
ul { margin:0; padding:0; width:500px;}
li{ list-style:none;}
[xhtml] view plaincopyprint?<h2>Creating Simple 你好！</h2>
<ul>
<li><a href="#" mce_href="#">Portfolio Slider Gally with CSS & jQuery</a></li>
<li><a href="#" mce_href="#">Mirror Image Slideshow with CSS & jQuery</a></li>
<li><a href="#" mce_href="#">Fixed SideNav Layout with CSS & jQuery</a></li>
</ul>
<h2>Creating Simple 你好！</h2>
<ul>
<li><a href="#" mce_href="#">Portfolio Slider Gally with CSS & jQuery</a></li>
<li><a href="#" mce_href="#">Mirror Image Slideshow with CSS & jQuery</a></li>
<li><a href="#" mce_href="#">Fixed SideNav Layout with CSS & jQuery</a></li>
</ul>
效果图：
⑥
还有很多呢演示http://3g.cn.nfiWeibo腾讯开放api微博系统
官方网站：http://open.t.qq.com/apps/iweibo/程序介绍：
iWeibo系统是基于腾讯微博开放平台API开发的一套免费微博系统，广大开发者和站长可下载安装文件部署到自己的服务器上，为网站提供微博服务，也可以在此系统基础上进行更丰富的功能开发。
1．提供功能完整的微博系统
包含腾讯微博全面功能+运营管理后台，与腾讯微博帐号对接，用户信息/收听关系同步。
2．可进行运营内容与前端展现定制
提供运营内容管理后台，可方便的定制面向用户运营推荐元素；
页面代码完全开源，可自定义个性化前端展示。
3．稳定强大的技术支持
兼容多种服务器配置海量数据下稳定的后台；
腾讯提供超大规模用户在线承载能力；
通过授权机制，为用户信息与资料安全提供强力保障。
4．海量用户群中的营销机会
通过iWeibo系统，从腾讯微博中获取海量的用户资源；
将网站产生的信息通过微博传播到千万级用户的腾讯平台中，得到营销推广机会。
5．自动化安装流程
⑦
中国象棋php开发在线游戏online
287kb-小吧？web版的线上棋牌游戏。
能建房间，更改玩家名称，在游戏中发送即时消息等。
安装方法：运行install.php，填写好服务器、数据库、用户名、密码等信息，然后提交即可。
⑧
斗兽棋php开发在线游戏online32kb-小吧?web版的线上棋牌游戏。
能建房间，更改玩家名称，在游戏中发送即时消息等。
安装方法：运行install.php，填写好服务器、数据库、用户名、密码等信息，然后提交即可。
纯js版星际争霸
不信试试