JQUERY一键置顶小插件

来源：互联网发布：免费刷q币软件编辑：程序博客网时间：2024/06/11 13:38
一键置顶的小插件代码
具体效果如下了
把图片地址换一下就可以用了~~
这里写图片描述
<!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