全球彩票平台_全球彩票注册平台|官网下载地址

热门关键词: 全球彩票平台,全球彩票注册平台,全球彩官网下载地址

音信列表,JavaScript手风琴页面制作

消息列表(手风琴)效果的二种落到实处情势,音讯列表手风琴

效果图:

全球彩官网下载地址 1

一.纯CSS实现

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>demo01</title>
  6     <style>
  7         *{
  8             margin:0;
  9             padding: 0;
 10         }
 11         a{
 12             text-decoration: none;
 13             color:#333;
 14         }
 15         ul li{
 16             list-style: none;
 17         }
 18         .list{
 19             width: 220px;
 20             margin: 0 auto;
 21             margin-top: 20px;
 22             border: 1px solid #ccc;
 23         }
 24         h3{
 25             padding-left:10px;
 26             padding-bottom: 2px;
 27             background: #ccc;
 28         }
 29         .list ul li{
 30             font-size: 16px;
 31             padding:10px;
 32             border-bottom: 1px dotted #ccc;
 33         }
 34         .list ul li span{
 35             width: 18px;
 36             color:#fff;
 37             background: #ccc;
 38             font-size: 14px;
 39             text-align:center;
 40             margin-right: 4px;
 41             display: inline-block;    
 42         }
 43         .list ul li:hover dl{
 44             display: block;
 45         }
 46         .list ul li:hover span{
 47             background: #ec689c;
 48         }
 49         .list ul li:hover a{
 50             color:#ec6941; 
 51         }
 52         .list ul li dl{
 53             margin-top:10px;
 54             font-size: 14px;
 55             padding-left:30px;
 56             display: none;
 57         }
 58     </style>
 59 </head>
 60 <body>
 61     <div class="list">
 62         <h3>全球冷读榜</h3>
 63         <ul>
 64             <li>
 65                 1<a href="javascript:;">完全图解狗的心理</a>
 66                 <dl>
 67                     <dt>完全图解狗的心理</dt>
 68                     <dd>作者:名小狗</dd>
 69                     <dd>价格:88.66</dd>
 70                 </dl>
 71             </li>
 72             <li>
 73                 2<a href="javascript:;">完全图解狗的心理</a>
 74                 <dl>
 75                     <dt>完全图解狗的心理</dt>
 76                     <dd>作者:名小狗</dd>
 77                     <dd>价格:88.66</dd>
 78                 </dl>
 79             </li>
 80             <li>
 81                 3<a href="javascript:;">完全图解狗的心理</a>
 82                 <dl>
 83                     <dt>完全图解狗的心理</dt>
 84                     <dd>作者:名小狗</dd>
 85                     <dd>价格:88.66</dd>
 86                 </dl>
 87             </li>
 88             <li>
 89                 4<a href="javascript:;">完全图解狗的心理</a>
 90                 <dl>
 91                     <dt>完全图解狗的心理</dt>
 92                     <dd>作者:名小狗</dd>
 93                     <dd>价格:88.66</dd>
 94                 </dl>
 95             </li>
 96         </ul>
 97     </div>
 98     
 99 </body>
100 </html>

 二.原生JS实现

 1 window.onload = function(){
 2             var list = document.getElementsByTagName('li');
 3             var dl = document.getElementsByTagName('dl')
 4             for(let i=0; i<list.length;i  ){
 5                 list[i].onmouseover = function(){
 6                     dl[i].style.display = 'block';
 7                 }
 8                 list[i].onmouseout = function(){
 9                     dl[i].style.display = 'none';
10                 }
11             }
12         }

 

效果图: 一.纯CSS实现 1 ! DOCTYPE html 2 html lang ="en" 3 head 4 meta charset ="UTF-8" 5 tit...

全球彩官网下载地址,jQuery达成带玻璃流光材料的手风琴特效,jquery手风琴

jQuery完结带玻璃流光材料的手风琴特效是一款基于jQuery CSS3落到实处的带玻璃流光材料的手风琴特效,分享给我们,具体如下

效果图:

全球彩官网下载地址 2

现实代码如下:

html代码:

<section class="strips">
   <article class="strips__strip">
     <div class="strip__content">
       <h1 class="strip__title" data-name="Lorem">Awesome</h1>
     </div>
   </article>
   <article class="strips__strip">
     <div class="strip__content">
       <h1 class="strip__title" data-name="Ipsum">Words</h1>
       <div class="strip__inner-text">
         <h2>Ettrics</h2>

         <script src="http://www.w2bc.com/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>

         <p>
           <a href="#" target="_blank"><i class="fa fa-qq"></i></a>
         </p>
       </div>
     </div>
   </article>
   <article class="strips__strip">
     <div class="strip__content">
       <h1 class="strip__title" data-name="Dolor">Go</h1>
       <div class="strip__inner-text">
         <h2>Ettrics</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p>
         <p>
           <a href="#" target="_blank"><i class="fa fa-weibo"></i></a>
         </p>
       </div>
     </div>
   </article>
   <article class="strips__strip">
     <div class="strip__content">
       <h1 class="strip__title" data-name="Sit">Inside</h1>
       <div class="strip__inner-text">
         <h2>Ettrics</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p>
         <p>
           <a href="#" target="_blank"><i class="fa fa-weixin"></i></a>
         </p>
       </div>
     </div>
   </article>
   <article class="strips__strip">
     <div class="strip__content">
       <h1 class="strip__title" data-name="Amet">Here</h1>
       <div class="strip__inner-text">
         <h2>Ettrics</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p>
         <p>
           <a href="#" target="_blank"><i class="fa fa-leaf"></i></a>
         </p>
       </div>
     </div>
   </article>
   <i class="fa fa-close strip__close"></i>
 </section>

js代码:

      var Expand = function () {
      var tile = $('.strips__strip');
      var tileLink = $('.strips__strip > .strip__content');
      var tileText = tileLink.find('.strip__inner-text');
      var stripClose = $('.strip__close');
      var expanded = false;
      var open = function () {
        var tile = $(this).parent();
        if (!expanded) {
          tile.addClass('strips__strip--expanded');
          tileText.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
          stripClose.addClass('strip__close--show');
          stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
          expanded = true;
        }
      };
      var close = function () {
        if (expanded) {
          tile.removeClass('strips__strip--expanded');
          tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)');
          stripClose.removeClass('strip__close--show');
          stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)');
          expanded = false;
        }
      };
      var bindActions = function () {
        tileLink.on('click', open);
        stripClose.on('click', close);
      };
      var init = function () {
        bindActions();
      };
      return { init: init };
    }();
    Expand.init();

梦想本文能够给我们带来启发,帮衬我们越来越好地学习jquery程序设计。

jQuery完成带玻璃流光材料的手风琴特效是一款基于jQuery CSS3落到实处的带玻璃流光材质的手...

你势必用过书签,也迟早给您的书本加过书签,那么您见过书签式的领航吗? 你一定见过手风琴,也必然知道弹奏手风琴时的它的外形变化,那么你见过手风琴式的领航吗? 若无,请往下看:

效果图:

什么都不说了,直接上效益图

日前的话:

全球彩官网下载地址 3

全球彩官网下载地址 4

  那篇博文先通过Javascript做一个简单的手风琴效果,让我们对手风琴效果有肯定的摸底;紧接着,大家换jquery做类似的手风琴效果。前面包车型客车多少个例证都很简短,接下去要拓展招了,小编想用JQ或是原生的JS去做类似Tmall网中用到的手风琴效果。继续回来书签难点,既然JQ和JS都能落实那么炫人眼目的效应,大家用CSS3能或不能做出手风琴效果的书签来吗?

图(1)初始图

全球彩官网下载地址 5

用Javascript做一个简短的手风琴效果: 话不多说,大家先上代码:

全球彩官网下载地址 6

1.Html结构代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style>
   *{
    margin: 0; 
    padding: 0;
   }
   body{
    background-color: rgba(0,0,0,.8);
   }
   div{
    margin: 20px auto;
   }
   #c {
    width: 500px;
    height: 300px;
    overflow: hidden;
   }
   p {
    float: left;
    width: 20px;
    height: 300px;
   }
  </style>
 </head>
 <body>
  <div id="c">
   <p style="background:#9cf;width:420px;">1</p>
   <p style="background:#f9c;">2</p>
   <p style="background:#c9f;">3</p>
   <p style="background:#cf9;">4</p>
   <p style="background:#9fc;">5</p>
  </div>
 </body>
</html>

图(2)点击张开效果

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>手风琴2</title>
  <link rel="stylesheet" type="text/css" href="css/new_file.css" rel="external nofollow" />
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/new_file.js"></script>
 </head>
 <body>
  <div id="gs">
   <div class="gs gs1">
    <div class="txt">
     <p class="p1">我的旅行记1我的旅行记3</p>
     <p class="p2">空山之旅我的旅行记3</p>
    </div>
   </div>
   <div class="gs gs2">
    <div class="txt">
     <p class="p1">我的旅行记2我的旅行记3</p>
     <p class="p2">沙漠之旅我的旅行记3</p>
    </div>
   </div>
   <div class="gs gs3">
    <div class="txt">
     <p class="p1">我的旅行记3我的旅行记3</p>
     <p class="p2">拉沙之旅我的旅行记3</p>
    </div>
   </div>
   <div class="gs gs4">
    <div class="txt">
     <p class="p1">我的旅行记4我的旅行记3</p>
     <p class="p2">雪山之旅我的旅行记3</p>
    </div>
   </div>
  </div>
 </body>
</html>

效果:

代码如下:

2.css样式代码

全球彩官网下载地址 7

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
<style type="text/css">
*{margin:0;padding:0;font-size:12px;list-style:none;}
.menu{margin:50px auto;width:210px;border:1px solid #ccc;}
.menu p{height:25px;line-height:25px;background:#eee;font-weight:bold;border-bottom:1px solid #ccc;text-indent:20px;cursor:pointer;}
.menu div ul{display:none;}
.menu li{height:24px;line-height:24px;text-indent:20px;}
</style>
<script type="text/javascript">
 window.onload=function(){
 var menu=document.getElementById("menu");
 var ps=menu.getElementsByTagName("p");
 var uls=menu.getElementsByTagName("ul");
 for(var i in ps){
 ps[i].id=i;
 ps[i].onclick=function(){
 var u=uls[this.id];
 if (u.style.display=='block'){
 u.style.display="none";
 }else{
 u.style.display="block";
 }
 } 
 } 
 }
</script>
</head>
<body>
 <div class="menu" id="menu">
 <div>
 <p>Web前端</p>
 <ul style="display:block">
 <li>JavaScript</li>
 <li>DIV CSS</li>
 <li>JQuary</li>
 </ul>
 </div>
 <div>
 <p>后台脚本</p>
 <ul>
 <li>PHP</li>
 <li>ASP.net</li>
 <li>JSP</li>
 </ul>
 </div>
 <div>
 <p>前端框架</p>
 <ul>
 <li>Extjs</li>
 <li>Esspress</li>
 <li>YUI</li>
 </ul>
 </div>
 </div>
</body>
</html>
*{
 padding: 0px;
 margin: 0px;
 font-family: "微软雅黑";
}

#gs {
 width: 1100px;
 height: 429px;

}

.gs {
 width: 100px;
 height: 429px;
 float: left;
}

.gs4 {
 width: 789px;
 height: 429px;
}

.gs1 {
 background: url(../img/img/1.jpg) repeat scroll top left;
}
.gs2 {
 background-image: url(../img/img/2.jpg);
}
.gs3 {
 background-image: url(../img/img/3.jpg);
}
.gs4 {
 background-image: url(../img/img/4.jpg);
}

.txt {
 width: 100px;
 height: 429px;
 /*margin: 15px;*/
 background: rgba(0,0,0,0.5);
 cursor: pointer;
}

/*.txt p {
 float: left;
 width: 20px;
 height: 429px;
 color: #fff;
 font-size: 20px;
 margin: 14px;
}*/

.txt p {
 color: #fff;
 float: left;
 margin: 15px;
}

.txt .p1 {
 font-size: 14px;
 width: 14px;
}

.txt .p2 {
 font-size: 12px;
 width: 12px;
}

深入分析:在不采用JS的情况下,我们不得不通过退换p的升幅,来效仿手风琴效果,然后我们忽略人为因素的熏陶,让其在鼠标经过每种p时,该p的拉长率发生变化。

以上便是本文的全体内容,希望本文的剧情对大家的就学或许办事能带动一定的拉扯,同一时候也意在多多援助脚本之家!

3.javascript代码

此处大家驾驭了要转移p的宽度,那么接下去就大致了,我们用前面介绍过的有关Javascript动画的有关办法就能够收获我们想要的法力(点击:Javascript动画相关)。参谋代码如下:

你恐怕感兴趣的稿子:

  • 原生JS完成垂直手风琴效果
  • 原生js完毕手风琴效率(帮助横纵向调用)
  • 原生js做的手风琴效果的领航菜单
  • 纯js达成手风琴效果代码
  • js完毕可折叠张开的手风琴菜单成效
  • 纯js html和纯css html制作手风琴效果
  • Angular.js与Bootstrap相结合贯彻手风琴菜单代码
  • 采纳ReactJS实现tab页切换、菜单栏切换、手风琴切换和进程条效果
  • javascript手风琴下拉菜单完结代码
  • js完毕带三角符的手风琴效果
$(function(){
 $(".txt").mouseover(function(){
  $(this).parent().stop(true).animate({"width":"789px"},500).siblings().stop(true).animate({"width":"100px"},500);
 });
});
function accordion() {
 var Div = document.getElementById('c');
 var Divs = Div.getElementsByTagName('p');
 var i = 0;
 var t = null;
 for(i = 0; i < Divs.length; i  ) {
  Divs[i].index = i;
  Divs[i].onmouseover = function() {
   var index = this.index;
   if(t) {
    clearInterval(t);
   }
   t = setInterval(function() {
    var iWidth = 500;
    for(i = 0; i < Divs.length; i  ) {
     if(index != Divs[i].index) {
      var iSpeed = (20 - Divs[i].offsetWidth) / 5;
      iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
      Divs[i].style.width = Divs[i].offsetWidth   iSpeed   'px';
      iWidth -= Divs[i].offsetWidth;
     };
    };
    Divs[index].style.width = iWidth   'px';
   }, 30);
  };
 }
}
accordion();

4.主要:

上面的代码不做表明,代码运维后的结果点击网站: 查看。

a.字体竖排垂直:字体大小font-size = 包涵字体标签宽度width

用jquery做类似的手风琴效果:

b.js中stop()方法:stop()表示结束动画有对接

眼下的效应是否感觉很简短,下边大家加一丝丝难度,有如下须求:

         stop(true)表示暂停动画,

1、将近日的背景颜色换到图片

           stop(true,true)表示立时终止动画,无连接

2、增Gavin字

c.parent():找到上顶级成分

3、用jquery实现

  siblings():除了本成非常,其余的。。。

本文由全球彩票平台发布于全球彩官网下载地址Web前端,转载请注明出处:音信列表,JavaScript手风琴页面制作

TAG标签: 全球彩票平台
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。