jQuery实现QQ漂浮窗口动画效果

——————————-找了个Ipad——————————

挤了几个月的地铁,把老外的jquery视频教程看完鸟。

这玩意对我来说说很棘手,数理外得不拍才行,若是生物我还行,拿个刀直接网青蛙白肚皮戳一刀,立马结束。

和html css 一样,只是语法和函数较多。

html css 好比轻型坦克,能上下左右移动炮塔。

当有了 jquery 后 就基本是战斗机了。各种动作之后再发射导弹;先找好目标、再确定下自己的起飞点、还得确定回落点,备用油能坚持几个小时,再隐形下,再分析下四周,再发射。结束。

jQuery实现QQ漂浮窗口动画效果

——————————-html——————————

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>在线QQ-jquery版本</title>
<link href=”css.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<div class=”warp”>
<div class=”fq-big”>
<div class=”fq-close”><span title=”关闭”>关闭</span></div>
<ul class=”fq-content”>
<li>客服一:<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=123654809&site=qq&menu=yes”><img border=”0″ src=”http://wpa.qq.com/pa?p=2:123654809:41″ alt=”点击这里给我发消息” title=”点击这里给我发消息”></a></li>
<li>客服二:<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=123654809&site=qq&menu=yes”><img border=”0″ src=”http://wpa.qq.com/pa?p=2:123654809:41″ alt=”点击这里给我发消息” title=”点击这里给我发消息”></a></li>
</ul>
<div class=”fq-footer”></div>
</div>
</div>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.8.2.min.js”></script>
<script type=”text/javascript” src=”js.js”></script>
</body>
</html>

——————————-js——————————

// 飘窗

(function($){

var fq = $(“.fq-big”);

//飘窗

fq.css(‘display’,’block’);//当js生效时显示飘窗,默认css 给display:none;

$(window).scroll(function(){//滚动窗口触发

fq.stop()//去掉.fq-big 窗口的所有动画

.animate({

“top”: $(window).scrollTop() + 20

},600);// 动画效果改变 top 值

});

//关闭飘窗

$(‘.fq-close span’).click(function () {

fq.remove();//移除父级中的 .fq-big

});

})(jQuery);

——————————-css——————————

@charset “utf-8”;
/* zlart */
html { color:#000; background:#fff; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; overflow-x:hidden; }
* { margin:0; padding:0; }
ol, ul { list-style:none; }
.warp { height:1200px; background-color:#EFEFEF; width:920px; margin:10px auto; border:#CCC 1px solid; }
/*fq-warp*/
.fq-big { width:146px; }
.fq-big,.fq-small {position: absolute; right:10px; top:20px; display:none;}
.fq-close { width:146px; height:40px; background:url(lineqq.gif) no-repeat; position:relative; }
.fq-close span { display:block; width:25px; height:25px; text-indent:-9999px; position:absolute; right:0px; top:0px; cursor:pointer;}
.fq-footer { width:146px; height:10px; background:url(lineqq.gif) no-repeat bottom left; position:relative; }
.fq-content { background: url(lineqq.gif) repeat-y 0px -50px; padding:10px; }
.fq-content li { font-size:12px; line-height:22px; padding-bottom:5px; }
.fq-content li img { vertical-align: bottom;}

———————-演示—————————

jQuery实现QQ漂浮窗口动画效果

发表评论