谁能知道这个页面的图片撕裂效果是怎样实现的?

请教一下大家,这个网站的鼠标放上去图片消失显示文字的内容是如何实现的?http://www.hello-code.com/blog/Programming

2个回答

效果真心不错!我也是学网页的,可以多多交流!

jquery.Photofy插件


<link href="http://www.hello-code.com/CSS/Photofy.css" rel="Stylesheet" type="text/css" />
<div class="qitem">
    <a href='http://www.hello-code.com/blog/Bootstrap'>
        <img src='http://www.hello-code.com/Images/CagetoryIcon/62.jpg' alt="" title="" width="106" height="106" />
    </a>
    <span class="caption">
        <h4>
            Bootstrap
        </h4>
        <p>
            Bootstrap是基于HTML5和CSS3开发的,它在jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件
        </p>
    </span>
</div>
<div class="qitem">
    <a href='http://www.hello-code.com/blog/Memcached'>
        <img src='http://www.hello-code.com/Images/CagetoryIcon/63.jpg' alt="" title="" width="106" height="106" />
    </a>
    <span class="caption">
        <h4>
            Memcached
        </h4>
        <p>
            Memcached是免费的,开源的,高性能的,分布式内存对象的缓存系统
        </p>
    </span>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.hello-code.com/JS/Photofy.js"></script>
<script type="text/javascript" src="http://www.hello-code.com/JS/jquery.easing.1.3.js"></script>
shuijun1
落寞红尘 3Q
4 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问