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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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 移除数组重复元素的一点说明
2008/11/27 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
PHP goto语句用法实例
2019/08/06 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
广告切换效果(缓动切换)
2009/05/27 Javascript
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
python中entry用法讲解
2020/12/04 Python
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
巴西购物网站:Estrela10
2018/12/13 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
应届生学校辅导员求职信
2013/11/07 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
加强作风建设工作总结
2014/10/23 职场文书
英文升职感谢信
2015/01/23 职场文书
十二生肖观后感
2015/06/12 职场文书