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

代码如下:

<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>

赞 (0)

相关推荐

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

    复制代码 代码如下: <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({'margi

  • jquery取消选择select下拉框示例代码

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: 复制代码 代码如下: <select name="pWaqqqy" id="sel_type" onchange="selectFunction()">        <option value="">全部</option>   

  • jquery动态加载select下拉框示例代码

    如题,直接上代码,实战学习. 复制代码 代码如下: <head><title>jquery实现动态加载select下拉选项</title> <script type="text/javascript"> function init(){ makemoduleSelect(); } //加载模板下拉框选项 function makemoduleSelect(){ $.ajax({ url : 'indexStatisticsAction_g

  • jquery中使用循环下拉菜单示例代码

    这个下拉菜单式可以循环的使用jquery实现,很实用,喜欢的朋友可以参考下 <select name="paymerid" id="paymerid" style="width: 155px;"> <option value="" >--请选择--</option> <c:forEach var="unionconfig" items="${unionco

  • Angularjs实现带查找筛选功能的select下拉框示例代码

    前言 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!所以为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析 我们的目标是在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的select的功

  • JQuery实现文字无缝滚动效果示例代码(Marquee插件)

    推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. 使用方法如下: 1.加载javascript. <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src=&quo

  • 基于jquery的checkbox下拉框插件代码

    option_check.js代码 : 复制代码 代码如下: /***************************************** 调用方法为: Jselect($("#inputid"),{ bindid:'bindid', hoverclass:'hoverclass', optionsbind:function(){return hqhtml();} }); inputid为下拉框要绑定的文本框id bindid为点击弹出/收回下拉框的控件id hoverclas

  • jQuery ul标签下拉菜单演示代码

    这是菜单的内容,用ul标签实现菜单: 复制代码 代码如下: <div id="menu"> <ul> <li><a href="">菜单一</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a> <u

  • Jquery easyui 下loaing效果示例代码

    复制代码 代码如下: //采用jquery easyui loading css效果 function ajaxLoading(){     $("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");  

  • ajax智能提示+textbox动态生成下拉框示例代码

    ajax智能提示+textbox动态生成下拉框示例代码

    复制代码 代码如下: <div class="searchwellist">快捷查询:<select id="searchSelect" runat="server"><option value="1" selected="selected">按内管码</option><option value="2">按标记码</opt

随机推荐