文档章节

JQuery边框特效

ycYinG
 ycYinG
发布于 2016/12/08 15:59
字数 275
阅读 10
收藏 0

####主要思想 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) });

© 著作权归作者所有

共有 人打赏支持
ycYinG
粉丝 1
博文 10
码字总数 4889
作品 0
昌平
程序员
私信 提问
11 个惊人的 CSS3 和 jQuery 制作的教程

CSS3 为 Web 开发带来了非常令人兴奋的变化,特别是在 CSS 3D 转换、动画等特性的支持,可以轻松的创建很酷的 Web 效果。 在这篇文章中我们介绍 11 个使用 CSS3 和 jQuery 实现的特效,很酷。...

oschina
2012/07/18
8.5K
10
11 个惊人的 CSS3 和 jQuery 制作的教程收集

CSS3 为 Web 开发带来了非常令人兴奋的变化,特别是在 CSS 3D 转换、动画等特性的支持,可以轻松的创建很酷的 Web 效果。 在这篇文章中我们介绍 11 个使用 CSS3 和 jQuery 实现的特效,很酷。...

长平狐
2012/11/12
52
0
6 个典型的 HTML5 文字特效示例

在HTML5出现之前,网页上的文字比较单一,除了设置大小、颜色、粗细之外,没有任何出色的特效,当然优秀的文字排版也能让页面显得舒服温馨,但 是当我们需要让页面变得震撼惊奇的话,那么HTM...

tp_wire
2012/08/30
11.3K
0
使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表

日期:2012-4-10 来源:GBin1.com 在线演示 本地下载 今天我们将使用页面元素的翻转效果设计一个微博和轻博网站列表,将使用jQuery的jQuery Flip插件来实现特效。 HTML代码 这里我们使用soc...

gbin1
2012/04/10
0
0
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
11/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Confluence 6 自定义你的空间

通过对你的空间进行界面的自定义能够让你的空间更加出类拔萃。 如果你具有空间管理员权限,你可以修改你空间的颜色配色,添加你自己的空间标识,选择是否在你空间中显示边栏。或者你可以进入...

honeymose
20分钟前
0
0
Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
3
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0
Cnn学习相关博客

CNN卷积神经网络原理讲解+图片识别应用(附源码) 笨方法学习CNN图像识别系列 深度学习图像识别项目(中):Keras和卷积神经网络(CNN) 卷积神经网络模型部署到移动设备 使用CNN神经网络进行...

-九天-
昨天
5
0
flutter 底部输入框 聊天输入框 Flexible

想在页面底部放个输入框,结果键盘一直遮住了,原来是布局问题 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("评论"), ...

大灰狼wow
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部