jQuery实现边框动态效果的实例代码

话不多说、静态效果图如下

实代码如下

！DOCTYPE html html head meta charset=' UTF-8 '标题/标题样式myDiv { width: 300px高度： 200像素；border: 1px固体rgba(0，0，0，0.2)；余量： 50px相对位置：} .topLine { width : 0px x8 : 1px背景：黑色；位置：绝对；左： 0；top :-1px；} .底线{ width : 0px x8 : 1 px背景：黑色；位置：绝对；左： 0；底部：-1px；} .leftLine { width: 1px高度： 0px背景：黑色；位置：绝对；左：-1；底部：-1px；} .右线{宽度： 1px高度： 0px背景：黑色；位置：绝对；右：-1px；top :-1px；}/style/head body div class=' myDiv ' div class=' ToLine '/div class=' right line '/div class=' bottom line '/div class=' left line '/div class=' myDiv ' div class=' ToLine '/div class=' right line '/div class=' bottom line '/div class=' left line '/div/div脚本类型=' text/JAVAScript ' src=' 3358 libs。百度。com/jquery/my DiV ').mouseover(函数(){ $(this)).查找('。topLine，2000 .底线')。停止()。动画({ ' width ' : ' 300 px ' })；$(这个)。查找('。右线，左线')。停止()。动画({ ' height ' : ' 200px ' })；}) $('.my DiV ').mouseout(函数(){ $(此)).查找('。topLine，2000 .底线')。停止()。动画({ ' width ' : ' 0px ' })；$(这个)。查找('。右线，左线')。停止()。动画({ ' height ' : ' 0px ' })；})})/脚本/正文/html总结

以上就是这篇文章的全部内容了，刚兴趣的朋友们可以自己动手操作下看看动态效果，真的非常不错，希望对大家的学习或者工作能有一定的帮助。如果有疑问大家可以留言交流，小编会尽快给大家回复。