继前天晚上到昨天凌晨搞定了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:
我不懂代码,所有的修改,全部通过网络搜索,所以不接受任何批评!
但欢迎各路大神指点并感谢万分!