SirM2z
SirM2z

css3学习笔记（三）---切换背景图像，融合笔记二的知识

<!DOCTYPE HTML>
<htmllang="en-US">
    <head>
        <meta charset="UTF-8">
    	<title>CSS3 Full Background Slider </title>
        <style type="text/css">
            @importurl("http://www.w3cplus.com/demo/css3/base.css");
            @importurl("http://fonts.googleapis.com/css?family=Yesteryear");
            html,body {
            	height: 100%;
            }
            /*设置背景图片全屏显示，并且居中*/
            img.bg {
	            min-height: 100%;
	            min-width: 1024px;
	            width: 100%;
	            height: auto !important;
	            height: 100%;
	            position: fixed;
	            top: 0;
	            left: 50%;
	            z-index:1;
                -webkit-transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                -o-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
            }
            /*设置背景图片从左向右移入显示的动画效果*/
            /* Slide Left */
            @-webkit-keyframes 'slideLeft' {
            	0% { left: -500px; }
            	100% { left: 0; }
            }
            @-moz-keyframes 'slideLeft' {
            	0% { left: -500px; }
            	100% { left: 0; }
            }
            @-o-keyframes 'slideLeft' {
            	0% { left: -500px; }
            	100% { left: 0; }
            }
            @-ms-keyframes 'slideLeft' {
            	0% { left: -500px; }
            	100% { left: 0; }
            }
            @keyframes 'slideLeft' {
            	0% { left: -500px; }
            	100% { left: 0; }
            }
            /*设置背景图像从底部向顶部移入的动画效果*/
             /* Slide Bottom */
            @-webkit-keyframes 'slideBottom' {
            	0% { top: 350px; }
            	100% { top: 0; }
            }
            @-moz-keyframes 'slideBottom' {
            	0% { top: 350px; }
            	100% { top: 0; }
            }
            @-ms-keyframes 'slideBottom' {
            	0% { top: 350px; }
            	100% { top: 0; }
            }
            @-o-keyframes 'slideBottom' {
            	0% { top: 350px; }
            	100% { top: 0; }
            }
            @keyframes 'slideBottom' {
            	0% { top: 350px; }
            	100% { top: 0; }
            }
            /*设置背景图片由小到大放大动画效果*/
            /* Zoom In */
            @-webkit-keyframes 'zoomIn' {
            	0% { -webkit-transform: scale(0.1); }
            	100% { -webkit-transform: none; }
            }
            @-moz-keyframes 'zoomIn' {
            	0% { -moz-transform: scale(0.1); }
            	100% { -moz-transform: none; }
            }
            @-ms-keyframes 'zoomIn' {
            	0% { -ms-transform: scale(0.1); }
            	100% { -ms-transform: none; }
            }
            @-o-keyframes 'zoomIn' {
            	0% { -o-transform: scale(0.1); }
            	100% { -o-transform: none; }
            }
            @keyframes 'zoomIn' {
            	0% { transform: scale(0.1); }
            	100% { transform: none; }
            }
            /*设置背景图像由大到小缩小动画效果*/
            /* Zoom Out */
            @-webkit-keyframes 'zoomOut' {
            	0% { -webkit-transform: scale(2); }
            	100% { -webkit-transform: none; }
            }
            @-moz-keyframes 'zoomOut' {
            	0% { -moz-transform: scale(2); }
            	100% { -moz-transform: none; }
            }
            @-ms-keyframes 'zoomOut' {
            	0% { -ms-transform: scale(2); }
            	100% { -ms-transform: none; }
            }
            @-o-keyframes 'zoomOut' {
            	0% { -o-transform: scale(2); }
            	100% { -o-transform: none; }
            }
            @keyframes 'zoomOut' {
            	0% { transform: scale(2); }
            	100% { transform: none; }
            }
            /*背景图像旋转出现动画效果*/
            /* Rotate */
            @-webkit-keyframes 'rotate' {
            	0% { -webkit-transform: rotate(-360deg) scale(0.1); }
            	100% { -webkit-transform: none; }
            }
            @-moz-keyframes 'rotate' {
            	0% { -moz-transform: rotate(-360deg) scale(0.1); }
            	100% { -moz-transform: none; }
            }
            @-ms-keyframes 'rotate' {
            	0% { -ms-transform: rotate(-360deg) scale(0.1); }
            	100% { -ms-transform: none; }
            }
            @-o-keyframes 'rotate' {
            	0% { -o-transform: rotate(-360deg) scale(0.1); }
            	100% { -o-transform: none; }
            }
            @keyframes 'rotate' {
            	0% { transform: rotate(-360deg) scale(0.1); }
            	100% { transform: none; }
            }
            /*设置背景图像不显示动画效果*/
            @-webkit-keyframes 'notTarget' {
            	0% { z-index: 75; }
            	100% { z-index: 75; }
            }
            @-moz-keyframes 'notTarget' {
            	0% { z-index: 75; }
            	100% { z-index: 75; }
            }
            @-ms-keyframes 'notTarget' {
            	0% { z-index: 75; }
            	100% { z-index: 75; }
            }
            @-o-keyframes 'notTarget' {
            	0% { z-index: 75; }
            	100% { z-index: 75; }
            }
            @keyframes 'notTarget' {
            	0% { z-index: 75; }
            	100% { z-index: 75; }
            }
            .slider {
	            position: absolute;
	            width: 100%;
	            text-align: center;
	            z-index: 9999;
	            bottom: 100px;
            }
            .slider li {
	            display: inline-block;
	            width: 170px;
	            height: 130px;
	            margin-right: 15px;
            }
            .slider a {
	            display: inline-block;
	            width: 170px;
	            padding-top: 70px;
	            padding-bottom: 20px;
	            position: relative;
	            cursor: pointer;
	            border: 2px solid #fff;
	            border-radius: 5px;
	            vertical-align: top;
	            color: #fff;
	            text-decoration: none;
	            font-size: 22px;
	            font-family: 'Yesteryear', cursive;
	            text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3);
            }
            /*、设置不同列表的背景色*/
            .slider ul li:nth-of-type(1) a{
            	background-color: #02646e;
            }
            .slider ul li:nth-of-type(2) a{
            	background-color: #eb0837;
            }
            .slider ul li:nth-of-type(3) a{
            	background-color: #67b374;
            }    
            .slider ul li:nth-of-type(4) a{
            	background-color: #e6674a;
            }    
            .slider ul li:nth-of-type(5) a{
            	background-color: #e61061;
            }
            /*、设置缩略图形状*/
            .slider ul li a::after{
	            content:"";
	            display: block;
	            height: 120px;
	            width: 120px;
	            border: 5px solid #fff;
	            border-radius: 50%;
	            position: absolute;
	            left: 50%;
	            margin-left: -60px;
	            z-index: 9999;
	            top: -80px;
            }
            /*、设置缩略图背景图像*/
            .slider ul li:nth-of-type(1) a::after{
            	background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg1.jpg) no-repeat center;
            }
            .slider ul li:nth-of-type(2) a::after{
            	background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg2.jpg) no-repeat center;
            }
            .slider ul li:nth-of-type(3) a::after{
            	background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg3.jpg) no-repeat center;
            }
            .slider ul li:nth-of-type(4) a::after{
            	background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg4.jpg) no-repeat center;
            }
            .slider ul li:nth-of-type(5) a::after{
            	background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg5.jpg) no-repeat center;
            }
            /*、给缩略图添加蒙板效果*/
            a::before{
	            content:"";
	            display: block;
	            height: 120px;
	            width: 120px;
	            border: 5px solid #fff;
	            border-radius: 50%;
	            position: absolute;
	            left: 50%;
	            margin-left: -60px;
	            z-index: 99999;
	            top: -80px;
	            background: rgba(0,0,0,0.3);
	            }
	            /*、鼠标悬浮时，修改缩略图蒙板透明度*/
	            a:hover::before{
	            opacity:0;
            }
            /*、点击综略图，切换背景图*/
            /*背景图从左向右出现*/
            #bg1:target{
            	z-index: 100;
            	-webkit-animation-name: slideLeft;
            	-webkit-animation-duration: 1s;
            	-webkit-animation-iteration-count: 1;
            	-moz-animation-name: slideLeft;
            	-moz-animation-duration: 1s;
            	-moz-animation-iteration-count: 1;
            	-ms-animation-name: slideLeft;
            	-ms-animation-duration: 1s;
            	-ms-animation-iteration-count: 1;
            	-o-animation-name: slideLeft;
            	-o-animation-duration: 1s;
            	-o-animation-iteration-count: 1;
            	animation-name: slideLeft;
            	animation-duration: 1s;
            	animation-iteration-count: 1;
            }
            /*背景图从下向上出现*/
            #bg2:target{
            	z-index: 100;
            
            	-webkit-animation-name: slideBottom;
            	-webkit-animation-duration: 1s;
            	-webkit-animation-iteration-count: 1;
            	-moz-animation-name: slideBottom;
            	-moz-animation-duration: 1s;
            	-moz-animation-iteration-count: 1;
            	-ms-animation-name: slideBottom;
            	-ms-animation-duration: 1s;
            	-ms-animation-iteration-count: 1;
            	-o-animation-name: slideBottom;
            	-o-animation-duration: 1s;
            	-o-animation-iteration-count: 1;
            animation-name: slideBottom;
            	animation-duration: 1s;
            	animation-iteration-count: 1;
            }
            /*背景图由小到大出现*/
            #bg3:target{
            	z-index: 100;
            	-webkit-animation-name: zoomIn;
            	-webkit-animation-duration: 1s;
            	-webkit-animation-iteration-count: 1;
            	-moz-animation-name: zoomIn;
            	-moz-animation-duration: 1s;
            	-moz-animation-iteration-count: 1;
            	-ms-animation-name: zoomIn;
            	-ms-animation-duration: 1s;
            	-ms-animation-iteration-count: 1;
            	-o-animation-name: zoomIn;
            	-o-animation-duration: 1s;
            	-o-animation-iteration-count: 1;
            	animation-name: zoomIn;
            	animation-duration: 1s;
            	animation-iteration-count: 1;
            }
            /*背景图由大到小出现*/
            #bg4:target{
            	z-index: 100;
            	-webkit-animation-name: zoomOut;
            	-webkit-animation-duration: 1s;
            	-webkit-animation-iteration-count: 1;
            	-moz-animation-name: zoomOut;
            	-moz-animation-duration: 1s;
            	-moz-animation-iteration-count: 1;
            	-ms-animation-name: zoomOut;
            	-ms-animation-duration: 1s;
            	-ms-animation-iteration-count: 1;
            	-o-animation-name: zoomOut;
            	-o-animation-duration: 1s;
            	-o-animation-iteration-count: 1;
            	animation-name: zoomOut;
            	animation-duration: 1s;
            	animation-iteration-count: 1;
            }
            /*背景图旋转出现*/
            #bg5:target{
            	z-index: 100;
            	-webkit-animation-name: rotate;
            	-webkit-animation-duration: 1s;
            	-webkit-animation-iteration-count: 1;
            	-moz-animation-name: rotate;
            	-moz-animation-duration: 1s;
            	-moz-animation-iteration-count: 1;
            	-ms-animation-name: rotate;
            	-ms-animation-duration: 1s;
            	-ms-animation-iteration-count: 1;
            	-o-animation-name: rotate;
            	-o-animation-duration: 1s;
            	-o-animation-iteration-count: 1;
            	animation-name: rotate;
            	animation-duration: 1s;
            	animation-iteration-count: 1;
            }
            /*、设置不显示的背景图层级*/
            /* Not Target */
            .bg:not(:target){
            	-webkit-animation-name: notTarget;
            	-webkit-animation-duration: 1s;
            	-webkit-animation-iteration-count: 1;
            	-moz-animation-name: notTarget;
            	-moz-animation-duration: 1s;
            	-moz-animation-iteration-count: 1;
            	-ms-animation-name: notTarget;
            	-ms-animation-duration: 1s;
            	-ms-animation-iteration-count: 1;
            	-o-animation-name: notTarget;
            	-o-animation-duration: 1s;
            	-o-animation-iteration-count: 1;
            	animation-name: notTarget;
            	animation-duration: 1s;
            	animation-iteration-count: 1;
            }
    	</style>
    </head>
    <body>
        <div class="slider">
            <ul class="clearfix">
            	<li><a href="#bg1">Hipster Fashion Haircut </a></li>
        		<li><a href="#bg2">Cloud Computing Services & Consulting</a></li>
        		<li><a href="#bg3">My haire is sooo fantastic!</a></li>
        		<li><a href="#bg4">Eat healthy & excersice!</a></li>
        		<li><a href="#bg5">Lips so kissable I could die ...</a></li>
        	</ul>
        </div>
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg1.jpg" alt="" class="bg slideLeft" id="bg1" />
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg2.jpg" alt="" class="bg slideBottom" id="bg2" />
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg3.jpg" alt="" class="bg zoomIn" id="bg3" />
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg4.jpg" alt="" class="bg zoomOut" id="bg4" />
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg5.jpg" alt="" class="bg rotate" id="bg5" />
    </body>
</html>

你可能感兴趣的:(学习,css3,切换背景图像)

  • 情绪觉察日记第37天 露露_e800
    今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • 铭刻于星（四十二） 随风至
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • 学点心理知识，呵护孩子健康 静候花开_7090
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
  • ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值） 研学随笔 arcgis经验分享
    我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
  • 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
  • 回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录leetcode算法职场和发展
    重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
  • Python数据分析与可视化实战指南 William数据分析 pythonpython数据
    在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
  • 2019-12-22-22:30 涓涓1016
    今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的
  • 将cmd中命令输出保存为txt文本文件 落难Coder Windowscmdwindow
    最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再
  • 基于社交网络算法优化的二维最大熵图像分割 智能算法研学社（Jack旭） 智能优化算法应用图像分割算法php开发语言
    智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码文章目录智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码1.前言2.二维最大熵阈值分割原理3.基于社交网络优化的多阈值分割4.算法结果：5.参考文献：6.Matlab代码摘要：本文介绍基于最大熵的图像分割，并且应用社交网络算法进行阈值寻优。1.前言阅读此文章前，请阅读《图像分割：直方图区域划分及信息统计介绍》htt
  • SQL Server_查询某一数据库中的所有表的内容 qq_42772833 SQLServer数据库sqlserver
    1.查看所有表的表名要列出CrabFarmDB数据库中的所有表（名），可以使用以下SQL语句：USECrabFarmDB;--切换到目标数据库GOSELECTTABLE_NAMEFROMINFORMATION_SCHEMA.TABLESWHERETABLE_TYPE='BASETABLE';对这段SQL脚本的解释：SELECTTABLE_NAME：这个语句的作用是从查询结果中选择TABLE_NAM
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • 探索OpenAI和LangChain的适配器集成：轻松切换模型提供商 nseejrukjhad langchaineasyui前端python
    #探索OpenAI和LangChain的适配器集成：轻松切换模型提供商##引言在人工智能和自然语言处理的世界中，OpenAI的模型提供了强大的能力。然而，随着技术的发展，许多人开始探索其他模型以满足特定需求。LangChain作为一个强大的工具，集成了多种模型提供商，通过提供适配器，简化了不同模型之间的转换。本篇文章将介绍如何使用LangChain的适配器与OpenAI集成，以便轻松切换模型提供商
  • 使用LLaVa和Ollama实现多模态RAG示例 llzwxh888 python人工智能开发语言
    本文将详细介绍如何使用LLaVa和Ollama实现多模态RAG（检索增强生成），通过提取图像中的结构化数据、生成图像字幕等功能来展示这一技术的强大之处。安装环境首先，您需要安装以下依赖包：!pipinstallllama-index-multi-modal-llms-ollama!pipinstallllama-index-readers-file!pipinstallunstructured!p
  • GitHub上克隆项目 bigbig猩猩 github
    从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Pythonpython开发语言大数据数据分析数据挖掘
    大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
  • 人工智能时代，程序员如何保持核心竞争力？ jmoych 人工智能
    随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 番茄西红柿叶子病害分类数据集12882张11类别 futureflsl 数据集分类数据挖掘人工智能
    数据集类型：图像分类用，不可用于目标检测无标注文件数据集格式：仅仅包含jpg图片，每个类别文件夹下面存放着对应图片图片数量(jpg文件个数)：12882分类类别数：11类别名称:["Bacterial_Spot_Bacteria","Early_Blight_Fungus","Healthy","Late_Blight_Water_Mold","Leaf_Mold_Fungus","Powdery
  • 阶段总结反思 轻争
    马上就要进入10月份了，今天做一下前段时间的总结和反思。前段时间，日更、英语、健身、护肤坚持的比较好。阅读、书法坚持的不好。1.中间被迫停更半个多月，其余时间一直在坚持日更挑战。偶尔也有不想写的时候，就做一下摘抄。因为阅读（输入）没跟上来，所以写作（输出）质量有待进一步加强。2.英语做到了一周至少学习5天，每次不少于30分钟，但是小班课没有跟上更新速度，下一步要争取利用零碎时间补听小班课。3.减肥
  • 01-Git初识 Meereen Gitgit
    01-Git初识概念：一个免费开源，分布式的代码版本控制系统，帮助开发团队维护代码作用：记录代码内容。切换代码版本，多人开发时高效合并代码内容如何学：个人本机使用：Git基础命令和概念多人共享使用：团队开发同一个项目的代码版本管理Git配置用户信息配置：用户名和邮箱，应用在每次提交代码版本时表明自己的身份命令：查看git版本号git-v配置用户名gitconfig--globaluser.name
  • ARM驱动学习之基础小知识 JT灬新一 ARM嵌入式arm开发学习
    ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
  • ARM驱动学习之5 LEDS驱动 JT灬新一 嵌入式C底层arm开发学习单片机
    ARM驱动学习之5LEDS驱动知识点：•linuxGPIO申请函数和赋值函数–gpio_request–gpio_set_value•三星平台配置GPIO函数–s3c_gpio_cfgpin•GPIO配置输出模式的宏变量–S3C_GPIO_OUTPUT注意点：DRIVER_NAME和DEVICE_NAME匹配。实现步骤：1.加入需要的头文件：//Linux平台的gpio头文件#include//三
  • ARM驱动学习之4小结 JT灬新一 嵌入式C++arm开发学习linux
    ARM驱动学习之4小结#include#include#include#include#include#defineDEVICE_NAME"hello_ctl123"MODULE_LICENSE("DualBSD/GPL");MODULE_AUTHOR("TOPEET");staticlonghello_ioctl(structfile*file,unsignedintcmd,unsignedlo
  • 展现思维导图魅力，不断挖掘人生宝藏 思维导图讲师Mandy
    第13期最强思维导图训练营已经结束一周了，但是我依旧是感觉所有学员还在努力的学习，这些学员中有教师、学生、白领、公务员、宝妈等等，只要你努力，只要你想改变自己，任何行业，任何岗位都可以参与进来，28天足以让你见成效，在这28天中，我们的学员不仅仅是收获了一枚毕业证，最重要的是让自己的思维方式得到升级，今天的你为自己投资，明天的你就会感谢你今天的付出，我们来听一听来自13期最强思维导图训练营优秀学员
  • VMware Workstation 11 或者 VMware Player 7安装MAC OS X 10.10 Yosemite iwindyforest vmwaremac os10.10workstationplayer
    最近尝试了下VMware下安装MacOS 系统， 安装过程中发现网上可供参考的文章都是VMware Workstation 10以下， MacOS X 10.9以下的文章， 只能提供大概的思路， 但是实际安装起来由于版本问题， 走了不少弯路， 所以我尝试写以下总结， 希望能给有兴趣安装OSX的人提供一点帮助。     写在前面的话： 其实安装好后发现， 由于我的th
  • 关于《基于模型驱动的B/S在线开发平台》源代码开源的疑虑？ deathwknight JavaScriptjava框架
    本人从学习Java开发到现在已有10年整，从一个要自学 java买成javascript的小菜鸟，成长为只会java和javascript语言的老菜鸟（个人邮箱：[email protected]） 一路走来，跌跌撞撞。用自己的三年多业余时间，瞎搞一个小东西（基于模型驱动的B/S在线开发平台，非MVC框架、非代码生成）。希望与大家一起分享，同时有许些疑虑，希望有人可以交流下 平台
  • 如何把maven项目转成web项目 Kai_Ge mavenMyEclipse
    创建Web工程，使用eclipse ee创建maven web工程 1.右键项目,选择Project Facets,点击Convert to faceted from 2.更改Dynamic Web Module的Version为2.5.(3.0为Java7的,Tomcat6不支持). 如果提示错误,可能需要在Java Compiler设置Compiler compl
  • 主管？？？ Array_06 工作
    转载：http://www.blogjava.net/fastzch/archive/2010/11/25/339054.html 很久以前跟同事参加的培训，同事整理得很详细，必须得转！ 前段时间，公司有组织中高阶主管及其培养干部进行了为期三天的管理训练培训。三天的课程下来，虽然内容较多，因对老师三天来的课程内容深有感触，故借着整理学习心得的机会，将三天来的培训课程做了一个
  • python内置函数大全 2002wmj python
    最近一直在看python的document，打算在基础方面重点看一下python的keyword、Build-in Function、Build-in Constants、Build-in Types、Build-in Exception这四个方面，其实在看的时候发现整个《The Python Standard Library》章节都是很不错的，其中描述了很多不错的主题。先把Build-in Fu
  • JSP页面通过JQUERY合并行 357029540 JavaScriptjquery
    在写程序的过程中我们难免会遇到在页面上合并单元行的情况，如图所示 如果对于会的同学可能很简单，但是对没有思路的同学来说还是比较麻烦的，提供一下用JQUERY实现的参考代码 function mergeCell(){         var trs = $("#table tr"); &nb
  • Java基础 冰天百华 java基础
    学习函数式编程 package base; import java.text.DecimalFormat; public class Main { public static void main(String[] args) { // Integer a = 4; // Double aa = (double)a / 100000; // Decimal
  • unix时间戳相互转换 adminjun 转换unix时间戳
    如何在不同编程语言中获取现在的Unix时间戳(Unix timestamp)？ Java time JavaScript Math.round(new Date().getTime()/1000) getTime()返回数值的单位是毫秒 Microsoft .NET / C# epoch = (DateTime.Now.ToUniversalTime().Ticks - 62135
  • 作为一个合格程序员该做的事 aijuans 程序员
    作为一个合格程序员每天该做的事 1、总结自己一天任务的完成情况 最好的方式是写工作日志，把自己今天完成了什么事情，遇见了什么问题都记录下来，日后翻看好处多多 2、考虑自己明天应该做的主要工作 把明天要做的事情列出来，并按照优先级排列，第二天应该把自己效率最高的时间分配给最重要的工作 3、考虑自己一天工作中失误的地方，并想出避免下一次再犯的方法 出错不要紧，最重
  • 由html5视频播放引发的总结 ayaoxinchao html5视频video
    前言   项目中存在视频播放的功能，前期设计是以flash播放器播放视频的。但是现在由于需要兼容苹果的设备，必须采用html5的方式来播放视频。我就出于兴趣对html5播放视频做了简单的了解，不了解不知道，水真是很深。本文所记录的知识一些浅尝辄止的知识，说起来很惭愧。   视频结构   本该直接介绍html5的<video>的，但鉴于本人对视频
  • 解决httpclient访问自签名https报javax.net.ssl.SSLHandshakeException: sun.security.validat bewithme httpclient
         如果你构建了一个https协议的站点，而此站点的安全证书并不是合法的第三方证书颁发机构所签发，那么你用httpclient去访问此站点会报如下错误   javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path bu
  • Jedis连接池的入门级使用 bijian1013 redisredis数据库jedis
    Jedis连接池操作步骤如下：         a.获取Jedis实例需要从JedisPool中获取；         b.用完Jedis实例需要返还给JedisPool；         c.如果Jedis在使用过程中出错，则也需要还给JedisPool； packag
  • 变与不变 bingyingao 不变变亲情永恒
    变与不变    周末骑车转到了五年前租住的小区，曾经最爱吃的西北面馆、江西水饺、手工拉面早已不在，    各种店铺都换了好几茬，这些是变的。    三年前还很流行的一款手机在今天看起来已经落后的不像样子。    三年前还运行的好好的一家公司，今天也已经不复存在。    一座座高楼拔地而起，
  • 【Scala十】Scala核心四：集合框架之List bit1129 scala
    Spark的RDD作为一个分布式不可变的数据集合，它提供的转换操作，很多是借鉴于Scala的集合框架提供的一些函数，因此，有必要对Scala的集合进行详细的了解   1. 泛型集合都是协变的，对于List而言，如果B是A的子类，那么List[B]也是List[A]的子类，即可以把List[B]的实例赋值给List[A]变量   2. 给变量赋值(注意val关键字，a，b
  • Nested Functions in C bookjovi cclosure
      Nested Functions 又称closure，属于functional language中的概念，一直以为C中是不支持closure的，现在看来我错了，不过C标准中是不支持的，而GCC支持。   既然GCC支持了closure，那么 lexical scoping自然也支持了，同时在C中label也是可以在nested functions中自由跳转的
  • Java-Collections Framework学习与总结-WeakHashMap BrokenDreams Collections
            总结这个类之前，首先看一下Java引用的相关知识。Java的引用分为四种：强引用、软引用、弱引用和虚引用。         强引用：就是常见的代码中的引用，如Object o = new Object();存在强引用的对象不会被垃圾收集
  • 读《研磨设计模式》-代码笔记-解释器模式-Interpret bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 解释器（Interpreter）模式的意图是可以按照自己定义的组合规则集合来组合可执行对象 * * 代码示例实现XML里面1.读取单个元素的值 2.读取单个属性的值 * 多
  • After Effects操作&快捷键 cherishLC After Effects
    1、快捷键官方文档 中文版：https://helpx.adobe.com/cn/after-effects/using/keyboard-shortcuts-reference.html 英文版：https://helpx.adobe.com/after-effects/using/keyboard-shortcuts-reference.html 2、常用快捷键
  • Maven 常用命令 crabdave maven
    Maven 常用命令   mvn archetype:generate mvn install mvn clean mvn clean complie mvn clean test mvn clean install mvn clean package mvn test mvn package mvn site   mvn dependency:res
  • shell bad substitution daizj shell脚本
    #!/bin/sh /data/script/common/run_cmd.exp 192.168.13.168 "impala-shell -islave4 -q 'insert OVERWRITE table imeis.${tableName} select ${selectFields}, ds, fnv_hash(concat(cast(ds as string), im
  • Java SE 第二讲（原生数据类型 Primitive Data Type） dcj3sjt126com java
    Java SE  第二讲： 1.   Windows: notepad, editplus, ultraedit, gvim Linux: vi, vim, gedit 2.   Java 中的数据类型分为两大类： 1）原生数据类型  （Primitive Data Type） 2）引用类型（对象类型）  （R
  • CGridView中实现批量删除 dcj3sjt126com PHPyii
    1，CGridView中的columns添加 array( 'selectableRows' => 2, 'footer' => '<button type="button" onclick="GetCheckbox();" style=&
  • Java中泛型的各种使用 dyy_gusi java泛型
    Java中的泛型的使用：1.普通的泛型使用 在使用类的时候后面的<>中的类型就是我们确定的类型。 public class MyClass1<T> {//此处定义的泛型是T private T var; public T getVar() { return var; } public void setVa
  • Web开发技术十年发展历程 gcq511120594 Web浏览器数据挖掘
    回顾web开发技术这十年发展历程： Ajax 03年的时候我上六年级，那时候网吧刚在小县城的角落萌生。传奇，大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩，然后接下来的一个小时我一直在，注，册，账，号。 彼时网吧用的512k的带宽，注册的时候，填了一堆信息，提交，页面跳转，嘣，”您填写的信息有误，请重填”。然后跳转回注册页面，以此循环。我现在时常想，如果当时a
  • openSession()与getCurrentSession()区别： hetongfei javaDAOHibernate
    来自 http://blog.csdn.net/dy511/article/details/6166134 1.getCurrentSession创建的session会和绑定到当前线程,而openSession不会。 2. getCurrentSession创建的线程会在事务回滚或事物提交后自动关闭,而openSession必须手动关闭。 这里getCurrentSession本地事务(本地
  • 第一章 安装Nginx+Lua开发环境 jinnianshilongnian nginxluaopenresty
    首先我们选择使用OpenResty，其是由Nginx核心加很多第三方模块组成，其最大的亮点是默认集成了Lua开发环境，使得Nginx可以作为一个Web Server使用。借助于Nginx的事件驱动模型和非阻塞IO，可以实现高性能的Web应用程序。而且OpenResty提供了大量组件如Mysql、Redis、Memcached等等，使在Nginx上开发Web应用更方便更简单。目前在京东如实时价格、秒
  • HSQLDB In-Process方式访问内存数据库 liyonghui160com
        HSQLDB一大特色就是能够在内存中建立数据库，当然它也能将这些内存数据库保存到文件中以便实现真正的持久化。   先睹为快！   下面是一个In-Process方式访问内存数据库的代码示例：     下面代码需要引入hsqldb.jar包 （hsqldb-2.2.8）   import java.s
  • Java线程的5个使用技巧 pda158 java数据结构
    Java线程有哪些不太为人所知的技巧与用法？ 　　萝卜白菜各有所爱。像我就喜欢Java。学无止境，这也是我喜欢它的一个原因。日常 工作中你所用到的工具，通常都有些你从来没有了解过的东西，比方说某个方法或者是一些有趣的用法。比如说线程。没错，就是线程。或者确切说是Thread这个类。当我们在构建高可扩展性系统的时候，通常会面临各种各样的并发编程的问题，不过我们现在所要讲的可能会略有不同。
  • 开发资源大整合：编程语言篇——JavaScript（1） shoothao JavaScript
    概述：本系列的资源整合来自于github中各个领域的大牛，来收藏你感兴趣的东西吧。     程序包管理器   管理javascript库并提供对这些库的快速使用与打包的服务。 Bower - 用于web的程序包管理。 component - 用于客户端的程序包管理，构建更好的web应用程序。 spm - 全新的静态的文件包管
  • 避免使用终结函数 vahoa.ma javajvmC++
    终结函数（finalizer）通常是不可预测的，常常也是很危险的，一般情况下不是必要的。使用终结函数会导致不稳定的行为、更差的性能，以及带来移植性问题。不要把终结函数当做C++中的析构函数（destructors）的对应物。       我自己总结了一下这一条的综合性结论是这样的： 1）在涉及使用资源，使用完毕后要释放资源的情形下，首先要用一个显示的方
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他