QQ空间顶部折页撕开效果示例代码
更新时间：2014年06月15日 15:54:50 投稿：whsnow
QQ空间顶部折页撕开效果想必大家都有看到过吧，那么它是怎么实现的呢？下面与大家分享下
效果：
HTML：
<div id="pageflip">
<a target="_blank" href="http://www.sparkdesign.cn/"><img width="307" height="319" src="js/page_flip.png" style="overflow: hidden; width: 50px; display: block; height: 52px;"></a>
<div class="msg_block" style="overflow: hidden; width: 50px; display: block; height: 50px;"></div>
</div>
JS：
$(document).ready(function(){
$("#pageflip").hover(function(){
$("#pageflip img , .msg_block").stop().animate({width: '307px', height: '319px'}, 500);
},function(){
$("#pageflip img").stop().animate({width: '50px', height: '52px'}, 220);
$(".msg_block").stop().animate({width: '50px', height: '50px'}, 200);
});
});
HTML：
复制代码 代码如下:
<div id="pageflip">
<a target="_blank" href="http://www.sparkdesign.cn/"><img width="307" height="319" src="js/page_flip.png" style="overflow: hidden; width: 50px; display: block; height: 52px;"></a>
<div class="msg_block" style="overflow: hidden; width: 50px; display: block; height: 50px;"></div>
</div>
JS：
复制代码 代码如下:
$(document).ready(function(){
$("#pageflip").hover(function(){
$("#pageflip img , .msg_block").stop().animate({width: '307px', height: '319px'}, 500);
},function(){
$("#pageflip img").stop().animate({width: '50px', height: '52px'}, 220);
$(".msg_block").stop().animate({width: '50px', height: '50px'}, 200);
});
});
相关文章
这篇文章主要介绍了jQuery实现动态添加节点与遍历节点功能,结合实例形式分析了jQuery针对页面元素节点元素的动态添加与遍历相关操作技巧,需要的朋友可以参考下2017-11-11
Datatables 是一款强大的Jquery表格处理插件，样式方面可以兼容bootstrap3/4、JqueryUi等，也有默认的样式可以选择。使用Datatables可以很灵活的从服务端通过ajax更新表格数据，实现排序、分页等功能2020-01-01
本篇文章主要是对jquery中load方法的用法及注意事项进行了详细介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
下面小编就为大家带来一篇对象不支持indexOf属性或方法的解决方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码,基于jQuery鼠标事件动态操作页面元素样式的动态变换实现该功能,需要的朋友可以参考下2015-10-10
这篇文章主要介绍了Jquery使我们简化了禁止冒泡事件的操作，只需几行代码,需要的朋友可以参考下2015-02-02
这篇文章主要为大家详细介绍了高效Web开发的10个jQuery代码片段，具有一定的实用性和参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
本文讲述的是jquery选择器结果是数组时需要主要的一个问题，并详细分析了产生此问题的原因，这里记录下来，小伙伴们在项目中使用的时候要注意一下。2014-11-11
filter() 方法返回符合一定条件的元素。该方法让您规定一个条件。不符合条件的元素将从选择中移除，符合条件的元素将被返回。这篇文章主要介绍了 jquery的 filter()方法使用,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了jQuery设置图片等比例缩小的方法,涉及jQuery针对页面元素属性动态判定与设置相关操作技巧,需要的朋友可以参考下2017-04-04
最新评论