一江山水的随笔-Enjoy life!

当前位置:首页 - 技术 - 正文

继前天晚上到昨天凌晨搞定了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:

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

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

想找什么搜索会更快哦!
站点信息
  • 文章总数:107
  • 页面总数:1
  • 分类总数:4
  • 标签总数:73
  • 评论总数:61
  • 浏览总数:4560453
控制面板
您好,欢迎到访网站!
  查看权限
Top