手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:plugins

jQuery插件——文章自动生成导航

Submitted by gouki on 2009, February 27, 10:15 AM

这个插件很实用，适合那种写着教程内容的页面，以前如果有多个标题的话，必须一个一个的加锚点，然后再加链接，这样不太方便。所以看到这个插件的时候，我忍不住记录下来。

代码我没有细看，我只看了demo，自己觉得还是很有用的。
代码来自CSSRain.cn，图片同样来自他那里。
网站说：

XML/HTML代码
  1. 首先根据文章 自动在 右上角生成 导航菜单，  
  2. 然后导航菜单可以 跟随 滚动条滚动 ，实时导航。  
  3. 导航采用平滑方式，更人性化。  
  4.   
  5. 演示：  
  6. http://cssrain.cn/demo/createTitle/title.html  
  7.   
  8. 下载：  
  9. http://cssrain.cn/demo/createTitle/createTitle.rar  
  10.   
  11. 有问题 请留言， 只测试了 google  和 firefox 。   

不过，IE或者其他的一些多窗口版的浏览器，会不会把它当成AD层屏蔽掉呢？
截图：
大小: 40.92 K 尺寸: 500 x 141 浏览: 2676 次 点击打开新窗口浏览全图
源码分流：
createtitle.rar

Tags: jquery, plugins, 导航

Javascript | 评论:0 | 阅读:20268

jQuery Plugins -- JQzoom

Submitted by gouki on 2008, November 14, 10:52 AM

demo地址：http://www.51toria.cn/demo/JQplus/jqzoom/

 

使用的JS：

 

XML/HTML代码（用JS代码的时候居然卡住了。没办法，只能用XML代码来展示）
  1. //**************************************************************  
  2. // jQZoom allows you to realize a small magnifier window,close  
  3. // to the image or images on your web page easily.  
  4. //  
  5. // jqZoom version 1.0  
  6. // Author Doc. Ing. Renzi Marco(www.mind-projects.it)  
  7. // Released on Dec 05 2007  
  8. // i'm searching for a job,pick me up!!!  
  9. // mail: renzi.mrc@gmail.com  
  10. //**************************************************************  
  11.   
  12. (function($){  
  13.   
  14.         $.fn.jqueryzoom = function(options){  
  15.   
  16.         var settings = {  
  17.                 xzoom: 200,     //zoomed width default width  
  18.                 yzoom: 200,     //zoomed div default width  
  19.                 offset: 10,     //zoomed div default offset  
  20.                 position: "right"  //zoomed div default position,offset position is to the right of the image  
  21.             };  
  22.   
  23.             if(options) {  
  24.                 $.extend(settings, options);  
  25.             }  
  26.   
  27.         $(this).hover(function(){  
  28.   
  29.   
  30.             var imageLeft = $(this).get(0).offsetLeft;  
  31.             var imageRight = $(this).get(0).offsetRight;  
  32.             var imageTop =  $(this).get(0).offsetTop;  
  33.             var imageWidth = $(this).get(0).offsetWidth;  
  34.             var imageHeight = $(this).get(0).offsetHeight;  
  35.   
  36.             var bigimage = $(this).attr("alt");  
  37.   
  38.             if($("div.zoomdiv").get().length == 0){  
  39.   
  40.             $(this).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");  
  41.   
  42.             }  
  43.   
  44.             if(settings.position == "right"){  
  45.   
  46.             leftpos = imageLeft + imageWidth + settings.offset;  
  47.   
  48.             }else{  
  49.   
  50.             leftpos = imageLeft - settings.xzoom - settings.offset;  
  51.   
  52.             }  
  53.   
  54.             $("div.zoomdiv").css({ top: imageTop,left: leftpos });  
  55.   
  56.             $("div.zoomdiv").width(settings.xzoom);  
  57.   
  58.             $("div.zoomdiv").height(settings.yzoom);  
  59.   
  60.             $("div.zoomdiv").show();  
  61.   
  62.   
  63.                     $(document.body).mousemove(function(e){  
  64.   
  65.                     var bigwidth = $(".bigimg").get(0).offsetWidth;  
  66.   
  67.                     var bigheight = $(".bigimg").get(0).offsetHeight;  
  68.   
  69.                     var scaley ='x';  
  70.   
  71.                     var scalex= 'y';  
  72.   
  73.   
  74.                     if(isNaN(scalex)|isNaN(scaley)){  
  75.   
  76.                     var scalex = Math.round(bigwidth/imageWidth) ;  
  77.   
  78.                     var scaley = Math.round(bigheight/imageHeight);  
  79.   
  80.                     }  
  81.   
  82.                     mouse = new MouseEvent(e);  
  83.   
  84.   
  85.   
  86.                     scrolly = mouse.y - imageTop - ($("div.zoomdiv").height()*1/scaley)/2 ;  
  87.   
  88.                     $("div.zoomdiv").get(0).scrollTop = scrolly * scaley  ;  
  89.   
  90.                     scrollx =    mouse.x - imageLeft - ($("div.zoomdiv").width()*1/scalex)/2 ;  
  91.   
  92.                     $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;  
  93.   
  94.   
  95.                     });  
  96.             },function(){  
  97.                $("div.zoomdiv").hide();  
  98.                $(document.body).unbind("mousemove");  
  99.                $(".lenszoom").remove();  
  100.                $("div.zoomdiv").remove();  
  101.             });  
  102.   
  103.         }  
  104.   
  105. })(jQuery);  
  106.   
  107. function MouseEvent(e) {  
  108. this.x = e.pageX  
  109. this.y = e.pageY  
  110. }  

 

页面调用方法：

JavaScript代码
  1. jQuery.noConflict();  
  2. jQuery(document).ready(function(){  
  3. $("img.jqzoom").jqueryzoom();  
  4. });  

 

Tags: jquery, plugins, jqzoom, javascript, demo

Javascript | 评论:3 | 阅读:28581