海水正蓝

面朝大海,春暖花开
posts - 145, comments - 29, trackbacks - 0, articles - 1
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

鼠标经过放大图片JQUERY

Posted on 2012-04-21 17:17 小胡子 阅读(1737) 评论(0)  编辑  收藏
http://www.malsup.com/jquery/hoverpulse/

Basic Usage

 $(document).ready(function() {     $('div.thumb img').hoverpulse(); });         

Usage with Options

 $(document).ready(function() {     $('div.thumb img').hoverpulse({         size: 40,  // number of pixels to pulse element (in each direction)         speed: 400 // speed of the animation      }); });         

http://www.51xuediannao.com/JS/texiao/fangdajubu.html
图片幻灯片
http://www.zurb.com/playground/jquery_image_slider_plugin
http://www.oschina.net/p/phzoom
看图插件
http://phoetry.me/archives/phzoom.html

[phZoom] 是一个小巧的jQuery看图插件.

==================================

当前版本: phZoom 1.23 RC
更新时间: 2011.11.05

使用方法:

1. 加载jQuery库(需1.4+)
2. 加载phZoom.css, 请保证压缩包内的两张小图片与phzoom.css同级目录
3. 加载phzoom.js, 请保证其加载于jQuery库之后
4. 调用接口:

$node.phzoom({
// 此处为设置项, 可留空
});

请把 $node 改为所需的jQuery选择器, 如: $('a:has(img)')

不管如何调用, 请务必将调用代码包在一个DOM Ready方法内, 如:

$(function(){
// 此处为上面的调用接口
});

以下为插件设置选项, 大括号结束前不要逗号

{

layOpacity:0.7,     // 遮罩层不透明度, 默认0.7即为70%不透明
layDur:300,         // 遮罩层渐显的时间, 单位毫秒
animDurA:300,       // 图片从原位飞到荧幕中间的时间, 单位毫秒
animDurB:300,       // 图片从小到大的变化时间, 单位毫秒
navColor:'#cf0',    // 上/下一张的文本颜色, 需要引号
capColor:'#cf0',    // 大图底部标题与索引的文本颜色, 需要引号
limitWidth:false    // 若设为true, 特大图将不会宽于窗口(保持宽高比)

}

图片切换效果

http://jobyj.in/adipoli/
http://www.oschina.net/p/adipoli

 

只有注册用户登录后才能发表评论。


网站导航: