一款JQ渐显渐隐的TAB切换效果

Zero零分 代码 6,328 0 6年前

一款不错的JQ渐显渐隐代码

JS代码:

  1. <script type=“text/javascript”>
  2. jQuery(document).ready(function($) {
  3. $(‘#table span’).hover(function() {
  4. $(this).addClass(“on”).siblings().removeClass(“on”);
  5. $(“#tab-content > div”).eq($(‘#table span’).index(this)).fadeIn(500).siblings().fadeOut(500);
  6. });
  7. });
  8. </script>

鼠标移过切换,换点击,将hover换成click即可。 fadeIn(500),渐显,500是时间,ms!

CSS:

  1. <style>
  2. .table{width:320px;height:248px;overflow:hidden;margin:0 0 0 8px;border:1px solid #E6E6E6;}
  3. .table .title{width:320px;height:28px;overflow:hidden;border-bottom:1px solid #E6E6E6;}
  4. .table .title .one{width:160px;height:30px;line-height:30px;font-size:14px;overflow:hidden;margin:0;text-align:center;display:block;cursor:pointer}
  5. .table .title .on{background-color:#FF5400;color:#fff;}
  6. .table .box{width:300px;height:200px;overflow:hidden;padding:8px 10px;display:block;position:absolute;}
  7. .table .box .li{background:url(“li-style.png”) 0 0 no-repeat;width:300px;height:200px;}
  8. .table .box .li a{display:block;width:275px;height:20px;line-height:20px;margin-left:25pxoverflow:hiddenwhitewhite-spacenowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;color:#666;}
  9. .f_l{float:left;}
  10. </style>

CSS样式,这里注意box要给一个 position:absolute ,层进行叠加,否则切换的时候有明显的弹出效果!

html代码:

  1. <div class=“table” id=“table”>
  2. <div class=“title” id=“fli”>
  3. <span class=“one f_l on” >TAB选项卡1</span>
  4. <span class=“one f_l”>TAB选项卡2</span>
  5. </div>
  6. <div id=“tab-content”>
  7. <div class=“box”>
  8. <div class=“li”>
  9. <a href=“//blog.32xp.com/phpstudy-mysql-450.html” title=“PHPstudy搭建本地环境修改数据库上传大小” target=“_blank”>PHPstudy搭建本地环境修改数据库上传大小</a>
  10. <a href=“//blog.32xp.com/js-href-447.html” title=“JS,JQ获取淘点金里的淘客链接href值” target=“_blank”>JS,JQ获取淘点金里的淘客链接href值</a>
  11. <a href=“//blog.32xp.com/adjs-445.html” title=“淘点金JS被浏览器广告过滤屏蔽” target=“_blank”>淘点金JS被浏览器广告过滤屏蔽</a>
  12. <a href=“//blog.32xp.com/meiguorenapp-443.html” title=“美国人每天玩手机APP时间首次超过看电视” target=“_blank”>美国人每天玩手机APP时间首次超过看电视</a>
  13. <a href=“//blog.32xp.com/wordpress-441.html” title=“外站调用wordpress文章” target=“_blank”>外站调用wordpress文章</a>
  14. <a href=“//blog.32xp.com/wordpress-437.html” title=“解决wordpress4.2以上外观菜单无法打开显示选项” target=“_blank”>解决wordpress4.2以上外观菜单无法打开显示选项</a>
  15. <a href=“//blog.32xp.com/php-435.html” title=“PHP替换字符串preg_replace和str_replace的区别” target=“_blank”>PHP替换字符串preg_replace和str_replace的区别</a>
  16. <a href=“//blog.32xp.com/iphone6s-433.html” title=“9月10日凌晨1点直播苹果发布会 6s全面曝光” target=“_blank”>9月10日凌晨1点直播苹果发布会 6s全面曝光</a>
  17. <a href=“//blog.32xp.com/jscode-431.html” title=“JS+html点击运行文本框内代码” target=“_blank”>JS+html点击运行文本框内代码</a>
  18. <a href=“//blog.32xp.com/html5-video-427.html” title=“html5音视频播放标签video” target=“_blank”>html5音视频播放标签video</a>
  19. </div>
  20. </div>
  21. <div class=“box” style=“display:none;”>
  22. <div class=“li”>
  23. <a href=“//blog.32xp.com/adjs-445.html” title=“淘点金JS被浏览器广告过滤屏蔽” target=“_blank”>淘点金JS被浏览器广告过滤屏蔽</a>
  24. <a href=“//blog.32xp.com/meiguorenapp-443.html” title=“美国人每天玩手机APP时间首次超过看电视” target=“_blank”>美国人每天玩手机APP时间首次超过看电视</a>
  25. <a href=“//blog.32xp.com/wordpress-441.html” title=“外站调用wordpress文章” target=“_blank”>外站调用wordpress文章</a>
  26. <a href=“//blog.32xp.com/wordpress-437.html” title=“解决wordpress4.2以上外观菜单无法打开显示选项” target=“_blank”>解决wordpress4.2以上外观菜单无法打开显示选项</a>
  27. <a href=“//blog.32xp.com/php-435.html” title=“PHP替换字符串preg_replace和str_replace的区别” target=“_blank”>PHP替换字符串preg_replace和str_replace的区别</a>
  28. <a href=“//blog.32xp.com/iphone6s-433.html” title=“9月10日凌晨1点直播苹果发布会 6s全面曝光” target=“_blank”>9月10日凌晨1点直播苹果发布会 6s全面曝光</a>
  29. <a href=“//blog.32xp.com/jscode-431.html” title=“JS+html点击运行文本框内代码” target=“_blank”>JS+html点击运行文本框内代码</a>
  30. <a href=“//blog.32xp.com/html5-video-427.html” title=“html5音视频播放标签video” target=“_blank”>html5音视频播放标签video</a>
  31. <a href=“//blog.32xp.com/phpstudy-mysql-450.html” title=“PHPstudy搭建本地环境修改数据库上传大小” target=“_blank”>PHPstudy搭建本地环境修改数据库上传大小</a>
  32. <a href=“//blog.32xp.com/js-href-447.html” title=“JS,JQ获取淘点金里的淘客链接href值” target=“_blank”>JS,JQ获取淘点金里的淘客链接href值</a>
  33. </div>
  34. </div>
  35. </div>
  36. </div>

数据比较多,html代码比较长!

演示及下载://demo.32xp.com/demo/jstab/20150917001.html

 

 

END

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

*

用户评论(0)

简单JS实现table选项卡切换

JS选项卡切换,其实,说穿了就是JS来控制选项卡的CSS样式,和内容DIV的显示和隐藏,我的代码都是比较随意,希望能比较好理解。 JS代码: <script language=javascript>    function check(n){    var c=document.getElementById(“div”).getElementsByTagName(“span”).length;    var v=document.getElementById(“div”).getElementsByTagName(“span”);    for(i=0;i<c;i++){    v[i].className=“”;    document.getElementById(“t”+i).style.display=“none”;    }    v[n].className=“check”;    document.getElementById(“t”+n).style.display=“block”;    }    </script>   CSS: <style>          .div{width:500px;margin:10px auto;border:1px solid #666}          .div .nav{width:500px;height:20px;margin:0px;border-bottom:1px solid #666}          .div .nav span{width:100px;height:20px;margin:0;line-height:20px;float:left;display:block;border-right:1px solid #666;background-color: #fff;text-align:center;cursor:pointer}          .div .nav .check{height:21px;margin-top:-2px;border-top:2px solid #ff0000;background-color: #fff;}          .content{margin:10px;height:50px;width:500px;display:block;}          .clear{clear:both; float:none;}      </style>   HTML: <div id=“div” class=“div”>        <div class=“nav”>     <span class=“check”  onclick=“check(0)”>选项卡1</span>             <span onclick=“check(1)”>选项卡2</span>             <span onclick=“check(2)”>选项卡3</span>             <span onclick=“check(3)”>选项卡4</span>    <div class=“clear”></div>                </div>    <div class=“content”>    <div  id=“t0” style=“display:block”>选项卡1的内容</div>    <div  id=“t1” style=“display:none”>选项卡2的内容</div>    <div  id=“t2” style=“display:none”>选项卡3的内容</div>    <div  id=“t3” style=“display:none”>选项卡4的内容</div>        </div>    </div>   演示://2.jspintu.sinaapp.com/dome/jsTable/
代码 ·

一个很有趣的CSS3动画效果

一个很有趣的CSS3动画效果,可当过渡页,如loading! 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="robots" content="noindex,follow"> <title>加载中</title> <style> body{font-weight:100;margin:0}body{-webkit-tap-highlight-color:transparent;background-color:#222428;font-size:100%;font-family:Open Sans;height:100%}.loader{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-mos-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;width:80%;overflow:visible}.loader,.loader div{position:absolute;height:36px}.loader div{width:30px;margin:0 10px;opacity:0;animation:move 2s linear infinite;-o-animation:move 2s linear infinite;-moz-animation:move 2s linear infinite;-webkit-animation:move 2s linear infinite;transform:rotate(180deg);-o-transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);color:#fff;font-size:3em}.loader div:nth-child(8):before{background:#db2f00}.loader div:nth-child(8):before,.loader div:nth-child(9):before{content:'';position:absolute;bottom:-15px;left:0;width:30px;height:30px;border-radius:100%}.loader div:nth-child(9):before{background:#f2f2f2}.loader div:nth-child(10):before{bottom:-15px;height:30px;background:#13a3a5}.loader div:after,.loader div:nth-child(10):before{content:'';position:absolute;left:0;width:30px;border-radius:100%}.loader div:after{bottom:-40px;height:5px;background:#39312d}.loader div:nth-child(2){animation-delay:.2s;-o-animation-delay:.2s;-moz-animation-delay:.2s;-webkit-animation-delay:.2s}.loader div:nth-child(3){animation-delay:.4s;-o-animation-delay:.4s;-webkit-animation-delay:.4s}.loader div:nth-child(4){animation-delay:.6s;-o-animation-delay:.6s;-moz-animation-delay:.6s;-webkit-animation-delay:.6s}.loader div:nth-child(5){animation-delay:.8s;-o-animation-delay:.8s;-moz-animation-delay:.8s;-webkit-animation-delay:.8s}.loader div:nth-child(6){animation-delay:1s;-o-animation-delay:1s;-moz-animation-delay:1s;-webkit-animation-delay:1s}.loader div:nth-child(7){animation-delay:1.2s;-o-animation-delay:1.2s;-moz-animation-delay:1.2s;-webkit-animation-delay:1.2s}.loader div:nth-child(8){animation-delay:1.4s;-o-animation-delay:1.4s;-moz-animation-delay:1.4s;-webkit-animation-delay:1.4s}.loader div:nth-child(9){animation-delay:1.6s;-o-animation-delay:1.6s;-moz-animation-delay:1.6s;-webkit-animation-delay:1.6s}.loader div:nth-child(10){animation-delay:1.8s;-o-animation-delay:1.8s;-moz-animation-delay:1.8s;-webkit-animation-delay:1.8s}@keyframes move{0%{right:0;opacity:0}35%{right:41%}35%,65%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}65%{right:59%}to{right:100%;-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}}@-webkit-keyframes move{0%,to{opacity:0}0%{right:0}35%{right:41%}35%,75%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}75%{right:59%}to{right:100%;-webkit-transform:rotate(-180deg);transform:rotate(-180deg);opacity:0}} </style> </head> <body class="ie8"> <div class="loader"> <div> C </div> <div> S </div> <div> S </div> <div> 动 </div> <div> 画 </div> <div> 吗 </div> <div> ? </div> <div> </div> <div> </div> <div> </div> </div> </body> </html> 演示地址:效果演示
代码 ·

JOS京东联盟API接口调用

突然突然突然,觉得做一个京东联盟API调用,也许,在微信QQ等场景是不会有被屏蔽的现象。 于是于是于是,就去研究了下京东联盟API,看着一堆接口,描述的确挺不错的,实际返回内容,可能不是你想的那样。。。 另外另外另外,京东联盟的API调用是需要一个token授权的,而且,这个token授权还需要登陆京东账户的,好在这个token的有效期是1年,在1年内,登陆一次就好!据说,修改过京东账户密码,是需要重新获取一次的! 好吧好吧好吧,那就来获取token授权码,想获取token,先得获取code,通过code,再获取token! 先看下官方说明: 再看下获取授权码的API请求链接: https://oauth.jd.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID& redirect_uri=YOUR_REGISTERED_REDIRECT_URI&state=YOUR_CUSTOM_CODE 对着参数列表,链接是这样的! https://oauth.jd.com/oauth/authorize?response_type=code&client_id=你的Appkey& redirect_uri=你的回调URL&state=随意写 改好后,复制黏贴到浏览器打开,就是一个授权登陆,登陆之后自动跳转到回调地址,参数中带有code值! 通过code值获取token,获取token值请求地址: https://oauth.jd.com/oauth/token?grant_type=authorization_code&client_id=你的Appkey& redirect_uri=你的回调URL&code=刚刚获取的code&state=随意写&client_secret= 你的appSecret 复制到浏览器打开,就可以获得需要的token。 另外,有一个叫做Refresh token的刷新token来延迟Access token的时效,也就是,如果获取一次,可以在有效期内延长时间,比如计划! 获取了Access token之后,就可以使用API接口了! 最后,只想说,京东联盟的API,始终没有阿里妈妈API来的方便! 参考官方文档://jos.jd.com/doc/channel.htm?id=152
代码 ·

让position:absolute超出DIV溢出隐藏

通常,为了让DIV子元素超出部分隐藏,都是在父元素设置overflow:hidden,这样即可防止子元素撑开父元素,使子元素能够溢出隐藏! 但是,对于position:absolute定位的子元素,仅仅使用overflow:hidden没办法将其溢出部分隐藏,需要在父元素上也加上一个定位position:relative;才能将含有 position:absolute属性的子元素进行溢出隐藏! 效果: 代码: <style> .box{     width:200px;     height:150px;     overflow:hidden;     border:2px solid #000;     float:left;     margin-right:20px; } .relative{     position:relative; } .div{     width:200px;     height:100px;     background:#FF5400;     margin-top:100px;     position:absolute; } .zi{     width:200px;     height:300px;     background:#FF0000; } </style> <div class=“box”> 高300px的子元素溢出隐藏 <div class=“zi”></div> </div> <div class=“box”> 不带relative <div class=“div”></div> </div> <br><br><br><br><br><br> <div class=“box relative”> 带上relative <div class=“div”></div> </div> 附: 1、CSS overflow属性,overflow 属性规定当内容溢出元素框时发生的事情,所有主流浏览器都支持 overflow 属性。任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。 默认值:visible hidden:内容会被修剪,并且其余内容是不可见的。 scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 inherit:规定应该从父元素继承 overflow 属性的值。 2、position属性,position 属性规定元素的定位类型。所有主流浏览器都支持 position 属性。任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。默认值:static absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 relative:生成相对定位的元素,相对于其正常位置进行定位。因此,”left:20″ 会向元素的 LEFT 位置添加 20 像素。 static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 inherit:规定应该从父元素继承 position 属性的值。  
代码 ·
Zero零分
站龄14年资深站长
一个喜欢折腾,却又折腾不出像样东西的,不会PHP的PHP程序员!
467
文章
92
评论
27
分类
822
标签
7
友链
onlinelovesky 317355746 122551965@qq.com

百度广告