JQUERY一键置顶小插件

最新推荐文章于 2023-08-28 14:23:08 发布

alokka

最新推荐文章于 2023-08-28 14:23:08 发布

阅读量2.9k

点赞数 1

分类专栏： JQUERY 文章标签： jquery

本文链接：https://blog.csdn.net/alokka/article/details/73609054

版权

JQUERY 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

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

<!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>

alokka

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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
复制链接

扫一扫

专栏目录