鼠标悬停边框围绕效果动态边框的代码实现
程序员文章站
2022-03-13 12:13:05
鼠标悬停边框围绕效果动态边框的代码实现
鼠标悬停边框围绕效果动态边框的代码实现
<!doctype html> <html> <head> <meta charset="utf-8"> <title>鼠标悬停边框围绕效果</title> <script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <style> * { margin:0; padding:0; list-style:none; } img { border:0; width:300px; height:150px; } .box { width:300px; height:150px; margin:20px auto; position:relative; border:1px solid #eee; } .box .border-left { width:1px; height:0px; background:black; position:absolute; left:-1px; bottom:0; } .box .border-bottom { width:0px; height:1px; background:black; position:absolute; left:0; bottom:0px; } .box .border-top { width:0px; height:1px; background:black; position:absolute; right:0; top:0px; } .box .border-right { width:1px; height:0px; background:black; position:absolute; right:-1px; top:0; } </style> </head> <body> <p class="box"> <img src=https://www.2cto.com/uploadfile/2018/0409/20180409114633569.jpg"> <p class="border-left"></p> <p class="border-bottom"></p> <p class="border-top"></p> <p class="border-right"></p> </p> <p class="box"> <img src=https://www.2cto.com/uploadfile/2018/0409/20180409114633569.jpg"> <p class="border-left"></p> <p class="border-bottom"></p> <p class="border-top"></p> <p class="border-right"></p> </p> <script> $(function() { var lanren_width = $('.box').width(); var lanren_height = $('.box').height(); $('.box').each(function() { $(this).hover(function() { $(this).find('.border-left,.border-right').stop().animate({ height: lanren_height + 'px' }, 400); $(this).find('.border-top,.border-bottom').stop().animate({ width: lanren_width + 'px' }, 400); }, function() { $(this).find('.border-left,.border-right').stop().animate({ height: '0' }, 400); $(this).find('.border-top,.border-bottom').stop().animate({ width: '0' }, 400); }); }); }); </script> </body> </html>