jquery实现盒子下拉效果示例代码


Posted in Javascript onSeptember 12, 2013
<script src="js/Jquery1.7.js"></script> 
<script type="text/javascript"> 
$(function () { 
$('div:eq(1)').css({ 'margin-top': '-=100px' }); 
$('div:first').mouseover(function () { 
$('div:eq(1)').animate({'margin-top':'+=100px'}); 
}) 
$('div:first').mouseout(function () { 
$('div:eq(1)').animate({ 'margin-top': '-=100px' }); 
}) 
</script>

<pre name="code" class="html"><div style="width:600px;height:300px;overflow:hidden;"> 
<div style="background-color:#000;height:100px;"> </div> 
<div style="background-color:#eee;height:300px;"> 
</div> 
</div></pre><br> 
<pre></pre> 
<pre name="code" class="html"></pre><pre name="code" class="html">当把鼠标移动到盒子上的时候上面就会出现一个黑色的盒子</pre><pre name="code" class="html">这是在浏览网页的时候看到的一个效果</pre><pre name="code" class="html">在这里写了一下</pre>
Javascript 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
prettier自动格式化去换行的实现代码
Aug 25 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 #Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 #Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 #Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 #Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 #Javascript
jquery foreach使用示例
Sep 12 #Javascript
jquery 追加tr和删除tr示例代码
Sep 12 #Javascript
You might like
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
js的表单操作 简单计算器
2011/12/29 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
angular2中Http请求原理与用法详解
2018/01/11 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
用Python进行TCP网络编程的教程
2015/04/29 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
python构建基础的爬虫教学
2018/12/23 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
土木建筑学生自我评价
2014/01/14 职场文书
行政助理的岗位职责
2014/02/18 职场文书
股份转让协议书
2014/04/12 职场文书
个人党性分析材料
2014/12/19 职场文书
公司管理建议书
2015/09/14 职场文书
详解Java实践之适配器模式
2021/06/18 Java/Android