首页 > Other > 简单的jQuery图片弹出插件popImage

简单的jQuery图片弹出插件popImage

近来由于项目中的一个小需求,自己制作了一个简单的图片弹出插件,觉得还挺不错的~嘻嘻!(臭美一下)特拿来跟大家分享一下,梦三秋也好久没有自己写插件了呢~呵呵~最近太忙了,实在是抱歉呀,连文章都很少写了。

此插件的特点:

  1. 灰常小巧,未压缩2.2KB,mini压缩之后1.7KB
  2. 功能简单,但是比较漂亮~嘿嘿~
  3. 即将要弹出的大图都会被插件预加载到页面中,以作弹出时候的准备
  4. 使用简单,配置参数很少
    配置参数1:tagName=>这个表示图片地址是取自DOM元素的什么属性,默认的是“href”,
    配置参数2:timeOut=>这个表示,弹出图片所用的时间。

就这么点特点~~哈哈~~大家赏脸的话,可以到下面的链接去瞅瞅DEMO演示,嘿嘿~~如果觉得效果还不错~~也可以打包拿走。

button-demo.pngbutton-download.png

下面来说说怎么使用这个插件的撒:

  • 首先肯定是得加入jquery的官方库文件的啦,此插件支持1.4及以上jquery版本。
    1 <script type="text/javascript" src="jquery_1.5.min.js"></script>
  • 然后嘛,那肯定就是梦三秋写的插件了。
    1 <script type="text/javascript" src="jquery.popImage.mini.js"></script>
  • 嘿嘿~本来应该还有个css文件要加载的,不过梦三秋已经在jquery.popImage.mini.js这个js文件里面做了自动加载的处理了,所以就不需要大家手动加载css样式文件按了。但是有一点要注意的是打包文件下载下来,里面的目录结构是不能变的哦~css文件夹中的popImage.css文件是不能挪动位置的,还有images文件夹下的close.png图片是必须的,其他的图片是页面上的演示图片,可以删除掉。
  • 好了~~有了前面两个准备工作,下面就可以调用插件了。对了,首先看看HTML代码:
    1 <a target="_blank" href="images/3.jpg" rel="gallery" class="image_gall" title="Big image 3"><img src="images/3s.jpg"></a>
    2 <a target="_blank" href="images/3.jpg" rel="gallery" class="image_gall" title="Big image 3"><img src="images/3s.jpg"></a>

    jquery代码:

    1 $(function(){
    2 $("a.image_gall").popImage();
    3 })

    OK,是不是很简单啊!

上面只是简单举了个例子,还有一些用法,自己去看DEMO演示吧!

分类:Other
  1. 还没有评论。
  1. No trackbacks yet.

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: