JQUERY一键置顶小插件

一键置顶的小插件代码
具体效果如下了
把图片地址换一下就可以用了~~
这里写图片描述

<!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>jquery带二维码返回顶部代码 - 站长素材</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<style>
	/*reset css*/
*{margin:0;padding:0;list-style:none;border:none;}
body{height:2000px;background:#555;font-family:'microsoft yahei';}
/*main css*/
.izl-rmenu{position:fixed; left:50%; margin-left:532px; bottom:10px; padding-bottom:73px; background:url(images/r_b.png) 0px bottom no-repeat; z-index:999; }
.izl-rmenu .btn{width:72px; height:73px; margin-bottom:1px; cursor:pointer; position:relative;}
.izl-rmenu .btn-qq{background:url(images/r_qq.png) 0px 0px no-repeat; background-color:#6da9de;}
.izl-rmenu .btn-qq:hover{background-color:#488bc7;}
.izl-rmenu a.btn-qq,.izl-rmenu a.btn-qq:visited{background:url(images/r_qq.png) 0px 0px no-repeat; background-color:#6da9de; text-decoration:none; display:block;}
.izl-rmenu .btn-wx{background:url(images/r_wx.png) 0px 0px no-repeat; background-color:#78c340;}
.izl-rmenu .btn-wx:hover{background-color:#58a81c;}
.izl-rmenu .btn-wx .pic{position:absolute; left:-160px; top:0px; display:none;width:160px;height:160px;}
.izl-rmenu .btn-phone{background:url(images/r_phone.png) 0px 0px no-repeat; background-color:#fbb01f;}
.izl-rmenu .btn-phone:hover{background-color:#ff811b;}
.izl-rmenu .btn-phone .phone{background-color:#ff811b; position:absolute; width:160px; left:-160px; top:0px; line-height:73px; color:#FFF; font-size:18px; text-align:center; display:none;}
.izl-rmenu .btn-top{background:url(images/r_top.png) 0px 0px no-repeat; background-color:#666666; display:none;}
.izl-rmenu .btn-top:hover{background-color:#444;}
</style>
<script>
$(function(){

	var tophtml="<div id=\"izl_rmenu\" class=\"izl-rmenu\"><a href=\"tencent://Message/?Uin=123456789&websiteName=sc.chinaz.com=&Menu=yes\" class=\"btn btn-qq\"></a><div class=\"btn btn-wx\"><img class=\"pic\" src=\"images/weixin.jpg\" onclick=\"window.location.href=\'http://%77%77%77%2e%73%75%63%61%69%6a%69%61%79%75%61%6e%2e%63%6f%6d\'\"/></div><div class=\"btn btn-phone\"><div class=\"phone\">sc.chinaz.com</div></div><div class=\"btn btn-top\"></div></div>";
	$("#top").html(tophtml);
	$("#izl_rmenu").each(function(){
		$(this).find(".btn-wx").mouseenter(function(){
			$(this).find(".pic").fadeIn("fast");
		});
		$(this).find(".btn-wx").mouseleave(function(){
			$(this).find(".pic").fadeOut("fast");
		});
		$(this).find(".btn-phone").mouseenter(function(){
			$(this).find(".phone").fadeIn("fast");
		});
		$(this).find(".btn-phone").mouseleave(function(){
			$(this).find(".phone").fadeOut("fast");
		});
		$(this).find(".btn-top").click(function(){
			$("html, body").animate({
				"scroll-top":0
			},"fast");
		});
	});
	var lastRmenuStatus=false;
	$(window).scroll(function(){//bug
		var _top=$(window).scrollTop();
		if(_top>200){
			$("#izl_rmenu").prop("active",true);
		}else{
			$("#izl_rmenu").prop("active",false);
		}
		if($("#izl_rmenu").prop("active")!=lastRmenuStatus){
			lastRmenuStatus=$("#izl_rmenu").prop("active");
			if(lastRmenuStatus){
				$("#izl_rmenu .btn-top").slideDown();
			}else{
				$("#izl_rmenu .btn-top").slideUp();
			}
		}
	});
});
</script>
</head>
<body>
<center style="padding-top:100px;">
<h1 style="text-align:center;color:#eee;">滑动滚动条试试看?</h1>
<h5 style="text-align:center;color:#eee;">站长素材 - sc.chinaz.com</h5>
</center>
<div id="top"></div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源:<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值