Peribadikan kembali ke bawah dan kembali ke atas kod kesan khas yang dilaksanakan oleh jQuery

Peribadikan kembali ke bawah dan kembali ke atas kod kesan khas yang dilaksanakan oleh jQuery_jquery

WBOY

Lepaskan： 2016-05-16 15:34:24

asal

1155 orang telah melayarinya

Contoh dalam artikel ini menerangkan kod kesan khas yang diperibadikan ke bawah dan kembali ke atas yang dilaksanakan oleh jQuery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Saya menggunakan ciri jQuery yang saya pelajari untuk mencipta kesan ini Kesan ini menggabungkan tiga fungsi: kembali ke bawah, kembali ke atas dan navigasi mesej tapak web Anda boleh menukar pautan mesej tapak web ke mana-mana pautan yang anda inginkan untuk mengemudi. Ini boleh digunakan secara fleksibel. Sorotan kesan ini ialah keserasian dan kesan animasi, serta anak panah yang direka dengan cantik.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-back-top-buttom-style-codes/

Kod khusus adalah seperti berikut:

<!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>特效加工厂</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style type="text/css">
body
{
margin:0; padding:0; font-size:12px;
}
#main
{
width:910px; margin:0 auto; height:2000px;
}
.go{width:47px;height:106px;position:fixed;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||200)-(parseInt(this.currentStyle.marginBottom,10)||0)));right:12px;bottom:25%; background-image:url("images/tobg.png"); background-repeat:no-repeat;}
.go a{background:url(images/a.png) no-repeat;display:block;text-indent:999em;width:37px;margin:5px;border:0;overflow:hidden;float:left; cursor:pointer;}
.go .top{background-position:0 0px;height:22px}
.go .feedback{background-position:0 -22px;height:32px}
.go .bottom{background-position:0 -55px;height:22px}
.go .top:hover{background-position:-38px -0px}
.go .feedback:hover{background-position:-38px -22px}
.go .bottom:hover{background-position:-38px -55px}
</style>
<script type="text/javascript">
 $(function () {
  $(".top").click(//定义返回顶部点击向上滚动的动画
  function () {
   $('html,body').animate({ scrollTop: 0 }, 700);
  });
  $(".bottom").click(//定义返回顶部点击向上滚动的动画
  function () {
   $('html,body').animate({ scrollTop: document.body.clientHeight }, 700);
  });
 })
</script>
</head>
<body>
<div id="main">
<div class="go">
  <a title="返回顶部" class="top"></a>
  <a title="如果您有意见，请反馈给我们！" class="feedback" href="#" target="_blank"></a>
  <a title="返回底部" class="bottom" ></a>
</div>
</div>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.