注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery仿QQ空间右上角撕页广告应用

jQuery插件 fishcity 916浏览

相信朋友们都看到过QQ空间右上角的撕页广告,是不是觉得这效果很棒,想用到自己的网站中呢,嗯,机会了,现在jQ酷在网络上找到了用jquery实现此效果的代友,在此和大家一起分享下这应用,其实这效果用jquery实现起来非常的简单,几行代码就可搞定,下面来看下使用方法吧。

首先老规矩,引入jquery

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

接下来构建html代码

<div id="pageflip">
	<a href="http://www.jqcool.net" target="_blank"><img width="307" height="319" alt="www.jqcool.net" src="images/page_flip.png"></a>
	<div class="msg_block"></div>
</div>

再来就是写入CSS样式,这里有个小地方得说下,就是CSS中引入了iepngfix.htc,这是为了兼容IE下的不透明现象,其实在现在的浏览器完全可以忽略它。

img{behavior:url(images/iepngfix.htc)}

/* pageflip */
#pageflip{right:0px;float:right;position:relative;top:0px}
#pageflip img{z-index:99;right:0px;width:50px;position:absolute;top:0px;height:52px;ms-interpolation-mode:bicubic}
#pageflip .msg_block{right:0px;background:url(images/subscribe.png) no-repeat right top;overflow:hidden;width:50px;position:absolute;top:0px;height:50px}

最后写入JS,实现效果

$(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);
	});

});

转载请注明:jQ酷 » jquery仿QQ空间右上角撕页广告应用

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。