文章配图加放大镜
有短时间没放过关于WordPress有意思的东西出来啦。所以今天晚上就发个一直在折腾着的效果出来，因为刚刚补全，看着还可以。那就是--给图片加上一个放大镜，再搭配上图片幻灯效果，看着是不是高级了很多捏~~
这个最早应用在上一个主题中-twenty ten的那个修改版本（问题多已经停止下载）。记得那时候有个童鞋问我要代码，我没放，因为那时错误实在多，不好意思放，关键问题是背景有颜色设置的话，完全无效，这也是之前一段时间文章配图当鼠标滑过只有图片变浅没有放大镜的原因。还有前段时间稍微修改了一下，但是搞的图片位置错的厉害。所以今天晚上没啥心思做事，就把这个拿出来做了点改动。有兴趣可以滑过下面图片试试~~（偷懒用的前面的starcraft 2配图）
废话不说，我直接上代码。
1、jquery部分
主要部分代码（2010.12.21 更新）
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$('.entry-content a:has(img)').each(function() { //如果是带图片的链接，图片对应的id需要自己调整 if (jQuery(this).attr('href').match(/(jpg|gif|jpeg|png|tif)/)) $newclass = 'lightbox_image'; var $image = jQuery(this).contents("img"); if ($image.length > 0) { if (jQuery.browser.msie && jQuery.browser.version < 7) jQuery(this).addClass('ie6_lightbox'); $image.wrap("<span class=" + $newclass + "></span>");//把图片用span包起来 $image.parent().css({ //给这个span加css属性，当然也可以在css里直接写…… display: 'inline-block', }) } }); |
鼠标滑过图片变浅
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$('.entry-content a img').hover(function() { //图片对应的id需要自己调整 jQuery(this).stop().animate({ opacity: 0.5 }, 400) }, function() { jQuery(this).stop().animate({ opacity: 1 }, 400) }); |
2、css部分
图片只需放在css对应的目录下
|
1 2 |
.lightbox_image { background:url("images/zoom.png") no-repeat scroll center center transparent} |
就这样，完鸟。请强制刷新看效果~~
题外
最后放一个曲子，几年前很喜欢，今天又听了一晚上，感觉依然安静奇妙。来自 怪物史莱克主题曲-Hallelujah
转载请注明转自：文章配图加放大镜
帅鸟啊！！！不过已经在用fancybox，就懒得转换了，不过非常赞！！
真的很帅啊。请问下你的幻灯片插件是哪个啊。麻烦告知一下呢。
@听说 可以去搜一下： jQuery lightBox plugin
@减肥食谱 作用就是提示这个图可以放大……
这是个不错的创意
为什么我看不见图片~~
@重庆礼品网 你是网通用户吧，抱歉了……
代码放到哪里？哪一个PHP 文件？ 讲详细点吗老板。
@mymoola 放自己主题的JS文件里，我写的是JS代码不是php代码。
想问一下，怎么样可以让放大镜图片在最顶层？
现在的代码是图片会透明遮盖放大镜图片。
@YesCola 需要改$image.wrap(““);这一行，把图片和放大镜做成同级的；然后放大镜position:absolute，放到图片的上一层就可以了。具体请自己实践实践
想要尝试一下子！但是有点害怕。
第二个字写错了吧！你左栏这个用户最近评论有教程没哦？和Z大应该是一个原理，希望求一份！