我们的生活比蜜甜

7个简易网页效果mootools插件 - [JQuery]

最近研究，前台展示的东西，发觉会的东西实在是少，不会div切图，JS也不咋地，看来要学习的还很多啊。转帖，留下以备后用！

脚本的最大优点就是仅仅一小段巧妙就可以极大地提升网站的用户体验，得意于Mootools开发社区非常擅长于开发一些专业的高质量插件，我今天可 以收集到一些值得在网站设计中使用的插件，他们可以帮助你提高网站用户体验到一个新的层次，当前前提是你喜欢mootools。

引文原文：http://davidwalsh.name/7-mootools-plugins

AutoGrow

我很确信文本域和文本框都应该提供一个可以自动放大的效果，AutoGrow 可以让文本域的大小自动的渐变,这样你即便输入很多容内也可以在文本域内完整的看到所有内容。
Download && DEMO 

FancyForm

FancyForm 是checkbox增强插件，用来替换表单中奇丑的checkbox和radio，FancyForm 的样式完全由css控制。

Website & Download Documentation Example Usage

 

Milkbox

图片丰富的网站都少补了一个好的灯箱效果（更多的灯箱效果可以猛点这里：http://jsssc.cn/30-useful-ajax-lightbox-and-modal-dialog-solutions/）插件，Milkbox包含了实现所有灯箱效果的脚本，它可以轻松实现各种经典的渐变效果到页面元素上，经常用在flash视频，图片集，xml画廊。

Website, Download, Documentation, & Example Usage

 

Quickboxes

不要让用户一个亿个去点击很多的复选框，Quickboxes允许通过点击并拖动来同时选中多个复选框，只需点击其中一个然后拖动鼠标，有鼠标经过 的复选框都可以被选中（也可以设置成切换选中状态），有时候你的用户可能需要选中复选框中的一部分而已， Quickboxes可以帮你忙。

Website & Download Documentation Example Usage

 

SmoothScroll

SmoothScroll可以让页面缓缓地移动到指定的锚点，从而可以代替默认的跳动效果。

Website & Download Documentation Example Usage

 

Tips

Tips是用来代替默认的提示title的效果，它帮你创建富有质感的提示框。

Website & Download Documentation Example Usage

 

ZebraTables

ZebraTables 帮你实现表格的隔行换色、单击变色、鼠标滑过变色效果。

Website & Download Documentation Example Usage

JS实现select选择value值，赋值给input各项属性 - [JQuery]

<SCRIPT LANGUAGE="JavaScript"> 
function getKeyTagValue() 
{ 
    var arr = document.form1.select.value; 
    document.form1.textID.name=arr; 
} 
</SCRIPT> 
  <form   name="form1"   method="post"   action=""> 
      <p>选择: 
          <select name="select" onchange="getKeyTagValue()"> 
              <option   value="se" selected>关键字</option> 
              <option   value="tag">标签</option> 
          </select>
      </p> 
      <p>名称             
          <input   name="se"   type="text"   id="textID"> 
      </p> 
  </form>

连击党的噩梦！！ - [JQuery]

最近老有连击党，修改input，onclick事件，点击后，submit变灰

<form name=form1 method="POST" action="http://www.baidu.com" target=_blank>
<p><input type="text" name="T1" size="20">

<input type="button" value="提交" onclick="javascript:{this.disabled=true;document.form1.submit();}">
<input type="reset" value="重置" name="B2"></p>
</form>

JS和CSS的一些小应用 - [JQuery]

1.select对话框，选择对应value的内容，并显示在DIV里。

<script>
function showimage(arg){
  var dd = arg.indexOf('img:');
  var ff = arg.substring(dd+4);
  hehe.style.display='';
  susu.src= 'Dock.jpg';
}
function qudiao(){
  hehe.style.display='none';
}
</script>
<style type="text/css">
<!--
#hehe {
    position:absolute;
    width:200px;
    height:115px;
    z-index:1;
    left: 66px;
    top: 21px;
}
-->
</style>

<div id="hehe" style="display:none">
<img  id="susu" onmouseout="qudiao()" src="" width="500px"  height="100px" border="0" /></div>
<select id="engraving_cy" style="width: 800px;" size="5" name="engraving_cy" onchange="showimage(this.options[selectedIndex].text)">
<option value="950@p@140x77x3xpublic/upload/material/431a25f852f7b0ea79c9adc594785812.jpg@p@mm">dimg:public/upload/material/431a25f852f7b0ea79c9adc594785812.jpg</option>
<option value="650@p@140x77x2xpublic/upload/material/431a25f852f7b0ea79c9adc594785812.jpg@p@mm">price:650;width:140;height:77;amount:2;unit:;img:public/upload/material/431a25f852f7b0ea79c9adc594785812.jpg</option>
</select>

 

2. 鼠标划过，变色！！！

最简单的办法：

<table width="200" border="1">
      <tr  onmouseover="this.bgColor='#666666'" onmouseout="this.bgColor='#FFFFFF'" >
          <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      </tr>
     <tr  onmouseover="this.bgColor='#666666'" onmouseout="this.bgColor='#FFFFFF'" >
          <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
     </tr>
</table>

JQuery实现<select>onchang事件触发展开一个div - [JQuery]

PS：标题有点绕，具体意思是：选择了某项，会出现一个input对话框，不选就不出现，引用JQuery文件！

1.在不引用Jquery时，可以alter所选项的index！其中，option可跟disabled标签

<select name="ask_sort" onchange="alert(selectedIndex)">
        <option>0</option>
        <option disabled="disabled">-----游戏-----</option>
        <option>2</option>
        <option>3</option>
</select>

2.现在根据上面的原理。引用JQuery，如下：

<script type="text/javascript" src="../js/jquery.js"></script>

<select name="ask_sort" onchange="$('#gamenick').css('display', selectedIndex==0?'none':'')">
        <option>0</option>
        <option disabled="disabled">-----游戏-----</option>
        <option>2</option>
        <option>3</option>
        </select>
<div class="cF Fdiv" id="gamenick" style="display:none">
    <input name="ask_nick" type="text" />
</div>

用JS控制css的desplay就好了，