js实现点击选项置顶动画效果

本文实例为大家分享了js实现点击选项置顶动画的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>js置顶动画</title>
 <style>
  *{margin:0;padding:0;}
  ul {width: 1000px;margin:100px auto;position:relative;}
  li {position:absolute;height: 100px;width:900px;font-size:30px;background:#fff;line-height:100px;border:1px solid #eee;list-style:none;padding-left:50px;margin-top:-1px;transition:all .8s ease;}
  li button {float:right;position:relative;top:40px;right:30px;}
 </style>
</head>
<body>
 <ul>
 <li data-index="0">
  <span>内容0</span>
  <button>置顶</button>
 </li>
 <li data-index="1">
  <span>内容1</span>
  <button>置顶</button>
 </li>
 <li data-index="2">
  <span>内容2</span>
  <button>置顶</button>
 </li>
 <li data-index="3">
  <span>内容3</span>
  <button>置顶</button>
 </li>
 <li data-index="4">
  <span>内容4</span>
  <button>置顶</button>
 </li>
 </ul>
</body>
<script>
 function $$(str) {return document.querySelectorAll(str);}
 // 初始化排序
 function intData () {
 for (let i = 0, len = $$('ul li').length; i < len; i++) {
  $$('ul li')[i].style.top = (i * 101) + 'px';
  $$('ul li')[i].style.zIndex = (i * 101);
 }
 }
 function bindEvent () {
 for (let i = 0, len = $$('ul li').length; i < len; i++) {
  $$('ul li')[i].onclick = function() {
  // 将点击的节点追加到第一个
  let first = this.parentNode.firstChild;
  this.parentNode.insertBefore(this, first);
  setTimeout(() => {
   intData();
  }, 50);
  };
 }
 }
 intData();
 bindEvent();
</script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果

    JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果

    本文实例讲述了JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果.分享给大家供大家参考.具体如下: 这是一款兼容性好,自动置顶的淘宝悬浮工具栏,如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡,其实明白了这种思路,你就能举一返三了,演示一下看看效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tb-float-top-tools-menu-codes/ 具体代码如下: <!DOCTYPE html PU

  • javascript实现了照片拖拽点击置顶的照片墙代码

    javascript实现了照片拖拽点击置顶的照片墙代码

    演示图 styles.css *{ /*清空所有元素默认的外边距和内边距*/ } .photo_wall{ background:url(bg.jpg); /*定义照片墙的默认背景*/ background-size:cover; /*使照片墙的背景填充照片墙*/ width:1200px; /*设置照片墙的宽高*/ height:500px; margin:40px auto; /*设置照片墙的外边距*/ display:-webkit-box; /*使用CSS3的盒模型之流式布局*/ dis

  • js实现点击选项置顶动画效果

    本文实例为大家分享了js实现点击选项置顶动画的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js置顶动画</title> <style> *{margin:0;padding:0;} ul {width: 1000px;margin:100px auto;position:relative;

  • 使用JS实现气泡跟随鼠标移动的动画效果

    使用JS实现气泡跟随鼠标移动的动画效果

    气泡跟随鼠标移动,并在每次点击时产生不同的变化 效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 简单的气泡效果 </title> <style type="text

  • JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】

    JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】

    本文实例讲述了JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果.分享给大家供大家参考,具体如下: 基于Sketch.js,实现了物体触碰检测(蝌蚪会遇到障碍物以及聪明的躲避鼠标的点击),随机运动,聚集算法等. 已经具备了游戏的基本要素,扩展一下可以变成一个不错的 HTML5 游戏. 演示效果如下: 完整代码如下: <!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-

  • iOS中给自定义tabBar的按钮添加点击放大缩小的动画效果

    之前想过一些通过第三方的方式实现动画,感觉有点麻烦,就自己写了一个 不足之处还望大家多多指出 // 一句话,写在UITabBarController.m脚本中,tabBar是自动执行的方法 // 点击tabbarItem自动调用 -(void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item { NSInteger index = [self.tabBar.items indexOfObject:item]; [self a

  • 基于JS快速实现导航下拉菜单动画效果附源码下载

    基于JS快速实现导航下拉菜单动画效果附源码下载

    这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 快速的导航下拉菜单动画效果如下所示: 效果演示         源码下载 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav&

  • 基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载

    基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载

    基于jQuery鼠标点击水波动画竖直导航代码.这是一款基于jQuery+CSS3实现的带动画效果的竖直导航栏特效.效果图如下: 效果展示    源码下载 html代码: <div class="nav"> <ul> <li><a>网站首页</a></li> <li><a>关于我们</a></li> <li><a>产品中心</a>&l

  • iOS点击查看大图的动画效果

    iOS点击查看大图的动画效果

    对于图片来说,除了表情包,几乎都会被点击查看大图.今天就讲解一个查看和收起大图的动画效果,先直接看效果图: 如图所示,最开始是一个小图,点击小图可以查看大图.大图会从小图的位置和大小"弹"出来,同时背景变成半透明的阴影.点击大图或者阴影后,收起大图,同样地弹回到小图去,同时去掉阴影背景,就像是一张图片在伸大缩小一样. 现在看看这是怎么实现的.在思考一个动画的实现方法时,把动画的动作进行分解然后再一个个去思考怎么实现是一个好的习惯,我们稍微分解一下,这个动画在显示大图和收起大图的时候做了

  • JS实现点击链接取消跳转效果的方法

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>我们</title> <script type="text/javascript">

  • JS打开层/关闭层/移动层动画效果的实例代码

    css 复制代码 代码如下: body, span, div, td { font-size:12px; line-height:1.5em; color:#849BCA; }#bodyL { float:left; width:84px; margin-right:2px; }a.od { width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849B

随机推荐