关于css设置底部横线...

图片说明

这个小短线我是用div做的 但是现在可以横向滑动,这个方法不管用了 该怎么做

3个回答

方法有很多种,我写了两种,你参考一下,看你要那种效果。

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Document</title>
    <script src="jquery.min.js"></script>
    <style>
        * { margin: 0; padding: 0; }
        html,body { width: 100%; height: 100%; }
        .box { height: 500px; padding: 50px; background: #eee; }
        .menu { position: relative; overflow: hidden; }
        .menu li {
            position: relative;
            width: 50px;
            padding: 5px 0;
            font-size: 14px;
            line-height: 24px;
            float: left;
            text-align: right;
            list-style: none;
            cursor: pointer;
        }

        .menu li.action { color: #39f; }
        #liner{
            position: absolute;
            bottom: 0;
            left: 20px;
            display: block;
            width: 20px;
            height: 2px;
            background: #39f;
            transition: all 0.3s;
        }
        .menu2 li.action:after{
            content: "";
            display: block;
            width: 20px;
            height: 2px;
            background: #39f;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
    <script>
        $(function(){
            // 第一种
            $(".menu1").on("click","li",function(){
                var index = $(this).index();
                var wh = $(this)[0].offsetWidth;
                var offsetLeft = $(this)[0].offsetLeft;
                var linerWH = $("#liner")[0].offsetWidth;
                var left = wh + offsetLeft - linerWH;
                $("#liner").css('left',left);
                $(this).siblings("li").removeClass('action');
                $(this).addClass("action");
            })
            $(".menu1 li").eq(0).click();
            // 第二种
            $(".menu2").on("click","li",function(){
                var index = $(this).index();
                $(this).siblings("li").removeClass('action');
                $(this).addClass("action");
            })
            $(".menu2 li").eq(0).click();
        })
    </script>
</head>
<body>
    <div class="box">
        <h2>第一种: </h2>
        <ul class="menu menu1">
            <li class="action">div1</li>
            <li>div2</li>
            <li>div3</li>
            <li>div4</li>
            <label id="liner"></label>
        </ul>
        <h2>第二种: </h2>
        <ul class="menu menu2">
            <li class="action">div1</li>
            <li>div2</li>
            <li>div3</li>
            <li>div4</li>
        </ul>
    </div>
</body>
</html>
qq_40021323
妖王令剑 回复itanℒ: 我代码贴出来了, 你参考着就行了
5 个月之前 回复
qq_43468934
itanℒ 哇 老哥 你这说的好难 听不懂
5 个月之前 回复

把样式做在li上,比如

li.active{
    border-bottom: solid 1px;
}
guangcaiwudong
Kevin.Y.K 回复itanℒ: 那你就放在a上啊,或者再包一层
5 个月之前 回复
qq_43468934
itanℒ 大哥 你这样做 底部那个横线不能缩短啊
5 个月之前 回复
guangcaiwudong
Kevin.Y.K 先来后到,有用请采纳
5 个月之前 回复

这不就是选项卡效果吗

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
关于css设置背景颜色的问题....
![图片说明](https://img-ask.csdn.net/upload/201908/21/1566369767_89613.png) ![图片说明](https://img-ask.csdn.net/upload/201908/21/1566369795_84242.png) ## 其他的类名 背景颜色都生效 但是循环出来的 类名添加上去 都没效果 红框圈住的都是循环的数据 (投票背景是在css设置的 js无效)
Spring MVC 使用restful后静态资源(js,css...)404找不到问题
hi,各位: 之前使用SpringMVC都是正常的,这两天使用restful,想改变一下url的样子,就导致 如 **product** /{id} 这种请求的相关静态文件404找不到了,我发现这些静态文件的地址也发生了变化,如 /appname/ **product** /css/....,/appname/ **product** /js/... 怎么中间加了product这层目录呢? 而正常的url请求:/appname/index,/appname/profile,这些没有动态参数的,其静态文件地址就是正确的:/appname/css/....,/appname/js/... 我的spring配置文件如下:(部分) <mvc:annotation-driven /> <!-- 对静态资源文件的访问 --> <mvc:resources mapping="/css/**" location="/,/WEB-INF/css/" /> <mvc:resources mapping="/js/**" location="/,/WEB-INF/js/" /> <mvc:resources mapping="/templates/**" location="/,/WEB-INF/templates/" /> <mvc:resources mapping="/images/**" location="/,/WEB-INF/images/" /> <mvc:resources mapping="/pics/**" location="/,/WEB-INF/pics/" /> <mvc:resources mapping="/properties/**" location="/WEB-INF/properties/" /> 请熟悉的同学帮忙,万分感谢
css html js 问题.布局设置
![图片说明](https://img-ask.csdn.net/upload/201504/02/1427965783_598023.png) 大神有人会吗?谢了
关于CSS,JS引入路径的问题
![图片说明](https://img-ask.csdn.net/upload/201705/09/1494315115_325736.png) 如图。 我试了很久。浏览器CONSOLE都是404找不到文件。 这个URL很是头疼。。 分别求CSS1.CSS和CSS2.CSS的引入URL
在VS中运行selenium脚本,selenium.click(css=..)出错
测试函数: [TestMethod] public void Test() { ISelenium selenium = new DefaultSelenium("127.0.0.1", 4444, "*iexplore", "http://www.taobao.com"); selenium.Start(); selenium.Open("http://www.taobao.com"); selenium.Click("css=li.J_SearchTab.shop-search-tab"); selenium.Type("id=q", "考拉一家"); selenium.Click("css=button.btn-search"); selenium.WaitForPageToLoad("30000"); Assert.IsTrue(selenium.IsElementPresent("//ul[@id='list-container']/li/ul/li[2]/h4/a/span[2]")); selenium.Click("//ul[@id='list-container']/li/ul/li[2]/h4/a/span[2]"); selenium.Close(); selenium.Stop(); } 其中 selenium.Click("css=li.J_SearchTab.shop-search-tab");语句报错:用户代码未处理 Selenium.SeleniumException Message=ERROR: Element css=li.J_SearchTab.shop-search-tab not found
关于thinkphp3.2.3引入css 和 js路径的问题
关于thinkphp3.2.3引入css 和 js路径的问题 新手刚学一星期 实战的时候发现引入css和js时__PUBLIC__没有被解析 我的目录是这样的 ![图片说明](https://img-ask.csdn.net/upload/201608/10/1470789048_277866.png) 引入是这样的 ![图片说明](https://img-ask.csdn.net/upload/201608/10/1470789190_894634.png) 运行后是这样的 错误了 ![图片说明](https://img-ask.csdn.net/upload/201608/10/1470789209_455620.png) 然后我重新在这里设置了下 Home下的config.php // 'TMPL_PARSE_STRING' => array( // '__PUBLIC__' => __ROOT__ . '/Public', // '__JS__' => __ROOT__ . '/Public/Js', // '__CSS__' => __ROOT__ . '/Public/Css', // '__IMAGE__' => __ROOT__ . '/Public/Image', // '__DATA__' => __ROOT__ . '/Data/' // ), 还是不行
我想请教一下关于easyui中easyui.css文件中的类easyui-tabs的高度无法调整
easyui我是参照菜鸟教程中《jQuery EasyUI 布局 - 动态添加标签页(Tabs》 网址:https://www.runoob.com/jeasyui/jeasyui-layout-tabs2.html 源代码: main_view.jsp <%-- Created by IntelliJ IDEA. User: Atlantide Date: 2020/1/27 Time: 15:51 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="jquery,ui,easy,easyui,web"> <meta name="description" content="easyui help you build your web page easily!"> <title>jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css"> <link href="../css/main/main_view.css" rel="stylesheet" type="text/css" /> <link type="text/css" rel="stylesheet" href="../css/main/style.css"/> <link type="text/css" rel="stylesheet" href="../css/main/index.css"/> <script src="../js/jquery.min.js"></script> <!-- 动态菜单JS --> <script type="text/javascript" src="../js/menu.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script> <script> function addTab(title, url){ if ($('#tt').tabs('exists', title)){ $('#tt').tabs('select', title); } else { var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>'; $('#tt').tabs('add',{ title:title, content:content, closable:true }); } } </script> </head> <body> <div class="cont-top"> <img src="../images/main/华依logo.jpg" width="100px" height="80px"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; <img src="../images/main/用户头像.jpg" width="60px" height="50px"> </div> <div style="margin-bottom:10px"> <div class="left-menu" style="height:949px;"> <div class="menu-list"> <ul> <li class="menu-list-01" > <p class="fumenu">库房管理</p> <img class="xiala" src="../images/main/xiala.png" /> <div class="list-p"> <p class="zcd"><a href="#" class="a" onclick="addTab('库房分配','/erp/warehouse_distribution')"> <font color="white">库房分配</font></a></p> <p class="zcd"><a href="#" class="a" onclick="addTab('入库单','/erp/material_warehouse')"> <font color="white">入库单</font></a></p> <p class="zcd"><a href="#" class="a" onclick="addTab('出库单','/erp/product_warehouse')"> <font color="white">出库单</font></a></p> <p class="zcd"><a href="#" class="a" onclick="addTab('库存余额','/erp/product_warehouse')"> <font color="white">库存余额</font></a></p> </div> </li> <li class="menu-list-02" > <p class="fumenu">销售管理</p> <img class="xiala" src="../images/main/xiala.png" /> <div class="list-p"> <p class="zcd"><a href="#" class="a" onclick="addTab('库房分配','/erp/warehouse_distribution')"> <font color="white">库房分配</font></a></p> <p class="zcd"><a href="#" class="a" onclick="addTab('入库单','/erp/material_warehouse')"> <font color="white">入库单</font></a></p> <p class="zcd"><a href="#" class="a" onclick="addTab('出库单','/erp/product_warehouse')"> <font color="white">出库单</font></a></p> <p class="zcd"><a href="#" class="a" onclick="addTab('库存余额','/erp/product_warehouse')"> <font color="white">库存余额</font></a></p> </div> </li> </ul> </div> </div></div> <div class="right-menu"> <div id="tt" class="easyui-tabs" style="width:1200px;height:1000px"> <div title="首页"> </div> </div> </div> </body> </html> warehouse_distribution.jsp <%@ page import="java.util.List" %> <%@ page import="com.springboot.erp.entity.Warehouse" %> <%@ page import="java.util.ArrayList" %><%-- Created by IntelliJ IDEA. User: Atlantide Date: 2020/1/27 Time: 20:47 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>库房分配</title> <link type="text/css" rel="stylesheet" href="../css/main/main_view.css"/> </head> <body> <% List<Warehouse> warehouseList=new ArrayList<Warehouse>(); if(session.getAttribute("all_warehouses_session")!=null){ warehouseList=(List)session.getAttribute("all_warehouses_session"); session.removeAttribute("all_warehouses_session"); } %> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; <form action="" method="post"> 请输入仓库号: &emsp;&emsp;&emsp; <input type="text" name="warehouse_no"> &emsp;&emsp;&emsp; <input type="submit" value="查询"> </form> <table border="1" class="t1" width="70%"> <tr> <th>仓库编号</th> <th>仓库名称</th> <th>仓库地址</th> <th>仓库容量</th> <th>仓库租金</th> <th>操作</th> </tr> <% for(Warehouse wh:warehouseList){ %> <tr> <td align="center"><%=wh.getWarehouse_no()%></td> <td align="center"><%=wh.getName()%></td> <td align="center"><%=wh.getLocation()%></td> <td align="center"><%=wh.getVolume()%></td> <td align="center"><%=wh.getRent()%></td> </tr> <% } %> </table> </body> </html> ![图片说明](https://img-ask.csdn.net/upload/202001/29/1580227234_221935.png)
少了css文件部分,怎么编。
这部分编完了,少css文件,HTML文件无法成功展示。 ![图片说明](https://img-ask.csdn.net/upload/202002/14/1581653958_281203.png) ![图片说明](https://img-ask.csdn.net/upload/202002/14/1581653675_914027.jpg) 这是完美展示效果 ![图片说明](https://img-ask.csdn.net/upload/202002/14/1581653772_170503.png) 这是编完html文件的
webpack2 在打包css时,css引用图片报错
ERROR in ./src/imgs/left.png Module parse failed: C:\Users\Administrator\Desktop\test\src\imgs\left.png Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) @ ./~/css-loader!./src/css/banner.css 6:570-597 @ ./src/css/banner.css @ ./src/js/index.js ERROR in ./src/imgs/right.png Module parse failed: C:\Users\Administrator\Desktop\test\src\imgs\right.png Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) @ ./~/css-loader!./src/css/banner.css 6:737-765 @ ./src/css/banner.css @ ./src/js/index.js 我的webpack.config.js配置如下 var webpack=require('webpack'); module.exports={ entry:'./src/js/index.js', output:{ path:__dirname+'/bundle', filename:'[name].js' }, module: { rules: [ { test: /\.css$/, use: ['style-loader','css-loader'] }, { test:'/\.(png|jpg|gif)$/', use: [ { loader: 'url-loader', options: { name: 'assets/[name]-[hash:5].[ext]', limit: 4000 } }, 'image-webpack-loader' ] } ] } } 请问大神为什么会报那样的错误 求指教
CSS实现横线两段逐渐变细变淡
![图片说明](https://img-ask.csdn.net/upload/201709/09/1504952251_492095.png) 请问大家,怎么用CSS实现上图中横线两端逐渐变细变淡的效果?
css 能不能设置padding的颜色 不通过背景颜色设置
css 能不能设置padding的颜色 , 不通过背景颜色设置?改变background -color的颜色 设置padding的颜色
tomcat和webservice测试报错
我写的代码自己环境下没事,到测试部测试就报错 我的是tomcat 测试部是webservice com.css.sword.platform.comm.exception.CSSFrameworkCheckedException: 00000017 at com.css.sword.platform.core.domain.blh.BaseDomainBLH.doInvokeBizAction(BaseDomainBLH.java:224) at com.css.sword.platform.core.domain.blh.BaseDomainBLH.execute(BaseDomainBLH.java:66) at com.css.sword.platform.core.domain.blh.BaseDomainBLH.doAction(BaseDomainBLH.java:76) at com.css.sword.platform.core.domain.controller.SLSBDomainController.dealActions(SLSBDomainController.java:186) at com.css.sword.platform.core.domain.controller.SLSBDomainController.dealTranscation(SLSBDomainController.java:116) at com.css.sword.platform.core.domain.server.CSSAppContext.execute(CSSAppContext.java:105) at com.css.sword.platform.core.domain.server.CSSAppServer.execute(CSSAppServer.java:160) at com.css.sword.platform.core.domain.controller.DomainControllerManager.execute(DomainControllerManager.java:40) at com.css.sword.platform.core.facade.LocalDebugDomainFacadeBean.invoke(LocalDebugDomainFacadeBean.java:52) at com.css.sword.platform.core.delegate.BizDelegate.delegate(BizDelegate.java:41) at com.css.sword.platform.web.comm.ViewDataHelper.dealViewData(Unknown Source) at com.css.sword.platform.web.context.ContextAPI.goProcess(Unknown Source) at com.css.sword.platform.web.servlet.Sword.doCtrl(Unknown Source) at com.css.sword.platform.web.servlet.Sword.doDelegate(Unknown Source) at com.css.sword.platform.web.servlet.Sword.service(Unknown Source) at javax.servlet.http.HttpServlet.service(HttpServlet.java:856) 求解
关于CSS,JS引入路径问题。
![图片说明](https://img-ask.csdn.net/upload/201705/09/1494317642_405567.png) 如图,求CSS1.CSS和CSS2.CSS的引入路径。 之前已经发过一篇帖子,但是结构比较乱,网友可能看起来比较麻烦,现在弄干净了。 因为之前的问题还是没解决,不得不再发帖,希望大家帮帮忙。
新手 css js ,document.getElementById("").innerHTML 添加div错误
最近在做聊天室 ,希望消息有绿色框 像微信那样 。用document.getElementById("").innerHTML 添加div 的 样式时候 错误 ![图片说明](https://img-ask.csdn.net/upload/201810/31/1540966610_48560.jpg) ![图片说明](https://img-ask.csdn.net/upload/201810/31/1540966617_835769.jpg) ![图片说明](https://img-ask.csdn.net/upload/201810/31/1540966632_271379.jpg)
filter如何对静态资源.css/.js/.jpg不进行过滤
web.xml中filter配置 ``` <filter> <filter-name>loginFilter</filter-name> <filter-class>com.cbt.Interceptor.LoginFilter</filter-class> <init-param> <param-name>loginPage</param-name> <param-value>main_login</param-value> </init-param> </filter> <filter-mapping> <filter-name>loginFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> ``` springmvc中的配置 ``` <mvc:resources location="/WEB-INF/css/" mapping="/css/**" /> <mvc:resources location="/WEB-INF/js/" mapping="/js/**" /> ``` 登录页面中引入的js跟css都被拦截了. 如果web.xml中更改filter的 <url-pattern>/*</url-pattern>为<url-pattern>*.do</url-pattern> 这样的话就只对.do结尾的请求进行拦截.自然就不会对静态资源进行过滤了 但是设置成<url-pattern>/*</url-pattern>就没办法对js跟CSS还有图片不进行过滤了吗? 不要说在filter代码里写.我想知道具体配置.跪求大神. 菊花献上.谢谢哒~~ 最后1C币了.有木有大神呐...
Springboot+thymeleaf 静态资源404
![图片说明](https://img-ask.csdn.net/upload/202002/06/1580974896_381903.jpg) 如图,我用Springboot+thymeleaf 返回了页面,但访问静态资源有问题。类型也不对。我有整合了Shiro框架 shiro过滤部分: ![图片说明](https://img-ask.csdn.net/upload/202002/06/1580975191_71883.png) 资源目录: ![图片说明](https://img-ask.csdn.net/upload/202002/06/1580975206_252515.png) 页面引用css: ``` <link href="/dist/css/style.min.css" rel="stylesheet"> ``` 用这个标签时会报错: ``` <link th:href="@{/static/dist/css/style.min.css}" rel="stylesheet" type="text/css"/> ``` No mapping for GET /auth/static/dist/css/style.min.css yml配置: ``` spring: mvc: static-path-pattern: /static/** view: prefix: /templates/ suffix: .html resources: static-locations: classpath:/static/ thymeleaf: #缓冲的配置 cache: false check-template: true check-template-location: true #开启MVC thymeleaf 视图解析 enabled: true encoding: utf-8 mode: HTML prefix: classpath:/templates/ suffix: .html ```
怎么css控制让图片变的圆滑
做的网站,www.bluqq.cn想把LOGO用CSS变成圆形的,什么代码可以,看看我的网站[bluqq](http://www.bluqq.cn "")
关于vs2010支持css3.0验证问题
我的vs2010支持css3.0, 但对于html中的内部样式表却仍然使用css2.1进行验证。请问高人如何解决?
怎么把网页1的导航完美移植到网页2的轮播图上边的位置使导航和轮播图结合成一个网页
网页1带导航的 <!DOCTYPE html> <html> <head> <link rel="icon" href="images/favicon.ico" type="img/x-ico" /> <title>山东金泽网络科技有限公司</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <meta name="keywords" content="" /> <script type="application/x-javascript"> addEventListener("load", function () { setTimeout(hideURLbar, 0); }, false); function hideURLbar() { window.scrollTo(0, 1); } </script> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" property="" /> <link href="css/style.css" rel='stylesheet' type='text/css' /> <link href="css/simpleLightbox.css" rel='stylesheet' type='text/css' /> <link href="css/fontawesome-all.css" rel="stylesheet"> <link href="http://fonts.googleapis.com/css?family=Poppins:100i,200,200i,300,400,400i,500,500i,600,600i,700,700i,800" rel="stylesheet"> </head> <body> <header> <div class="header_top" id="home"> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <a class="navbar-brand" href="index.html"> <i class="fab fa-digital-ocean"></i> 金泽科技</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mx-auto tp-nav text-center"> <li class="nav-item active"> <a class="nav-link" href="index.html">首页 <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">关于</a> </li> <li class="nav-item"> <a class="nav-link" href="了解银豹.html">解决方案</a> </li> <li class="nav-item"> <a class="nav-link" href="blog.html">博客</a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">联系我们</a> </li> </ul> <form action="#" method="post" class="form-inline my-2 my-lg-0 search"> <input class="form-control mr-sm-2" type="search" placeholder="点击输入搜索..." name="Search" required> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button> </form> </div> </nav> </div> </header> <!--//header--> </body> </html> ``` 网页2 轮播图代码: ``` <!DOCTYPE html> <html> <head> <link rel="icon" href="images/favicon.ico" type="img/x-ico" /> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>山东金泽网络科技有限公司</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div class="c-banner"> <div class="banner"> <ul> <li><img src="img/lunbo1.jpg"></li> <li><img src="img/lunbo2.jpg"></li> <li><img src="img/lunbo3.jpg"></li> </ul> </div> <div class="nexImg"> <img src="img/nexImg.png" /> </div> <div class="preImg"> <img src="img/preImg.png" /> </div> <div class="jumpBtn"> <ul> <li jumpImg="0"></li> <li jumpImg="1"></li> <li jumpImg="2"></li> </ul> </div> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> //定时器返回值 var time=null; //记录当前位子 var nexImg = 0; //用于获取轮播图图片个数 var imgLength = $(".c-banner .banner ul li").length; //当时动态数据的时候使用,上面那个删除 // var imgLength =0; //设置底部第一个按钮样式 $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black"); //页面加载 $(document).ready(function(){ // dynamicData(); //启动定时器,设置时间为3秒一次 time =setInterval(intervalImg,3000); }); //点击上一张 $(".preImg").click(function(){ //清楚定时器 clearInterval(time); var nowImg = nexImg; nexImg = nexImg-1; console.log(nexImg); if(nexImg<0){ nexImg=imgLength-1; } //底部按钮样式设置 $(".c-banner .jumpBtn ul li").css("background-color","white"); $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black"); //将当前图片试用绝对定位,下一张图片试用相对定位 $(".c-banner .banner ul img").eq(nowImg).css("position","absolute"); $(".c-banner .banner ul img").eq(nexImg).css("position","relative"); //轮播淡入淡出 $(".c-banner .banner ul li").eq(nexImg).css("display","block"); $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000); $(".c-banner .banner ul li").eq(nowImg).stop().animate({"opacity":0},1000,function(){ $(".c-banner ul li").eq(nowImg).css("display","none"); }); //启动定时器,设置时间为3秒一次 time =setInterval(intervalImg,3000); }) //点击下一张 $(".nexImg").click(function(){ clearInterval(time); intervalImg(); time =setInterval(intervalImg,3000); }) //轮播图 function intervalImg(){ if(nexImg<imgLength-1){ nexImg++; }else{ nexImg=0; } //将当前图片试用绝对定位,下一张图片试用相对定位 $(".c-banner .banner ul img").eq(nexImg-1).css("position","absolute"); $(".c-banner .banner ul img").eq(nexImg).css("position","relative"); $(".c-banner .banner ul li").eq(nexImg).css("display","block"); $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000); $(".c-banner .banner ul li").eq(nexImg-1).stop().animate({"opacity":0},1000,function(){ $(".c-banner .banner ul li").eq(nexImg-1).css("display","none"); }); $(".c-banner .jumpBtn ul li").css("background-color","white"); $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black"); } //轮播图底下按钮 //动态数据加载的试用应放在请求成功后执行该代码,否则按钮无法使用 $(".c-banner .jumpBtn ul li").each(function(){ //为每个按钮定义点击事件 $(this).click(function(){ clearInterval(time); $(".c-banner .jumpBtn ul li").css("background-color","white"); jumpImg = $(this).attr("jumpImg"); if(jumpImg!=nexImg){ var after =$(".c-banner .banner ul li").eq(jumpImg); var befor =$(".c-banner .banner ul li").eq(nexImg); //将当前图片试用绝对定位,下一张图片试用相对定位 $(".c-banner .banner ul img").eq(nexImg).css("position","absolute"); $(".c-banner .banner ul img").eq(jumpImg).css("position","relative"); after.css("display","block"); after.stop().animate({"opacity":1},1000); befor.stop().animate({"opacity":0},1000,function(){ befor.css("display","none"); }); nexImg=jumpImg; } $(this).css("background-color","black"); time =setInterval(intervalImg,3000); }); }); //动态数据轮播图 //动态数据加载的时候不要直接点击demo.html运行否则可能请求不到本地json数据 // function dynamicData(){ // $.ajax({ // url:"js/test.json", // type:"get", // dataType:"json", // success:function(data){ // if(data.code==1){ // var data = data.data; // $.each(data,function(i){ // $(".c-banner .banner ul").append('<li><img src="'+this.img+'"></li>'); // $(".c-banner .jumpBtn ul").append('<li jumpImg="'+i+'"></li>') // }) // } // //获取图片总数量 // imgLength = $(".c-banner .banner ul li").length; // //为底部按钮定义单击事件 // $(".c-banner .jumpBtn ul li").each(function(){ // //为每个按钮定义点击事件 // $(this).click(function(){ // clearInterval(time); // $(".c-banner .jumpBtn ul li").css("background-color","white"); // jumpImg = $(this).attr("jumpImg"); // if(jumpImg!=nexImg){ // var after =$(".c-banner .banner ul li").eq(jumpImg); // var befor =$(".c-banner .banner ul li").eq(nexImg); // // //将当前图片试用绝对定位,下一张图片试用相对定位 // $(".c-banner .banner ul img").eq(nexImg).css("position","absolute"); // $(".c-banner .banner ul img").eq(jumpImg).css("position","relative"); // // after.css("display","block"); // after.stop().animate({"opacity":1},1000); // befor.stop().animate({"opacity":0},1000,function(){ // befor.css("display","none"); // }); // nexImg=jumpImg; // } // $(this).css("background-color","black"); // time =setInterval(intervalImg,3000); // }); // }); // } // }) // } </script> <div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html> ``` ```
终于明白阿里百度这样的大公司,为什么面试经常拿ThreadLocal考验求职者了
点击上面↑「爱开发」关注我们每晚10点,捕获技术思考和创业资源洞察什么是ThreadLocalThreadLocal是一个本地线程副本变量工具类,各个线程都拥有一份线程私...
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
Linux(服务器编程):15---两种高效的事件处理模式(reactor模式、proactor模式)
前言 同步I/O模型通常用于实现Reactor模式 异步I/O模型则用于实现Proactor模式 最后我们会使用同步I/O方式模拟出Proactor模式 一、Reactor模式 Reactor模式特点 它要求主线程(I/O处理单元)只负责监听文件描述符上是否有事件发生,有的话就立即将时间通知工作线程(逻辑单元)。除此之外,主线程不做任何其他实质性的工作 读写数据,接受新的连接,以及处...
阿里面试官问我:如何设计秒杀系统?我的回答让他比起大拇指
你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图和个人联系方式,欢迎Star和指教 前言 Redis在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在Redis的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸,打败了...
五年程序员记流水账式的自白。
不知觉已中码龄已突破五年,一路走来从起初铁憨憨到现在的十九线程序员,一路成长,虽然不能成为高工,但是也能挡下一面,从15年很火的android开始入坑,走过java、.Net、QT,目前仍处于android和.net交替开发中。 毕业到现在一共就职过两家公司,目前是第二家,公司算是半个创业公司,所以基本上都会身兼多职。比如不光要写代码,还要写软著、软著评测、线上线下客户对接需求收集...
C语言魔塔游戏
很早就很想写这个,今天终于写完了。 游戏截图: 编译环境: VS2017 游戏需要一些图片,如果有想要的或者对游戏有什么看法的可以加我的QQ 2985486630 讨论,如果暂时没有回应,可以在博客下方留言,到时候我会看到。 下面我来介绍一下游戏的主要功能和实现方式 首先是玩家的定义,使用结构体,这个名字是可以自己改变的 struct gamerole { char n...
一文详尽系列之模型评估指标
点击上方“Datawhale”,选择“星标”公众号第一时间获取价值内容在机器学习领域通常会根据实际的业务场景拟定相应的不同的业务指标,针对不同机器学习问题如回归、分类、排...
究竟你适不适合买Mac?
我清晰的记得,刚买的macbook pro回到家,开机后第一件事情,就是上了淘宝网,花了500元钱,找了一个上门维修电脑的师傅,上门给我装了一个windows系统。。。。。。 表砍我。。。 当时买mac的初衷,只是想要个固态硬盘的笔记本,用来运行一些复杂的扑克软件。而看了当时所有的SSD笔记本后,最终决定,还是买个好(xiong)看(da)的。 已经有好几个朋友问我mba怎么样了,所以今天尽量客观...
程序员一般通过什么途径接私活?
二哥,你好,我想知道一般程序猿都如何接私活,我也想接,能告诉我一些方法吗? 上面是一个读者“烦不烦”问我的一个问题。其实不止是“烦不烦”,还有很多读者问过我类似这样的问题。 我接的私活不算多,挣到的钱也没有多少,加起来不到 20W。说实话,这个数目说出来我是有点心虚的,毕竟太少了,大家轻喷。但我想,恰好配得上“一般程序员”这个称号啊。毕竟苍蝇再小也是肉,我也算是有经验的人了。 唾弃接私活、做外...
压测学习总结(1)——高并发性能指标:QPS、TPS、RT、吞吐量详解
一、QPS,每秒查询 QPS:Queries Per Second意思是“每秒查询率”,是一台服务器每秒能够相应的查询次数,是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准。互联网中,作为域名系统服务器的机器的性能经常用每秒查询率来衡量。 二、TPS,每秒事务 TPS:是TransactionsPerSecond的缩写,也就是事务数/秒。它是软件测试结果的测量单位。一个事务是指一...
Python爬虫爬取淘宝,京东商品信息
小编是一个理科生,不善长说一些废话。简单介绍下原理然后直接上代码。 使用的工具(Python+pycharm2019.3+selenium+xpath+chromedriver)其中要使用pycharm也可以私聊我selenium是一个框架可以通过pip下载 pip installselenium -ihttps://pypi.tuna.tsinghua.edu.cn/simple/ ...
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
这种新手都不会范的错,居然被一个工作好几年的小伙子写出来,差点被当场开除了。
Java工作4年来应聘要16K最后没要,细节如下。。。
前奏: 今天2B哥和大家分享一位前几天面试的一位应聘者,工作4年26岁,统招本科。 以下就是他的简历和面试情况。 基本情况: 专业技能: 1、&nbsp;熟悉Sping了解SpringMVC、SpringBoot、Mybatis等框架、了解SpringCloud微服务 2、&nbsp;熟悉常用项目管理工具:SVN、GIT、MAVEN、Jenkins 3、&nbsp;熟悉Nginx、tomca...
2020年,冯唐49岁:我给20、30岁IT职场年轻人的建议
点击“技术领导力”关注∆每天早上8:30推送 作者|Mr.K 编辑| Emma 来源|技术领导力(ID:jishulingdaoli) 前天的推文《冯唐:职场人35岁以后,方法论比经验重要》,收到了不少读者的反馈,觉得挺受启发。其实,冯唐写了不少关于职场方面的文章,都挺不错的。可惜大家只记住了“春风十里不如你”、“如何避免成为油腻腻的中年人”等不那么正经的文章。 本文整理了冯...
程序员该看的几部电影
1、骇客帝国(1999) 概念:在线/离线,递归,循环,矩阵等 剧情简介: 不久的将来,网络黑客尼奥对这个看似正常的现实世界产生了怀疑。 他结识了黑客崔妮蒂,并见到了黑客组织的首领墨菲斯。 墨菲斯告诉他,现实世界其实是由一个名叫“母体”的计算机人工智能系统控制,人们就像他们饲养的动物,没有自由和思想,而尼奥就是能够拯救人类的救世主。 可是,救赎之路从来都不会一帆风顺,到底哪里才是真实的世界?如何...
Python绘图,圣诞树,花,爱心 | Turtle篇
每周每日,分享Python实战代码,入门资料,进阶资料,基础语法,爬虫,数据分析,web网站,机器学习,深度学习等等。 公众号回复【进群】沟通交流吧,QQ扫码进群学习吧 微信群 QQ群 1.画圣诞树 import turtle screen = turtle.Screen() screen.setup(800,600) circle = turtle.Turtle()...
作为一个程序员,CPU的这些硬核知识你必须会!
CPU对每个程序员来说,是个既熟悉又陌生的东西? 如果你只知道CPU是中央处理器的话,那可能对你并没有什么用,那么作为程序员的我们,必须要搞懂的就是CPU这家伙是如何运行的,尤其要搞懂它里面的寄存器是怎么一回事,因为这将让你从底层明白程序的运行机制。 随我一起,来好好认识下CPU这货吧 把CPU掰开来看 对于CPU来说,我们首先就要搞明白它是怎么回事,也就是它的内部构造,当然,CPU那么牛的一个东...
还记得那个提速8倍的IDEA插件吗?VS Code版本也发布啦!!
去年,阿里云发布了本地 IDE 插件 Cloud Toolkit,仅 IntelliJ IDEA 一个平台,就有 15 万以上的开发者进行了下载,体验了一键部署带来的开发便利。时隔一年的今天,阿里云正式发布了 Visual Studio Code 版本,全面覆盖前端开发者,帮助前端实现一键打包部署,让开发提速 8 倍。 VSCode 版本的插件,目前能做到什么? 安装插件之后,开发者可以立即体验...
破14亿,Python分析我国存在哪些人口危机!
一、背景 二、爬取数据 三、数据分析 1、总人口 2、男女人口比例 3、人口城镇化 4、人口增长率 5、人口老化(抚养比) 6、各省人口 7、世界人口 四、遇到的问题 遇到的问题 1、数据分页,需要获取从1949-2018年数据,观察到有近20年参数:LAST20,由此推测获取近70年的参数可设置为:LAST70 2、2019年数据没有放上去,可以手动添加上去 3、将数据进行 行列转换 4、列名...
2019年除夕夜的有感而发
天气:小雨(加小雪) 温度:3摄氏度 空气:严重污染(399) 风向:北风 风力:微风 现在是除夕夜晚上十点钟,再有两个小时就要新的一年了; 首先要说的是我没患病,至少现在是没有患病;但是心情确像患了病一样沉重; 现在这个时刻应该大部分家庭都在看春晚吧,或许一家人团团圆圆的坐在一起,或许因为某些特殊原因而不能团圆;但不管是身在何处,身处什么境地,我都想对每一个人说一句:新年快乐! 不知道csdn这...
听说想当黑客的都玩过这个Monyer游戏(1~14攻略)
第零关 进入传送门开始第0关(游戏链接) 请点击链接进入第1关: 连接在左边→ ←连接在右边 看不到啊。。。。(只能看到一堆大佬做完的留名,也能看到菜鸡的我,在后面~~) 直接fn+f12吧 &lt;span&gt;连接在左边→&lt;/span&gt; &lt;a href="first.php"&gt;&lt;/a&gt; &lt;span&gt;←连接在右边&lt;/span&gt; o...
在家远程办公效率低?那你一定要收好这个「在家办公」神器!
相信大家都已经收到国务院延长春节假期的消息,接下来,在家远程办公可能将会持续一段时间。 但是问题来了。远程办公不是人在电脑前就当坐班了,相反,对于沟通效率,文件协作,以及信息安全都有着极高的要求。有着非常多的挑战,比如: 1在异地互相不见面的会议上,如何提高沟通效率? 2文件之间的来往反馈如何做到及时性?如何保证信息安全? 3如何规划安排每天工作,以及如何进行成果验收? ...... ...
作为一个程序员,内存和磁盘的这些事情,你不得不知道啊!!!
截止目前,我已经分享了如下几篇文章: 一个程序在计算机中是如何运行的?超级干货!!! 作为一个程序员,CPU的这些硬核知识你必须会! 作为一个程序员,内存的这些硬核知识你必须懂! 这些知识可以说是我们之前都不太重视的基础知识,可能大家在上大学的时候都学习过了,但是嘞,当时由于老师讲解的没那么有趣,又加上这些知识本身就比较枯燥,所以嘞,大家当初几乎等于没学。 再说啦,学习这些,也看不出来有什么用啊!...
2020年的1月,我辞掉了我的第一份工作
其实,这篇文章,我应该早点写的,毕竟现在已经2月份了。不过一些其它原因,或者是我的惰性、还有一些迷茫的念头,让自己迟迟没有试着写一点东西,记录下,或者说是总结下自己前3年的工作上的经历、学习的过程。 我自己知道的,在写自己的博客方面,我的文笔很一般,非技术类的文章不想去写;另外我又是一个还比较热衷于技术的人,而平常复杂一点的东西,如果想写文章写的清楚点,是需要足够...
别低估自己的直觉,也别高估自己的智商
所有群全部吵翻天,朋友圈全部沦陷,公众号疯狂转发。这两周没怎么发原创,只发新闻,可能有人注意到了。我不是懒,是文章写了却没发,因为大家的关注力始终在这次的疫情上面,发了也没人看。当然,我...
这个世界上人真的分三六九等,你信吗?
偶然间,在知乎上看到一个问题 一时间,勾起了我深深的回忆。 以前在厂里打过两次工,做过家教,干过辅导班,做过中介。零下几度的晚上,贴过广告,满脸、满手地长冻疮。 再回首那段岁月,虽然苦,但让我学会了坚持和忍耐。让我明白了,在这个世界上,无论环境多么的恶劣,只要心存希望,星星之火,亦可燎原。 下文是原回答,希望能对你能有所启发。 如果我说,这个世界上人真的分三六九等,...
节后首个工作日,企业们集体开晨会让钉钉挂了
By 超神经场景描述:昨天 2 月 3 日,是大部分城市号召远程工作的第一天,全国有接近 2 亿人在家开始远程办公,钉钉上也有超过 1000 万家企业活跃起来。关键词:十一出行 人脸...
Java基础知识点梳理
虽然已经在实际工作中经常与java打交道,但是一直没系统地对java这门语言进行梳理和总结,掌握的知识也比较零散。恰好利用这段时间重新认识下java,并对一些常见的语法和知识点做个总结与回顾,一方面为了加深印象,方便后面查阅,一方面为了掌握好Android打下基础。
2020年全新Java学习路线图,含配套视频,学完即为中级Java程序员!!
新的一年来临,突如其来的疫情打破了平静的生活! 在家的你是否很无聊,如果无聊就来学习吧! 世上只有一种投资只赚不赔,那就是学习!!! 传智播客于2020年升级了Java学习线路图,硬核升级,免费放送! 学完你就是中级程序员,能更快一步找到工作! 一、Java基础 JavaSE基础是Java中级程序员的起点,是帮助你从小白到懂得编程的必经之路。 在Java基础板块中有6个子模块的学...
B 站上有哪些很好的学习资源?
哇说起B站,在小九眼里就是宝藏般的存在,放年假宅在家时一天刷6、7个小时不在话下,更别提今年的跨年晚会,我简直是跪着看完的!! 最早大家聚在在B站是为了追番,再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频,最近两年我和周围的朋友们已经把B站当作学习教室了,而且学习成本还免费,真是个励志的好平台ヽ(.◕ฺˇд ˇ◕ฺ;)ノ 下面我们就来盘点一下B站上优质的学习资源: 综合类 Oeasy: 综合...
相关热词 c# id读写器 c#俄罗斯方块源码 c# linq原理 c# 装箱有什么用 c#集合 复制 c# 一个字符串分组 c++和c#哪个就业率高 c# 批量动态创建控件 c# 模块和程序集的区别 c# gmap 截图
立即提问