<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左右箭头</title> <style type="text/css"> .wrap{width: 1000px;height: 1500px;margin: 0 auto;background: #ddd;} .post-prev, .post-next{height:70px;width:60px;font:bold 70px/70px SimSun;position:fixed;top:70%;overflow:hidden;margin-top:-35px;} .post-prev a, .post-next a{text-decoration:none;} </style> </head> <body> <!-- 左右箭头开始 --> <div class="wrap"> <div class="post-prev"><a href="http://cz.xcabc.com/"><</a></div> <div class="post-next"><a href="http://cz.xcabc.com/">></a></div> </div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> <script type="text/javascript"> function win() { var w = $(window).width(); var d = 1000; var t = 30; //30为容器宽度1/2 $('.post-prev').css({'left':(w-d)/4-t}); $('.post-next').css({'right':(w-d)/4-t*2}); } window.onresize = function() { win(); } win(); </script> <!-- 左右箭头结束 --> </body> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 左右箭头 喜欢 (0)or分享 (0)
