专栏首页风吹屁屁凉的分享zblog首页缩略图添加鼠标悬浮图片缩放特效

zblog首页缩略图添加鼠标悬浮图片缩放特效

继前天晚上到昨天凌晨搞定了zblog首页缩略图的改版之后,

今天又花了一个下午加上一个晚上的时间,搞定了首页缩略图鼠标悬浮图片缩放的特效。

真的是很难!(对我这种不懂代码的人来说)

模仿的站点:https://www.tusay.net/

在这里,感谢涂涂!虽然没有直接的沟通,也没有直接的帮助我修改,

但能有他的站,给我做参考参照,就挺开心,让自己有了模仿的目标!

下面吧代码放出来,希望能对喜欢这个的朋友有帮助!

post-multi.php文件

 <div class="pic">
               {php}
               $temp=rand(1,8);
              $pattern="/<[img|IMG].*?src=[\'|\"](.*?(?:[\.gif|\.jpg|\.png]))[\'|\"].*?[\/]?>/";
              $content = $article->Content;
              preg_match_all($pattern,$content,$matchContent);
              if(isset($matchContent[1][0]))
              $temp=$matchContent[1][0];
              else
$temp="$host/zb_users/theme/$theme/style/images/suiji/
$temp.jpg";
              
              {/php}
              <a href="{$article.Url}" title="{$article.Title}"><img src="{$temp}" style="width:190px; 
              height:150px;" /></a>
          </div>
          <div class="zynr">
          {php}
          $description = preg_replace('/[\r\n\s]+/', '', trim(SubStrUTF8(TransferHTML($article->Content,'[nohtml]'),100)).'...');
          {/php}
          {$description}
          </div>

css文件

/*新加缩略图摘要部分*/
.post_body .zynr{width:440px; height:128px; Line-height:27px;padding:10px; margin-left:190px;word-break: break-all; word-wrap:break-word; }
.post_body .pic{
    max-width:190px;
    max-height:150px;
    overflow:hidden;
    float:left;
	margin:15px 0px 0px 0px;
	display:block;
    }
.post_body .pic img{
	-webkit-transition:-webkit-transform .3s linear;
	-moz-transition:-moz-transform .3s linear;
	-o-transition:-o-transform .3s linear;
	transition:transform .3s linear
}
.post_body:hover .pic img{
 	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
	transform:scale(1.1)
 }

PS:

我不懂代码,所有的修改,全部通过网络搜索,所以不接受任何批评!

但欢迎各路大神指点并感谢万分!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端特效开发 | 点击查看大图相册效果

    HTML5学堂(码匠):图片的展示是一个网站中最吸引人的区域,除了图片本身的内容精彩以外,常常还会有各种各样的展示形式。而对于前端开发来说,一个精美的图片展示效...

    HTML5学堂
  • python测试开发django -140.Bootstrap 缩略图

    网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 cl...

    上海-悠悠
  • web前端学习摘要。

    HTML是具有语义化的语言,针对网页的布局,有一类标签代表各种意义的“布局盒子”。所有的布局类标签都主要用来构建页面的内容区域,是双标签类型,是双标签类型,默认...

    7537367
  • Fdog系列(一):思来想去,不如写一个聊天软件,那就从仿QQ注册页面开始吧。

    两年的大学生活马上就要结束了,马上面临实习,突然心血来潮,想着最后再来写一个项目来总结这几年所学的东西,难的项目,咱也不会,索性就模仿qq来写一个fdog,嘿嘿...

    花狗Fdog
  • zblog博客主题模板的飘雪特效图文教程

    新的一年即将到来了,2019年的愿望都实现了吗?最近好有多朋友问我新春主题背景怎么设置,雪花特效是怎么来的,其实这个很简单,锦鲤和梦想家主题模板已经更新了,直接...

    李洋个人博客
  • Fdog系列(四):使用Qt框架模仿QQ实现登录界面,界面篇。

    Fdog系列(三):使用腾讯云短信接口发送短信,数据库写入,部署到服务器,web收尾篇。

    花狗Fdog
  • Custom Beautify

    引入魔改样式的方法很简单,自建一个css文件,然后引入即可。 以butterfly主题为例。可以在[Blogroot]\themes\butterfly\sou...

    Akilar
  • Bootstrap框架

    Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的...

    人生不如戏
  • CSS学习记录及整理

    <!DOCTYPE ”此文仅为个人学习的知识梳理,权威且更详细的内容请查阅w3school。“>

    SimonDM
  • Banber V2.9.3更新:弹窗、预警、全新组件不容错过

    Banber V2.9.3已更新上线,一起跟着小编,看看这次都更新了哪些强大的功能!

    Banber可视化云平台
  • Web前端学习笔记之BootStrap

    Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

    Jetpropelledsnake21
  • Qt音视频开发23-通用视频控件

    在之前做的视频监控系统中,根据不同的用户需要,做了好多种视频监控内核,有ffmpeg内核的,有vlc内核的,有mpv内核的,还有海康sdk内核的,为了做成通用的...

    feiyangqingyun
  • 使用 Bootstrap 创建缩略图的步骤

    <div class="row"> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail">...

    好派笔记
  • 程序猿必备的10款web前端动画插件三

    1.一些想法预览或只是在悬停的文件夹上播放 这个想法是在悬停文件夹图标时显示一些动画,并显示某种内容的预览。我们想与你分享一些有趣的小悬停效果。这个想法是显示文...

    企鹅号小编
  • 前端基础:Boostrap

    Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。

    RendaZhang
  • BootStrap应用开发学习入门

    什么是BootStrap? 答:Bootstrap是Twitter 的 Mark Otto 和 Jacob Thornton 开发的推出的一个用于前端开发的开源...

    WeiyiGeek
  • 2.blender的基本操作与动画案例挑战

    如果是之前使用过C4D或者maya的用户,使用Alt+左键进行视角旋转、视角平移shift+Alt+左键 的话,在【编辑】【偏好设置】【输入】【鼠标】勾选【模拟...

    玩蛇的胖纸
  • Qt编写安防视频监控系统37-onvif预置位

    预置位在视频监控系统中是不可或缺的存在,响应预置位功能的前提是要带预置位的云台球机,有些普通的云台球机其实不带预置位的,这个要检查清楚,硬件上不支持该功能的,你...

    feiyangqingyun
  • Qt编写安防视频监控系统39-onvif图片参数

    通过onvif来调整图片的Brightness(亮度)、ColorSaturation(色彩饱和度)、Contrast(饱和度)这三个参数,可以实时观测到监控画...

    feiyangqingyun

扫码关注云+社区

领取腾讯云代金券