jQuery实现鼠标悬停边框变换动画特效源码.zip资源-CSDN文库

共5个文件

jpg：2个

js：1个

png：1个

版权申诉

118 浏览量 2022-11-07 23:59:43 上传评论收藏 50KB ZIP 举报

在IT行业中，jQuery是一个非常流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。本资源"jQuery实现鼠标悬停边框变换动画特效源码.zip"显然提供了一个使用jQuery创建的特效代码示例，特别关注的是当鼠标悬停在元素上时，边框的动态变换效果。我们来详细了解一下jQuery中的动画功能。jQuery的`.animate()`方法是其动画功能的核心，它可以用于创建自定义的动画效果，包括改变CSS属性如宽度、高度、透明度，甚至是位置。在这个例子中，可能就是通过`.animate()`来改变元素的边框宽度、颜色或样式，从而实现边框的动态变化。下面是一段基本的jQuery代码片段，演示了如何实现鼠标悬停时边框动画： ```javascript $(document).ready(function() { $('#element').hover(function() { // 鼠标悬停时的动画效果 $(this).animate({ borderWidth: '5px', borderColor: 'red', borderRadius: '10px' // 如果有圆角边框需求 }, 500); // 500毫秒的动画时长 }, function() { // 鼠标离开时的恢复效果 $(this).animate({ borderWidth: '1px', // 原始边框宽度 borderColor: 'black', // 原始边框颜色 borderRadius: '0px' // 恢复原来的边框圆角 }, 500); }); }); ``` 在这段代码中，`#element`是需要应用动画效果的元素选择器，`.hover()`是一个组合事件处理函数，它接受两个参数，分别对应鼠标进入（悬停）和离开元素时执行的函数。`.animate()`方法内的对象包含了要改变的CSS属性及其目标值，而第二个参数则是动画的时长，单位通常是毫秒。在实际应用中，`132689924346501537`这个文件名可能是不完整的，通常会包含更多的描述性信息，比如HTML文件、CSS文件或者JavaScript文件的名称。解压后，你需要查看这些文件来了解具体实现。HTML文件将包含目标元素的标记结构，CSS文件可能设定了初始样式，而JavaScript文件则会包含上述或类似的功能代码。为了实现更复杂的动画效果，开发者可能会利用CSS3的transition属性，这样当属性值改变时，浏览器会自动平滑地过渡到新值，而无需编写额外的JavaScript代码。然而，由于`.animate()`的灵活性和对旧版浏览器的良好支持，jQuery动画仍然是许多开发者的首选。这份源码示例是学习和理解jQuery动画机制的好材料，特别是如何在用户交互（如鼠标悬停）时优雅地改变元素的外观。通过研究和实践，你可以进一步提升你的前端开发技能，创造出更多吸引人的交互效果。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery实现鼠标悬停边框变换动画特效源码.zip （5个子文件）

132689924346501537

images

2-328x300.jpg 12KB

buynow.jpg 5KB

search_y.png 2KB

index.html 5KB

jquery.min.js 83KB

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jQuery鼠标悬停边框变换动画特效</title> <script type="text/javascript" src="js/jquery.min.js"></script> <style> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} a{color:#000;text-decoration: none;font-weight: 600} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} .cn_gobuy { float: left; width: 360px; text-align: center; line-height: 2; margin-top: 20px; margin-left: 20px; border:1px solid #E6E2E2; border-radius: 2%; position: relative; height: 300px; overflow: hidden; } .biankuang{ width: 3px; height: 3px; position: absolute; z-index: 99; border-radius:10px; /*background: black;*/ } .biankuang_1{ height: 3px; top: -6px; left:0px; border-left: 3px solid #EB5858; } .biankuang_2 { width: 0px; bottom:-3px; left: 0px; border-top: 3px solid #EB5858; } .biankuang_3{ height: 0px; bottom:0px; right:0px; border-right: 3px solid #EB5858; } .biankuang_4{ width:0px; top:-3px; right:0px; border-bottom: 3px solid #EB5858; }/* /!*边框动画*!/ @keyframes changes1 { 0%{height: 0px; border-left:3px solid transparent;} 100%{height:305px; border-left: 3px solid red;} /!*100%{height:300px;width: 300px}*!/ } @keyframes changes2 { 0%{width: 0px;border-bottom: 3px solid transparent;} 100%{width:300px;border-bottom: 3px solid red;} /!*100%{height:300px;width: 300px}*!/ }*/ .tp_gobuy { position: absolute; z-index:2; left: 0; top: 0px; } .text_gobuy { position: absolute; z-index:9; bottom: -50px; width: 360px; height: 50px; overflow: hidden; background:rgba(207, 208, 211, 0); cursor: pointer; transition:all 300ms; -webkit-transition:all 300ms; -moz-transition:all 300ms; -o-transition:all 300ms; } .text_gobuy_show{ height: 50px; position: absolute; z-index:9; bottom:0px; width: 360px; overflow: hidden; padding: 10px 15px ; cursor: pointer; background-color: rgba(207, 208, 211,0.3); } .cn_gobuy b{position: absolute;bottom:10px;left:20px;line-height: 33px;color: #EB5858} .cn_gobuy .a_add_divboc{position: absolute;bottom: 0;left:200px} .top_text{position: absolute;top:0;z-index: 999;text-align: center;width: 100%;left: 0} .search_y{position: absolute;left: 100px;top:100px;z-index: 999;opacity: 0} </style> </head> <body> <div class="cn_gobuy"> <div class="search_y"><a href="#"><img src="images/search_y.png" alt=""/></a></div> <div class="biankuang biankuang_1"></div> <div class="biankuang biankuang_2"></div> <div class="biankuang biankuang_3"></div> <div class="biankuang biankuang_4"></div> <a class="tp_gobuy" href="#"><img src="images/2-328x300.jpg" alt="Voyager 3" title="Voyager 3"></a> <a class="top_text" href="#">脚本之家</a> <div class="text_gobuy"> <br/> <b>￥13,599.00</b> <br/> <div class="a_add_divboc"> <div id="boynow"> <a href="#"> <img src="images/buynow.jpg" width="117" height="33"> </a> </div> </div> </div> </div> <script> $(function(){ // 边框效果--移入 function biankuang(){ $('.biankuang_1').stop(true).animate({ height:'305px' },300) $('.biankuang_2').stop(true).delay(300).animate({ width:'360px' },300) $('.biankuang_3').stop(true).animate({ height:'305px' },300) $('.biankuang_4').stop(true).delay(300).animate({ width:'360px' },300) } // 边框效果--移出 function biankuang1(){ $('.biankuang_1').stop(true).delay(100).animate({ height:'0px' },100) $('.biankuang_2').stop(true).animate({ width:'0px' },100) $('.biankuang_3').stop(true).delay(100).animate({ height:'0px' },100) $('.biankuang_4').stop(true).animate({ width:'0px' },100) } // 触发 $('.cn_gobuy').hover( function () { $('.text_gobuy').addClass('text_gobuy_show'); $('.search_y').animate({left:'150',opacity:1},300); biankuang(); }, function () { $('.text_gobuy').removeClass('text_gobuy_show'); $('.search_y').animate({left:'100',opacity:0},300); biankuang1(); } ); }) </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> </div> </body> </html>

评论收藏

内容反馈

版权申诉