订阅此博客

Archive for 十月, 2009

基于jQuery实现自动轮换的选项卡

2009-10-26 上午 - Javascript/Ajax -

想写个这样的东西很久了，恰巧项目中要用到，就下了点功夫。利用模拟鼠标事件来做轮换…

模拟鼠标事件的函数：trigger(type,[data]) 在每一个匹配的元素上触发某类事件。

点击图片预览效果

点击预览效果

点击下载代码

3 Comments » | 443 Views |

Taylor Swift — Fifteen 现场版

2009-10-23 下午 - 乱七八糟 - - - -

fifteen

由于该视频播放器页面加载后自动播放，体验上比较的不爽，换成图片链接，有兴趣可以过去看看哦。

听着，很爽的歌！这种灯光舞台风格也很明朗…

No Comments » | 207 Views |

PageRank退出历史舞台

2009-10-17 上午 - 乱七八糟 - -

今天google相关工作人员已公开说谷歌将删除工具栏的PageRank，PageRank不会列入算法中。以下是原文：
原文大意为：我们老早就告诉你们了，不要花这么多精力去关注PageRank，但还是有很多人乐此不疲，把研究这个当成是头等大事，这是一件不正确的事情，我们在工具条去掉了PageRank的数据，就是不想让大家每天都傻傻的盯着PR的展示，仅仅关注数字的高低而已。

跟PR说再见了！这个做法很好，支持ing…

顺便说句：Alexa推出中文版啦，现在终于意识到华人的庞大用户群了！

3 Comments » | 292 Views |

基于jQuery实现星级评分效果

2009-10-13 下午 - Javascript/Ajax -

仿照『口碑』的评星级效果做的一点小东西，测试下自己这段时间的学习成果···

看图知效果：

星级评分

预览效果：星级评分

下载文件：star-Level.rar

口碑的代码：starLevel-koubei.rar[提取自口碑网]

html

  1. <div class="selectStar">
  2. <ul class="clearfix">
  3.     <li>
  4.         <span class="red">*</span>
  5.         <span class="zi">服务　　</span>
  6.         <span id="dpCont1" class="dpCont"></span>
  7.         <em id="dpStar1" class="">
  8.             <a href="#" id="1">1</a>
  9.             <a href="#" id="2">2</a>
  10.             <a href="#" id="3">3</a>
  11.             <a href="#" id="4">4</a>
  12.             <a href="#" id="5">5</a>
  13.         </em>
  14.     </li>
  15. </ul>
  16. </div>

javascript:

  1. $(function(){
  2.     var className;
  3.     var classID;
  4.     var dpText="";
  5.     var dpTextC="";
  6.    
  7.     $(".selectStar em a").bind("click",function(){
  8.         className = "selectS" + $(this).attr("id");
  9.         classID = $(this).parent().attr("id");
  10.         $(this).parent().removeClass().addClass(className);
  11.        
  12.         if($(this).attr("id") == 1 || $(this).attr("id") == 2) {dpTextC = "差评";}
  13.         if($(this).attr("id") == 3 || $(this).attr("id") == 4) {dpTextC = "中评";}
  14.         if($(this).attr("id") == 5) {dpTextC = "好评";}
  15.         $(this).parent().prev(".dpCont").text(dpTextC);
  16.        
  17.         return false;
  18.     })   
  19.     .bind("mouseover",function(){
  20.         if($(this).attr("id") == 1 || $(this).attr("id") == 2) {dpText = "差评";}
  21.         if($(this).attr("id") == 3 || $(this).attr("id") == 4) {dpText = "中评";}
  22.         if($(this).attr("id") == 5) {dpText = "好评";}
  23.         $(this).parent().removeClass().addClass("selectS" + $(this).attr("id"));
  24.         $(this).parent().prev(".dpCont").text(dpText);
  25.     })   
  26.     .bind("mouseout",function(){
  27.         $(this).parent().removeClass("selectS" + $(this).attr("id"));
  28.         if($(this).parent().attr("id") == classID){
  29.             $(this).parent().addClass(className);
  30.         }
  31.        
  32.         $(this).parent().prev(".dpCont").text(dpTextC);
  33.     });
  34. });

1 Comment » | 511 Views |

妙招解决jquery中$和其他库的冲突

2009-10-13 下午 - Javascript/Ajax -

方法一：

  1. jQuery.noConflict();  //将变量$的控制权让渡给其他js库
  2. jQuery(function($){  //使用jQuery设定页面加载是执行的函数
  3.     $("p").click(function(){  //函数内部使用$()方法
  4.         alert($(this).text());
  5.     });
  6. });
  7.  
  8. $("p").style.display = "none";  //使用其他js库

————————- 分界 ————————

方法二：

  1. jQuery.noConflict();              //将变量$的控制权让渡给其他js库
  2. (function($){                     //定义匿名函数并设置形参为$
  3.     $(function(){                 //匿名函数内部的$均为jQuery
  4.         $("p").click(function(){  //继续使用$()方法
  5.         alert($(this).text());
  6.         });
  7.     });
  8. })(jQuery);                       //执行匿名函数且传递实参jQuery
  9.  
  10. $("p").style.display = "none";    //使用其他js库

1 Comment » | 340 Views |