文章配图加放大镜

By
WP札记

有短时间没放过关于WordPress有意思的东西出来啦。所以今天晚上就发个一直在折腾着的效果出来,因为刚刚补全,看着还可以。那就是–给图片加上一个放大镜,再搭配上图片幻灯效果,看着是不是高级了很多捏~~

这个最早应用在上一个主题中-twenty ten的那个修改版本(问题多已经停止下载)。记得那时候有个童鞋问我要代码,我没放,因为那时错误实在多,不好意思放,关键问题是背景有颜色设置的话,完全无效,这也是之前一段时间文章配图当鼠标滑过只有图片变浅没有放大镜的原因。还有前段时间稍微修改了一下,但是搞的图片位置错的厉害。所以今天晚上没啥心思做事,就把这个拿出来做了点改动。有兴趣可以滑过下面图片试试~~(偷懒用的前面的starcraft 2配图)

34ik9qb.jpg fmt66w.jpg

废话不说,我直接上代码。

1、jquery部分

主要部分代码(2010.12.21 更新)

鼠标滑过图片变浅

2、css部分

图片只需放在css对应的目录下

就这样,完鸟。请强制刷新看效果~~

题外

最后放一个曲子,几年前很喜欢,今天又听了一晚上,感觉依然安静奇妙。来自 怪物史莱克主题曲-Hallelujah

0

Comments: 89

  1. 帅鸟啊!!!不过已经在用fancybox,就懒得转换了,不过非常赞!! :roll:

    2011年01月05日
  2. 真的很帅啊。请问下你的幻灯片插件是哪个啊。麻烦告知一下呢。

    2011年01月07日
    • @听说 可以去搜一下: jQuery lightBox plugin

      2011年01月07日
  3. :razz: :razz: 效果不错,感觉就效果炫点,其他没大作用吗?

    2011年01月09日
  4. 这是个不错的创意

    2011年01月09日
  5. 为什么我看不见图片~~

    2011年01月10日
  6. 代码放到哪里?哪一个PHP 文件? 讲详细点吗老板。

    2011年02月15日
    • @mymoola 放自己主题的JS文件里,我写的是JS代码不是php代码。

      2011年02月15日
  7. 想问一下,怎么样可以让放大镜图片在最顶层?
    现在的代码是图片会透明遮盖放大镜图片。

    2011年06月25日
    • @YesCola 需要改$image.wrap(““);这一行,把图片和放大镜做成同级的;然后放大镜position:absolute,放到图片的上一层就可以了。具体请自己实践实践

      2011年06月25日
  8. 想要尝试一下子!但是有点害怕。 :eek:

    2011年07月06日
  9. 第二个字写错了吧!你左栏这个用户最近评论有教程没哦?和Z大应该是一个原理,希望求一份! :smile:

    2013年05月02日

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:razz:

引用(已关闭):1

pingback from WordPress文章配图加放大镜 2011/02/15