无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-07-14 06:01 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

jquery实现树形菜单完整代码,jQuery拖动元素并对

本实例实现了树形的动态菜单,兼容IE8,火狐,Chrome等浏览器。使用了jQuery的toggle() 方法。效果和代码如下:

本文实例讲述了jQuery拖动元素并对元素进行重新排序的实现方法,分享给大家供大家参考,具体实现内容如下

本文实例介绍了文字垂直滚动效果,主要运用了setInterval(function(){}, time);方法,分享给大家供大家参考,具体内容如下
HTML布局:

图片 1

效果图:

<ul class="recommend-info">
  <li>
    荐
    <a href="javascript:;">1高档社区,经典户型,机会难得,稍纵即逝!仅售66万!</a>
    66万  3室2厅1卫 120㎡
  </li>
  <li>
    荐
    <a href="javascript:;">2高档社区,经典户型,机会难得,稍纵即逝!仅售66万!</a>
    66万  3室2厅1卫 120㎡
  </li>
  <li>
    荐
    <a href="javascript:;">3高档社区,经典户型,机会难得,稍纵即逝!仅售66万!</a>
    66万  3室2厅1卫 120㎡
  </li>
  <li>
    荐
    <a href="javascript:;">4高档社区,经典户型,机会难得,稍纵即逝!仅售66万!</a>
    66万  3室2厅1卫 120㎡
  </li>
</ul>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery的树形菜单代码 </title>
<meta name="keywords" content="www.cnblogs.com/jihua"/>
<style type="text/css">
body { font-family:"宋体"; font-size: 12px; line-height: 1.5em; color:#7FB0C8; padding:0; margin:0; background: #336699;}
ul,ol,li,dl,dt,dd { margin:0; padding:0; list-style-type:none;}
h1,h2,h3,form,input,iframe,span { margin:0; padding:0;} 
a { color:#7FB0C8;}
a:link {color: #7FB0C8; TEXT-DECORATION: none;}
a:visited {color: #7FB0C8; TEXT-DECORATION: none;}
a:hover {color: #fff; TEXT-DECORATION: none;}
.white { color:#fff;}
.white a:link {color: #fff; TEXT-DECORATION: none;}
.white a:visited {color: #fff; TEXT-DECORATION: none;}
.white a:hover {color: #73E1F5; TEXT-DECORATION: none;}
/* 树形菜单开始 */
.close { float:right; clear:right; font-size:12px; font-weight:normal; cursor:pointer; padding-right:10px;}
.title { font-size:14px; color:#fff; margin-bottom:10px; padding-left:5px; width:290px;}
.menu { width:290px; height:330px; margin-bottom:10px;}

.l1 { background:#000; font-size:13px; padding:5px 0 0 30px; height:20px; margin-bottom:5px; cursor:pointer;}
.slist { margin:0 0 5px 0; display:none;}
.l2 { padding:0 0 0 35px; font-size:13px;}
.l2 a { padding:6px 0 0 5px; width:230px; height:21px; display:block;} 
.currentl2 a,.l2 a:hover { background:#1E5A82; color:#fff;}
.sslist { background:#156890; width:235px; overflow:hidden; margin:0 0 5px 35px; display:none;}
.l3 a { padding:6px 0 0 5px; width:230px; height:20px; display:block;} 
.currentl3 a,.l3 a:hover { color:#fff; font-weight:bold;}
</style>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
 // 树状菜单
 $(document).ready(function () {
 $(".l1").toggle(function () {
  $(".slist").animate({ height: 'toggle', opacity: 'hide' }, "slow");
  $(this).next(".slist").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 }, function () {
  $(".slist").animate({ height: 'toggle', opacity: 'hide' }, "slow");
  $(this).next(".slist").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 });

 $(".l2").toggle(function () {
  $(this).next(".sslist").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 }, function () {
  $(this).next(".sslist").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 });

 $(".l2").click(function () {
  $(".l3").removeClass("currentl3");
  $(".l2").removeClass("currentl2");
  $(this).addClass("currentl2");
 });

 $(".l3").click(function () {
  $(".l3").removeClass("currentl3");
  $(this).addClass("currentl3");
 });

 $(".close").toggle(function () {
  $(".slist").animate({ height: 'toggle', opacity: 'show' }, "fast");
  $(".sslist").animate({ height: 'toggle', opacity: 'show' }, "fast");
 }, function () {
  $(".slist").animate({ height: 'toggle', opacity: 'hide' }, "fast");
  $(".sslist").animate({ height: 'toggle', opacity: 'hide' }, "fast");
 });
 });
</script>
</head>
<body>
<h1 class="title">全部收起/展开Jihua树形菜单</h1>
<div class="menu">
 <h1 class="l1">一级菜单</h1>
 <div class="slist">
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <ul class="sslist">
 <li class="l3"><a href="#">·三级菜单</a></li>
 <li class="l3"><a href="#">·三级菜单</a></li>
 <li class="l3"><a href="#" target="_blank">·jihua.cnblogs.com</a></li>
 <li class="l3"><a href="#">·三级菜单</a></li>
 </ul>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <ul class="sslist">
 <li class="l3"><a href="#">·三级菜单</a></li>
 <li class="l3"><a href="#">·三级菜单</a></li>
 <li class="l3"><a href="#" target="_blank">·三级菜单</a></li>
 <li class="l3"><a href="#">·三级菜单</a></li>
 </ul>
 <h2 class="l2"><a href="#">二级jb51.net</a></h2>
 </div>
 <h1 class="l1">一级脚本</h1>
 <div class="slist">
 <h2 class="l2"><a href="#">二级菜单计划</a></h2>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 </div>
 <h1 class="l1">一级菜单</h1>
 <div class="slist">
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 </div>
</div>
</body>
</html>

图片 2

CSS样式:

本实例用到jquery的toggle() 方法,介绍如下:

具体内容如下:

<style>
  .recommend-info {
    width: 630px;
    height: 42px;
    padding: 0 10px;
    margin-top: 12px;
    margin-bottom: 18px;
    border: 1px dashed #DFDFDF;
    overflow: hidden;
  }
  .recommend-info li {
    overflow: hidden;
    font-size: 14px;
    line-height: 42px;
  }
  .recommend-info li .push {
    float: left;
    display: inline-block;
    width: 18px;
    height: 17px;
    margin-top: 12px;
    margin-right: 10px;
    background: #D95B4E;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 17px;
  }
  .recommend-info li a {
    float: left;
    color: #333;
  }
  .recommend-info li a:hover {
    color: #da5c4f;
  }
  .recommend-info li .htype {
    float: right;
    color: #999;
  }
</style>

定义和用法

从上图可以看出我们今天要实现的功能。当用户拖动一个图片时,就能改变图片的已有排序并更新表中的排列顺序。比如用户可以随意拖动我们网站中的布局,如谷歌iGoogle就已经实现了。这样便很好的提高了用户体验。

JS脚本:

toggle() 方法切换元素的可见状态。

下边,我们一步一步来实现这个功能。

<script>
  // 不断把新的第一个追加到后面 
  function vscroll() {
    var frtEle = $('.recommend-info li:first');
    frtEle.animate({'marginTop': -$('.recommend-info li').height()}, 500, function(){
      frtEle.css('marginTop', 0);
      $('.recommend-info').append(frtEle);
    });
  }
  var startInterval = setInterval(vscroll, 3000);

  // 鼠标悬停 
  $('.recommend-info li').hover(function(){
    clearInterval(startInterval);
  }, function(){
    startInterval = setInterval(vscroll, 3000);
  });
</script>

如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

<div>
  <input id="check" type="checkbox" />
</div>
<div>
  <input type="hidden" id="orderlist" />
  <ul id="list">
    <asp:Repeater ID="rptOrder" runat="server">
    <ItemTemplate>
      <li id="<%#Eval("ID") %>" title="<%#Eval("OrderID") %>">
        <img alt="img" src="<%#Eval("Link") %>" />
      </li>
    </ItemTemplate>
    </asp:Repeater>   
  </ul>
</div>

以上就是本文的全部内容,谢谢关注!

语法
$(selector).toggle(speed,callback,switch)

有一个单选框,当用户选中后,拖动图片时对数据库中数据排序进行更改。隐藏域保存原来的图片排列顺序。ul显示图片列表。

您可能感兴趣的文章:

  • js实现鼠标悬停图片上时滚动文字说明的方法
  • 向左滚动文字 js代码效果
  • 基于javascript实现文字无缝滚动效果
  • js实现文字滚动效果
  • js文字横向滚动特效
  • js div实现文字滚动和图片切换效果代码
  • JS实现单行文字不间断向上滚动的方法
  • JS实现倒计时和文字滚动的效果实例
  • javascript实现文字图片上下滚动的具体实例
  • javascript跟随鼠标的文字带滚动效果
  • JS实现把鼠标放到链接上出现滚动文字的方法

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:jquery实现树形菜单完整代码,jQuery拖动元素并对

关键词: