jQuery实现边框动态效果的实例代码
网络编程 2021-07-04 20:00www.168986.cn编程入门
这篇文章给大家分享了一个jQuery边框动态的效果,当鼠标移动到边框区域的时候,边框会有个动态的加载动画效果,实现的效果真的非常不错,狼蚁网站SEO优化来一起看看吧。
话不多说、静态效果图如下
实代码如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .myDiv{ width: 300px; height: 200px; border: 1px solid rgba(0,0,0,0.2); margin: 50px ; position: relative; } .Line{ width: 0px; height: 1px; background: black; position:absolute; left: 0; : -1px; } .bottomLine{ width: 0px; height: 1px; background: black; position:absolute; left: 0; bottom: -1px; } .leftLine{ width: 1px; height: 0px; background: black; position:absolute; left: -1; bottom: -1px; } .rightLine{ width: 1px; height: 0px; background: black; position:absolute; right: -1px; : -1px; } </style> </head> <body> <div class="myDiv"> <div class="Line"></div> <div class="rightLine"></div> <div class="bottomLine"></div> <div class="leftLine"></div> </div> <div class="myDiv"> <div class="Line"></div> <div class="rightLine"></div> <div class="bottomLine"></div> <div class="leftLine"></div> </div> <script type="text/javascript" src='http://libs.baidu./jquery/2.0.0/jquery.js'></script> <script> $(function(){ $(".myDiv").mouseover(function(){ $(this).find(".Line,.bottomLine").s().animate({"width":"300px"}); $(this).find(".rightLine,.leftLine").s().animate({"height":"200px"}); }) $(".myDiv").mouseout(function(){ $(this).find(".Line,.bottomLine").s().animate({"width":"0px"}); $(this).find(".rightLine,.leftLine").s().animate({"height":"0px"}); }) }) </script> </body> </html>
总结
以上就是这篇文章的全部内容了,刚兴趣的朋友们可以自己动手操作下看看动态效果,真的非常不错,希望对大家的学习或者工作能有一定的帮助。如果有疑问大家可以留言交流,长沙网络推广会尽快给大家回复。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程