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 相关文章推荐
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
jQuery 技巧小结
Apr 02 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
微信小程序实现折线图的示例代码
Jun 07 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
vue 扩展现有组件的操作
Aug 14 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利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
JS跨域代码片段
2012/08/30 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
华为python面试题
2016/05/03 面试题
学校司机岗位职责
2013/11/14 职场文书
装饰资料员岗位职责
2013/12/30 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
捐款活动总结
2014/08/27 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
员工升职自我评价
2019/03/26 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
Python使用scapy模块发包收包
2021/05/07 Python