注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

千年绿叶

黑夜给了我黑色的眼睛,我却用它来寻找光明......

 
 
 

日志

 
 

JQuery第3天:巧妙的伪装链接  

2013-01-10 23:40:38|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

今天的教程是草草完成的.我想把一些东西放在这15天的前面简单的讲讲,这样以来就可以使一些js新手不至于被一堆代码搞的晕头转向.事实上我是在即将结尾的时候才做出的这个决定.

目标

我们要使用jQuery去创建一小段代码,这段代码会把一个页面所有的超链接转换并且伪装起来.

为什么?

一些下属经销商认为,一部分用户有足够的悟性发现会员链接,并能尽量避免通过点击URL链接直接进入浏览器,从而“欺骗”下属经销商脱离代理(假设购买行为已经发生)

“老”办法

有很多下属经销商千方百计的掩饰他们的链接,避免人们通过链接找到他们.这些伎俩涉及到.htaccess和服务器端的代码. 但对于本教程,我会将重点放到”老学校”的java script上:

<a onMouseOver='window.status="http://www.merchant-url-here.com"; return true;' onMouseOut='window.status="Done"; return true;' href="http://www.affiliate-url-here.com" target="_blank">Link Text Here</a>

这段代码被用来在浏览器状态栏显示用户鼠标指向的链接地址.比如实际链接是www.drupaluser.org?aff=123,则可以在状态栏显示www.drupaluser.org.

问题

你是一个很活跃的下级经销商,你可能会以疯狂的速度给很多个页面添加链接.并且还要给每个链接添加这种效果那么你肯定会厌倦的.加入有一天你要修改任务栏里显示的链接的时候估计你会疯掉的.

jQuery的解决办法

首先,我们想让java script尽快的掩饰我们的链接所以我们应该先从这里开始:

<script src="jquery.js"></script> <script type="text/java script"> $(document).ready(function(){ //code goes here }); </script>

当DOM准备好的时候我们放在ready里的代码就开始执行了.

接下来

要给所有我们想伪装的链接添加一个class,class有助于jQuery帮我们找到需要伪装的链接而撇开其它不需要伪装的链接.title有两个作用:当鼠标划过链接的时候会有一个小小的盒状提示显示URL:www.affsite.com并且同样的信息会显示在浏览器的状态栏(IE Only).

<p><a href="http://www.affsite.com?id=123" title="http://www.affsite.com" class="affLink">Super Duper Product</a></p>

告诉jQuery找到有class=“affLink”的链接

$('a.affLink')

添加一个鼠标划过事件

$('a.affLink').mouseover(function(){window.status=this.title;return true;})

简单的说:找到class=“affLink”的所有链接,当鼠标划过它们的时候改变浏览器状态栏信息为该链接title的内容.这个在FireFox并不能正常的工作,只是在IE里起作用.在FireFox的状态栏只是显示一个”Done”,或者更准确的说,鼠标划过超链接对状态栏并没有任何影响.我没有更多的浏览器测试.

继续-mouseout jQuery可以让我们用”链”的方式,像这样:

$('a.affLink').mouseover(function(){window.status=this.title;return true;}) .mouseout(function(){window.status='Done';return true;});

这点代码告诉jQuery改变浏览器状态栏信息,或者当鼠标不再停留在链接上时返回”Done”. 如果你不适应jQuery的这种链的工作方式,那么你完全可以这样写:

$('a.affLink').mouseover(function(){window.status=this.title;return true;}); $('a.affLink').mouseout(function(){window.status='Done';return true;});

这就看你了.

把这些代码放到一起:

<script src="jquery.js"></script> <script type="text/java script"> $(document).ready(function(){ $('a.affLink').mouseover(function(){window.status=this.title;return true;}) .mouseout(function(){window.status='Done';return true;}); }); </script>

  评论这张
 
阅读(236)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017