随笔分类 - jquery
摘要：HTML：View Code <ul> <li class="address">中国 <ul> <li>北京</li> <li>杭州</li> <li class="address">温州 <ul> <li>鹿城区</li> <li>瓯海区</li> ...
阅读全文
摘要：描述：表格记录分页显示，点击相应页码，显示相应记录数HTML：View Code <table border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>小文</t...
阅读全文
摘要：只用在上篇（http://www.cnblogs.com/wenzichiqingwa/archive/2012/12/03/2799350.html）的基础上做些修改即可：把click方法里‘隐藏效果的代码’改成如下： $('table th:not(:nth-child('+(col_index+1)+'))').hide(); $('table td:not(:nth-child('+(col_index+1)+'))').hide();即可。:not方法，参考手册
阅读全文
摘要：NUM1:隐藏当前选中的行（点击当前选中行）NUM2:隐藏当前选中的列（点击列标题）在前两篇的基础上加一些代码，大部分都相同。HTML：View Code <table border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> ...
阅读全文
摘要：描述：鼠标悬停列标题，改变该列的背景色HTML：<table border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>小文</td> ...
阅读全文
摘要：NUM1：鼠标悬停改变改变行背景；NUM2:隔行换色；HTML：<table border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>小文</td> ...
阅读全文
摘要：描述：点击指示左右方向的图片，图片可以左右移动，并且左移动一个图片，此图片（第一个图片）自动排到图片队列最后面（成为最后一张图片）。右移动一个图片，此图片（最后一个图片）自动排到图片队列最前面（成为第一张图片）上述描述遇到了问题，也许是我用jquery的appendTo和prependTo方法，图片HTML代码重新排列，第二张图片会自动迁移占了原本第一张图片的位置，也就是说，我每次点击向左移动时，所有图片其实向前移动了两次（除了第一张）。唉。。。纠结~~~~到底什么原因啊，怎么解决啊。先不管了，以后再说吧。HTML： <div id="scroller"> &l
阅读全文
摘要：描述：让图片按分页的形式显示，点击那一页。就显示哪副图片，应该就是幻灯片的效果了。思路：1，一副幻灯片的效果，有页码区域和图片区域。2，页码区域如何实现，页码的阿拉伯数字哪里来？图片区域图片是要重合叠加的，当页面刚加载完的时候，首先显示的是第一张图片，其他不显示。3，点击页码，图片区域要显示相应的图片，如何实现？4，我该采取哪种页码区域和图片区域的代码的组合方式？此时脑里有了一种组合方式：我觉得让页码区域直接用HTML写上，看着不舒服，此刻我就决定用让JS来实现页码区域，HTML只实现图片区域。页码区域干脆就显示在图片区域左上方。管它合理不合理，先写了再说。HTML: <!--I...
阅读全文
摘要：根据之前掌握的jquery，可以试着写一个类似有些网上商城，网站的图片滑动的效果。之前见过QQ，迅雷上都有见过。描述：左边一列的产品小图片，滑动到上面时，右边内容区域显示响应的大图。思路和前面有一篇文章一样。我用的是table，只是做个演示效果。我不是做前端的，就当玩玩了。HTML： <table id="tbl"> <tr> <td width="84"> <a href="iphone.jpg"><img src="iphone.jpg" class=&qu
阅读全文
摘要：描述：当鼠标划入小图标时，放大本身；划出时，恢复至原大小HTML： <div id="images"> <a href="pic1.jpg"><img src="pic1.jpg" alt="" /></a> <a href="pic2.jpg"><img src="pic2.jpg" alt="" /></a> <a href="pic3.jpg"
阅读全文
摘要：效果描述：鼠标hover每个小图片上，相应的在ID为large处显示大图。并且伴有渐隐渐显的效果。HTML: <div id="images"> <a href="pic1.jpg"><img src="pic1.jpg" alt="" /></a> <a href="pic2.jpg"><img src="pic2.jpg" alt="" /></a> <a hre
阅读全文
摘要：目的：为了 了解stop()的用法，举个例子，直观的方式看看。实物：一个id="animater"的div包含了一段文字。(以下用animator表示实物)动画最终的完整效果：animater向右移动800px（这个完整的过程是动画1），然后，字体逐渐变大（这个完整的过程是动画2），然后，透明度逐渐降低到0（这个完整的过程是动画3），然后透明度逐渐恢复到1（这个完整的过程是动画4），然后字体大小变为16px同时移动到距离左边界200px的位置（这个完整的过程是动画5）.操作：点击不同id的button，观看效果。HTML代码： <div id="animat
阅读全文
摘要：效果描述：让文本形式新闻，显示给访问站点的人看。让新闻在一个不可见窗口中往上滚动，当新闻全部滚动到上面消失之后，在窗口底部重新出现，并继续向上滚动。HTML:<div id="scroller"> <p> 据韩国《朝鲜日报》10月6日报道，美国国会在上月出版的一份报告中证实，美国在中日存在主权纠纷的钓鱼岛问题上，只承认日本的“行政权”，而非承认日本对其拥有“主权”。 据报道，美国国会调查局（CRS）将1996年报告修改后，于上月末重新出版了一份题为《钓鱼岛纠纷：美国条约的义务》的报告。该报告显示，美国政府委托国会批准1972年与日本签署的《返...
阅读全文
摘要：效果描述：所有图片排队向左移动，从左边界依次消失，当最后一副图片消失后。所有图片再排队，依次从右边界出现，进入scroller范围。再排队依次消失。。周而复始。HTML: ...
阅读全文
摘要：效果描述：有几副图片，让他们依次叠加重合。首先显示第一张图片。然后鼠标悬停在上面，边框变化。然后离开，然后第一张淡出，第二张淡入。接着悬停在第二张图片，边框变化，然后离开，第二张淡出，第三张淡入。以此类推。HTML:<a href="#" class="image"><img src="pic1.jpg" alt="" width="150" height="150" /></a><a href="#" class
阅读全文
摘要：HTML： <div id="scroller1"> <img src="pic1.jpg" alt="" width="150" height="150" class="oneImage"/></div>CSS：img{ border: 0; /*图片要实现动画效果，必须要设置此CSS属性*/ position: relative;} /*只能容纳显示一张图片*/#scroller1{ marg...
阅读全文
摘要：HTML ：<div id="scroller1"> <img src="pic1.jpg" alt="" width="150" height="150" class="oneImage"/></div>CSS： img{ border: 0; /*图片要实现动画效果，必须要设置此CSS属性*/ position: relative; } /*只能容纳显示一张图片*/ #scroller1{ ...
阅读全文
摘要：HTML：<h3>对象数组显示</h3><table id="obj" border="1"> </table>jquery：var animals = [ { 'name':'dog', 'mouse':'wangwang..' }, { 'name':'cat', 'mous...
阅读全文
摘要：HTML： <h3>原始数组</h3> <div id="show5"></div> <h3>原数组的一部分</h3> <div id="show6"></div> <h3>原数组的剩下一部分</h3> <div id="show7"></div>Jquery：var animals = ['dog','cat','tiger','pig
阅读全文
摘要：HTML：View Code 1 <h3>字符串数组排序前</h3>2 <div id="show5"></div>3 <h3>排序后</h3>4 <div id="show6"></div>jquery：View Code var animals = ['dog','cat','tiger','pig','bird'];$('#show5').html(anima
阅读全文
