jquery实现边框特效

本文实例为大家分享了jquery实现边框特效的具体代码，供大家参考，具体内容如下

主要思想

1.将四个div分别定位到大div的上下左右位置
2.分别设置成宽度为0或者高度为0
3.让其执行给定动画，即多少毫秒让宽度或者高度变为指定的长度

html代码

<div class="box">
    <div class="border_top"></div>
    <div class="border_bottom"></div>
    <div class="border_left"></div>
    <div class="border_right"></div>
</div>

css代码

.box{
        width:234px;
        height:300px;
        position:relative;
}
.border_bottom,.border_left,.border_right,.border_top{
    background: #ff6700;
    position: absolute;
    font-size: 0px;
    transition: all 0.5s ease-out;
    z-index: 99;
}
.border_bottom,.border_top{
    height: 1px;
    width: 0px;
}
.border_right,.border_left{
    height: 0px;
    width: 1px;
}
.border_top {
    top:0px;
    left:0px;
}
.border_right {
    top:0px;
    right:0px;
}
.border_bottom {
    right: 0px;
    bottom: 0px;
}
.border_left {
    left: 0px;
    bottom: 0px;
}

js实现效果

1.引入jquery文件

<script src="jquery-1.8.3.min.js"></script>

2.jquery代码

$('.main>li').hover(function(){
    var index=$(this).index();
    $(".border_top").stop(true,true);
    $(".border_left").stop(true,true);
    $(".border_bottom").stop(true,true);
    $(".border_right").stop(true,true);
    $(".border_top").eq(index).animate({width:"234px"},100)
    $(".border_left").eq(index).animate({height:"300px"},100)
    $(".border_bottom").eq(index).animate({width:"234px"},100)
    $(".border_right").eq(index).animate({height:"300px"},100)
},function(){
    var index=$(this).index();
    $(".border_top").stop(true,true);
    $(".border_left").stop(true,true);
    $(".border_bottom").stop(true,true);
    $(".border_right").stop(true,true);
    $(".border_top").eq(index).animate({width:"0"},100)
    $(".border_left").eq(index).animate({height:"0"},100)
    $(".border_bottom").eq(index).animate({width:"0"},100)
    $(".border_right").eq(index).animate({height:"0"},100)
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

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

    话不多说.静态效果图如下 实代码如下 <!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;

  • JQuery实现鼠标移动到图片上显示边框效果

    复制代码 代码如下: 以下为程序代码:<!DOCTYPE html/> <head> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> <script type="text/javascript"> $(function() { $(".v&quo

  • jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法

    往带有png图的类里加红色字的部分 复制代码 代码如下: background-image:url(******.png)!important;background-image:url(../images/space.gif);/*space.gif 是一个透明的图片文件*/filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="******.png", enabled=true, sizingMethod=sca

  • JQuery拖动表头边框线调整表格列宽效果代码

    类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动手尝试实现,在此分享下小小的成果. 首先需要如图所示的鼠标图标文件,在自己的硬盘中搜索*.cur,肯定能找到. 为了能在所有需要该效果的页面使用,并且不需要更改页面任何HTML,我把所有的代码整合在 $(document).ready(function() {}); 中,并写入一个独立的JS文件.

  • jQuery实现鼠标经过显示动画边框特效

    jQuery实现鼠标经过显示动画边框特效

    原效果用addClass 改为slideUp,纯学习 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css.css" rel="external nofo

  • jquery插件corner实现圆角边框的方法

    本文实例讲述了jquery插件corner实现圆角边框的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!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/xhtm

  • jquery photoFrame 图片边框美化显示插件

    三种样式都是用photoframe实现的,我会继续丰富其样式,目标是拿来即用,简化页面代码.使用: 复制代码 代码如下: <link type="text/css" rel="stylesheet" href="stamp/style.css" /> <script type="text/javascript" src="jquery-1.4.2.min.js"></scrip

  • jquery(1.3.2) 高亮选中图片边框

    jquery(1.3.2) 高亮选中图片边框

    因为需要加载文件,建议刷新下 高亮选中图片边框 #mainboard img{ border:1px solid #cccccc; width:88px; height:31px; cursor:pointer; } $(function(){ $("#mainboard img").bind("click",function(){ $(this).css("border","1px solid red").siblings(

  • jquery给图片添加鼠标经过时的边框效果

    一哥们儿要给图片添加鼠标经过时的边框效果,可惜出发点错了,直接加在了IMG外的A标签上致使 鼠标经过时图片产生塌陷,实则应该将边框控制直接加在IMG标签上即可 错误代码如下:注意红色部分设置 (出发点就错了) 复制代码 代码如下: <html> <head> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></s

  • jquery实现边框特效

    本文实例为大家分享了jquery实现边框特效的具体代码,供大家参考,具体内容如下 主要思想 1.将四个div分别定位到大div的上下左右位置2.分别设置成宽度为0或者高度为03.让其执行给定动画,即多少毫秒让宽度或者高度变为指定的长度 html代码 <div class="box">     <div class="border_top"></div>     <div class="border_bottom&q

  • jQuery晃动层特效实现方法

    本文实例讲述了jQuery晃动层特效实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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&qu

  • 高效的jquery数字滚动特效

    高效的jquery数字滚动特效

    本文实例讲述了基于jquery数字滚动特效的代码,分为四种情况分享给大家供大家参考,具体如下: 有分隔符,有小数点:<div class="numberRun"></div> <br><br> 只有分隔符:<div class="numberRun2"></div> <br><br> 只有小数点:<div class="numberRun3"&g

  • jQuery图片渐变特效的简单实现

    jQuery图片渐变特效的简单实现 (document).ready(function() {(document).ready(function() {("div.baba").mouseleave(function() { ("span.aaa").stop().animate({opacity: '1'},600); });("span.aaa").stop().animate({opacity: '1'},600); });("d

  • JQuery动画与特效实例分析

    本文实例分析了JQuery动画与特效的用法.分享给大家供大家参考.具体分析如下: 显示与隐藏 show(spped,[callback])与hide(spped,[callback]) speed可选填slow.normal.fast,对应的速度分别为600ms.400ms.200ms.也可以直接填毫秒数,callback函数为回调函数,动作完成后调用此函数 $("img").show(3000,function(){ $(this).css("border",&q

  • jquery实现滑动特效代码

    jquery实现滑动特效代码

    在项目中,有需求要使用jquery实现滑动效果,于是把相关内容整理如下,下文介绍了很详细,有文字说明和代码分析,需要的朋友可以来学习下. 实现方式一:  .slideUp([duration][,complete])--目标元素向上滑入隐藏: .slideDown([duration][,complete])--目标元素向下滑出显示: .slideToggle([duration][,complete])--目标元素隐藏则向下滑出显示,否则向上滑入隐藏: 注:duration为方法执行的时间区间

  • jquery实现走马灯特效实例(扑克牌切换效果）

    jquery实现走马灯特效实例(扑克牌切换效果）

    话不多说,先上大致效果: 本着程序员的开源精神,代码奉上: html代码: <div class="main-box"> <div class="poker_box"> <div class="pokerCaroursel poker-content" data-setting='{ "width":1094, "height":338, "pokerWidth&qu

  • 推荐9款炫酷的基于jquery的页面特效

    推荐9款炫酷的基于jquery的页面特效

    1.基于jquery实现的带按钮的图片左右滚动切换 jquery带按钮的图片滚动切换代码是一款jquery制作带按钮的图片左右滚动切换特效代码 在线演示 源码下载 2.基于jQuery的图片上下左右无缝连续循环滚动 imgscroll插件是一款支持图片焦点滚动(支持渐变和滚动),图片连续无缝循环滚动的js库,依赖于jQuery图片无缝连续循环滚动 支持上下左右的滚动. 在线演示 源码下载 3.jquery实现的fixed固定层时间轴动态效果 jquery实现的fixed固定层时间轴动态效果源码,

  • Jquery时间轴特效(三种不同类型)

    Jquery时间轴特效(三种不同类型)

    jquery三种不同类型时间轴切换展示幻灯特效,先给大家展示效果图,喜欢的朋友可以下载源码哦. 查看效果       源码下载 文件引用: <script type="text/javascript" src="jquery.js"></script> <script src="jquery.timelinr-0.9.4.js" type="text/javascript"></scr

随机推荐