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 相关文章推荐
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
深入理解js generator数据类型
Aug 16 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 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
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
心扬JS分页函数代码
2010/09/10 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
Python字符串处理函数简明总结
2015/04/13 Python
遗传算法之Python实现代码
2017/10/10 Python
python如何定义带参数的装饰器
2018/03/20 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
internal修饰符起什么作用
2013/12/16 面试题
演讲主持词
2014/03/18 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
感谢信的格式
2015/01/21 职场文书
小班上学期个人总结
2015/02/12 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
部门主管竞聘书
2015/09/15 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python