<!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> <style type="text/css"> #esarti_ptss{ 400px; font-size: 15px; margin-bottom: 0px;height: 105px;line-height: 29px;position: relative;} .esarti_ptss_ab{ opacity: 0; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); width: 315px; height: auto; position: absolute; top:62px; left: 220px; border: 1px solid #333; padding: 12px; text-align: left; line-height: 175%; text-indent: 2em; background-color:beige; border-radius: 25px; border-top-left-radius: 0px; transition:1s 0.5s; -webkit-transition:1s 0.5s; -moz-transition:1s 0.5s; -o-transition:1s 0.5s; } #esarti_ptss:hover .esarti_ptss_ab{ opacity: 1; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); } </style> </head> <body> <!--{$post_keywords[18]}--> <div id="esarti_ptss">配套设施：带我去的权威期待前往地球问滴轻微的轻微的轻微的权威的权威的轻微的前往地球问滴权威的围棋段轻微的去带我去的权威期待前往地球问滴轻微的asdasdqwdqwdqwdqwdwqdwqdqwdqw配套设施 <div class="esarti_ptss_ab">配套设施：带我去的权威期待前往地球问滴轻微的轻微的轻微的权威的权威的轻微的前往地球问滴权威的围棋段轻微的去带我去的权威期待前往地球问滴轻微的asdasdqwdqwdqwdqwdwqdwqdqwdqw配套设施</div> </div> </body> </html>
锚点平滑滚动(转)
<!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>js平滑滚动到顶部、底部、指定地方</title> <script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script> <style> .box{ height:200px; 100%; background:#ccc; margin:10px 0;} .location{ position:fixed; right:0; bottom:10px; 20px; background:#FFC; padding:5px; cursor:pointer;color:#003}; </style> </head> <body> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box a">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box bottom"></div> <div class="location"> <p class="scroll_top">返回顶部</p> <p class="scroll_a">产品介绍</p> <p class="scroll_bottom">滑到底部</p> </div> <script type="text/javascript"> jQuery(document).ready(function($){ $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);}); $('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);}); }); </script> </body> </html>
————————