この記事の例では、jQuery がトップに戻る効果を実装する方法について説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。
1. まずは CSS スタイルです:
/*updown*/ #shangxia{position:fixed;top:83%;right:42%;margin-right:-543px;display:block;_display:none} #shang,#comt,#xia{background:url(../images/sprite.png) no-repeat;position:relative;cursor:pointer;height:25px;width:29px;margin:10px 0 0} #shang{background-position:0 -308px}#comt{background-position:0 -338px;height:32px} #xia{background-position:0 -376px} #comt:hover{background-position:-31px -338px}#shang:hover{background-position:-31px -308px} #xia:hover{background-position:-31px -376px}
2. 次は jQuery コードです: (jQuery コア ライブラリを導入するため)
3. 参考ページ:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <style type="text/css"> /*updown*/ #shangxia{position:fixed;top:60%;right:50%;margin-right:-543px;display:block;_display:none} #shang,#comt,#xia{background:url(images/sprite.png) no-repeat;position:relative;cursor:pointer;height:25px;width:29px;margin:10px 0 0} #shang{background-position:0 -308px}#comt{background-position:0 -338px;height:32px}#xia{background-position:0 -376px} #comt:hover{background-position:-31px -338px}#shang:hover{background-position:-31px -308px}#xia:hover{background-position:-31px -376px} /*存档*/ </style> ///上面的是内部样式,上面已经有外部样式,如果不使用内部样式可以引入外部样式 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="js/updown/devework.js"></script> </head> <body> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <p>333</p> <div id="shangxia"> <div id="shang" title="↑ 返回顶部"></div> <div id="comt" title="沙发还没有被抢哦"></div> <div id="xia" title="↓ 移至底部"></div> </div> </body> </html>
この記事が皆さんの jQuery プログラミングに役立つことを願っています。