wordpress侧边jQuery返回顶部代码

引入文件

官方金沙娱乐赌场网站_赌博娱乐注册送18现金,3.艾德?史塔克,凭借着在男子100米仰泳决赛的出色表现,中国仰泳选手徐嘉余在周二为他的祖国改写了历史。,澳门赌场投注平台

要实现返回顶部的特效,我们要引入zzsc.css,popwin.js,jQuery.js.点击下面的链接下载所以文件。

百度网盘下载
1、css引入方法
把以下css代码直接复制到你的主题的style.css文件的最后,这样你就不需要单独再引入zzsc.css文件了。

  1. /*
  2. *goto top css begin
  3. */
  4. ul,ol {
  5. 	list-style:none
  6. }
  7. a {
  8. 	text-decoration:none
  9. }
  10. a:hover {
  11. 	text-decoration:underline
  12. }
  13.  
  14. #moquu_top,#moquu_wxin,#moquu_wshare,#moquu_wmaps {
  15. 	z-index:999;
  16. 	width:50px;
  17. 	height:50px;
  18. 	right:10px;
  19. 	position:fixed;
  20. 	cursor:pointer;
  21. 	_position:absolute;
  22. 	_bottom:auto;
  23. 	_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))
  24. }
  25.  
  26. #moquu_wxin {
  27. 	top:660px;
  28. 	_margin-top:660px
  29. }
  30. #moquu_wxin a {
  31. 	background:url(../images/sbtn.png) 0 -0px;
  32. 	right:0;
  33. 	float:left;
  34. 	width:50px;
  35. 	height:50px;
  36. 	text-indent:-9999px
  37. }
  38. #moquu_wxin a:hover {
  39. 	background:url(../images/sbtn.png) -50px -0px
  40. }
  41. #moquu_wshare {
  42. 	top:712px;
  43. 	_margin-top:712px
  44. }
  45. #moquu_wshare a {
  46. 	background:url(../images/sbtn.png) 0 -50px;
  47. 	width:50px;
  48. 	height:50px;
  49. 	right:0;
  50. 	float:left;
  51. 	text-indent:-9999px
  52. }
  53. #moquu_wshare a:hover {
  54. 	background:url(../images/sbtn.png) -50px -50px
  55. }
  56. #moquu_wmaps {
  57. 	top:764px;
  58. 	_margin-top:764px
  59. }
  60. #moquu_wmaps a {
  61. 	background:url(../images/sbtn.png) 0 -150px;
  62. 	width:50px;
  63. 	height:50px;
  64. 	right:0;
  65. 	float:left;
  66. 	text-indent:-9999px
  67. }
  68. #moquu_wmaps a:hover {
  69. 	background:url(../images/sbtn.png) -50px -150px
  70. }
  71. #moquu_top {
  72. 	top:816px;
  73. 	_margin-top:816px;
  74. 	background:url(../images/sbtn.png) 0 -101px;
  75. 	width:50px;
  76. 	height:50px
  77. }
  78. #moquu_top:hover {
  79. 	background:url(../images/sbtn.png) -50px -101px
  80. }
  81. .moquu_wxin,.moquu_wshare {
  82. 	position:relative;
  83. 	z-index:2
  84. }
  85. .moquu_wxin a:hover .moquu_wxinh,.moquu_wshare a:hover .moquu_wshareh {
  86. 	display:block
  87. }
  88. .moquu_wxin .moquu_wxinh {
  89. 	position:absolute;
  90. 	display:none;
  91. 	left:-280px;
  92. 	top:-200px;
  93. 	width:275px;
  94. 	height:355px;
  95. 	background:url(../images/moquu_ico.png) -1px -482px no-repeat
  96. }
  97. .moquu_wshare .moquu_wshareh {
  98. 	position:absolute;
  99. 	display:none;
  100. 	left:-280px;
  101. 	top:-200px;
  102. 	width:275px;
  103. 	height:360px;
  104. 	background:url(../images/moquu_wshare.png) no-repeat
  105. }

2、popwin.js核心文件的引入
打开你主题文件footer.php找到最下面,在此上面复制如下代码:

  1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/popwin.js"></script>
  2. <script>
  3. $(document).ready(function() {
  4. 	$("a.moquu_wmaps").on('click',
  5. 	function() {
  6. 		popWin.showWin("800", "475", "511遇见", "http://www.513jianzhu.com");
  7. 	});
  8. });
  9. </script>

3、jQuery.js引入
特效引入的jQuery版本是1.83,而我们的wordpress引用的jQuery文件版本是jQuery v1.11.3 所以需要再次引入新的jQuery,否则没有特效,但这样会造成jQuery文件冲突,你可以尝试一下,下面给出一个解决方案,未必是最好的。
找到你主题的header.php文件,在前复制以下代码:

  1. <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
  2. <script type="text/javascript">
  3. 	$(window).load(function() {
  4. 		$('#featured').orbit();
  5. 	});
  6. </script>

布局结构

在你的主题文件footer.php底部加入以下代码:

  1. <div id="moquu_wxin" class="moquu_wxin"><a href="javascript:void(0)">511遇见<div class="moquu_wxinh"></div></a></div>
  2. <div id="moquu_wshare" class="moquu_wshare"><a href="javascript:void(0)">511遇见<div class="moquu_wshareh"></div></a></div>
  3. <div id="moquu_wmaps"><a href="javascript:void(0)" class='moquu_wmaps'>511遇见</a></div>
  4. <a id="moquu_top" href="javascript:void(0)"></a>
  5. <!--goto top end -->

静态图片文件的修改与位置

进入images文件夹把里面的微信换成你的图片,记得miages文件夹的位置是和你放js文件夹的位置一起的,必须注意路径问题。以上文件来自互联网,作者只是整理了一下用法而已。


发布日期:

所属分类: JavaScript/jquery, Wordpress 综合 标签: