请注意,本文编写于 2959 天前,最后修改于 2028 天前,其中某些信息可能已经过时。
介绍
zoom.js 是一款比较简洁而有效地 jQuery 插件。
github原作者:@fat
效果:(点击图片)
代码实现
前提引入jquery地址!
在 head.php 的
</head>
之前引入css样式表
<link rel="stylesheet" type="text/css" href="https://www.ihewro.com/zoom/css/zoom.css">
在footer.php 添加 下面 3段js
<script src="//cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://www.ihewro.com/zoom/dist/zoom.min.js" type="text/javascript"></script>
<script type="text/javascript">
var setupContents = function () {
$(".post-content img:not(article .link-box img, img[no-zoom])").each(function() {
$(this).attr('data-action', 'zoom');
if($(this).next().is('br')){
$(this).next().remove();
}
});
};
setupContents();
</script>
- 前面两个js地址由@fat 提供
- 最后一段js,是选择
post-content
区域的图片,并且加入 data-action="zoom"属性值。是从 @Hran的主题中扒出来的。我实在写不出来==灰常感谢!
最后
这个小改动应该是近期最后一个改动啦!花费好多精力
- 增加右下角返回顶部等功能小菜单(已经完成)
- 重写滚动条代码(已经完成)
- 在文章标题下方增加“百度是否收录”判断(已经完成)
- 在文章标题下的信息前面加上小图标(已经完成)
- 更改加载页面的样式。包括顶部加载条。(已经完成)
- 增加 灯箱效果。(已经完成)
要开始学习数据结构了[衰!!!]
35 条评论
所以还是换回了FancyBoxOωO
不过FancyBox能过百度移动落地页,别的我试了好几个没通过检查
博主,问哈你,你这个侧边栏的博客信息里的最后更新,是获取的最后一次登陆后台的时间还是说文章最后更新的时间呀?实在是不知道获取的什么来显示最后更新的。 ̄﹃ ̄
你可以百度一下typecho这个函数,可以拿到文章最后更新的时间
你现在的模板没加灯箱哈
对,zoom.js 我觉得不适合这个模板,暂时就没加
谢谢哈 好用
:oops: 喜欢就好
谢谢分享
iOS Chrome 下没有效果。另外,引用 bootstrap 仅仅是为了 CSS 效果吗?
不是CSS效果,而是作者依靠了bootstrap的框架写的,所以引入了JS。你试试这个地址,有效果吗。这个是作者的demo页面。可能是我的安装问题https://fat.github.io/zoom.js/
不行呢 #[挖鼻]
我想说安卓上可以欸
应该是#
ok 我明天再看 现在有点晚了。。。
嗯!
好看
这个效果好看
效果不错哦,谢谢分享!
博客界面简洁美观,评论也是萌萌的
这个好,棒棒哒,感谢分享,哈哈
前些天我也换的这个
咋啦
没事#[乖]
咦 莫非 莫非是我眼睛出了问题,博主的弹出图片后周围也是透明遮盖的。我想要像Hran那样不透明的,替换了一下Hran的CSS文件,不透明了。嗯……看来问题出在CSS.不是很懂CSS,博主是修改了哪里?
0 0 不应该是CSS的问题吧,因为我是用博主现在用的
是css问题,我的css是在原作者基础上改的,你去GitHub下载原作者CSS就是纯白的
好奇怪啊 我用了。可是我点开图片周围背景不像博主一样是全白的,而是有点遮盖透明的。