展开

关键词

css+js

层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。[5] CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

相关内容

云服务器

云服务器

稳定、安全、弹性、高性能的云端计算服务,实时满足您的多样性业务需求
  • CSS+JS实现tab标签切换

    实现tab标签切换比较简单,下面先看看我实现的效果:?我主要实现了:1、tab之间的相互切换;2、显示选中的tab下面看看实现代码:css:html,body,div{ font-size: 12px; font-family:Arial;}.tab-ui{ width: 400px; height: 300px; position: relative;}.tab-title{ border-top-right-radius:8px; float: left; border: solid 1px #7EABCD; background: #c5dbec; padding: 5px; font-weight: bold; color: #ffffff; margin: 1px;}.tab-title:hover{ cursor: pointer;}.tab-title-active{ background: #7EABCD;}.content{ width: 100%; height: 100%; position: absolute; top: 27px; left: 1px;}.tab-content{ padding: 10px; border: solid 1px #c5dbec;} js: function show(total,active){ for(var i=1;i
    来自:
    浏览:1990
  • css+js实现左右滑动卡片组件

    最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。先上效果:Kapture 2018-12-13 at 19.47.23.gifdemo地址:https:kiroroyoyo.github.iocardTransformindex.html实现过程1. 结构与样式结构:卡片分前后两排,每列插入10个div结点,以便做左右位移效果。样式:设置每一列都恰好好在中间位置(或中间位置附近),如下所示。a. 前排(cardFrond)相对于视口的初始位置(left:-255.5%;):1544703867_55_w1890_h544.pngb. 后排(backFrond)相对于视口的初始位置(left:-228.3%;): 1544704062_75_w1580_h566.png2. 无限滚动原理由于这里的停止位置是固定的,前排永远是当前卡片相对于视口居中,后排永远是两个卡片相对于视口居中,且每个卡片是一样的,所以当卡片列表向前或向右移动到一个目标位置时,都将列表重置为初始位置继续滚动。如下图以前排卡片为例: 1544756683_12_w2480_h1496.png所以当滚动停止后会统一将列表样式设置为transform: translateX(0)。而对于用户这一操作是无感知的,认为已经滑动到了新的位置。3.滑动过程实现a. 目标位移与帧位移为了做出滑动后到停留位置的缓动效果,所以当用户左右滑动屏幕时,会记录滑动距离,计算出卡片该到的目标位移位置,目标位移位置是有规则的,因为这里有10张卡片均分宽度,位置必须是(100%10)的整数倍,例如-40%、-30%、……40%,这样才能保证目标位置与初始位置相重合。目标位移代码片段onDocumentMouseUp : function(e){ 如果是点击事件 不设置移动 if (!this.fingerTouch) return; this.moveDirect = this.lon > 0 ? 1 : -1; this.transNum = this.lon10 + this.moveDirect; this.lon = Math.round(this.transNum) * 10; this.fingerTouch = false; }记录了目标位移后,每一帧会以一定的帧位移不断靠近目标位移,使其在手指离开屏幕时仍有慢慢滑动到目标位置的缓动效果。此时需要判断当前位置是否大于40%或者小于-40%,若超过这个极限值需要重设目标位移及帧位移,使其在极限值内。animate: function(){ this.prePos += (this.lon - this.prePos) * 0.1; if (this.prePos > 40) { this.lon = this.lon - 40; this.prePos = this.prePos - 40; }else if (this.prePos < -40) { this.lon = this.lon + 40; this.prePos = this.prePos + 40; } 判断是否到达了目标位置 if (Math.abs(this.prePos - this.lon) < 0.01 && Math.abs(this.lon) > 0.01 && (!this.fingerTouch)) { this.ani_move = false; this.prePos = 0; this.frondCard.style = transform: translateX(+ this.prePos +%); this.backCard.style = transform: translateX(+ this.prePos +%); }else{ this.frondCard.style = transform: translateX(+ this.prePos +%); this.backCard.style = transform: translateX(+ (-this.prePos) +%); requestAnimationFrame(this.animate.bind(this)); } },b. 连续滑动判断当在上次滑动动画还未播放结束时用户又进行了第二次滑动时,需要执行一下操作:    1). 判断滑动时机处于上次滑动手指已离开屏幕但动画还未结束,此时需要记录两个flag,一个是ani_move,记录动画是否仍在进行,fingerTouch记录手指是否停留屏幕。    2). 判断第二次滑动是否与第一次不同方向,若不同向需重置上次帧位移为0。以免上次帧位移太大影响移动方向。1)与2)代码片段:if( this.ani_move && this.fingerTouch == false) { 判断是否不同向 if (((e.clientX - prex) > 0 ? 1: -1) == -this.moveDirect ) { this.lon = 0; this.prePos = 0; this.moveDirect = -this.moveDirect; }}3). 取消第二次滑动时的动画播放和位移重置 若是上次动画未结束不需要再次启动动画和重置目标位移if( this.ani_move && this.fingerTouch == false) {}else { this.lon = 0; cardAnimate.animate();}写在最后目前这个滑动效果只能针对卡片相同,停留位置固定的情况,因为需要做到位置重合。使用css transform来做无限滚动的效果,可以避免改变dom结点带来的页面重新布局。下图是chrome cpu6倍减速调试效果,没有触发layout,FPS基本维持在60左右。1544769547_10_w2300_h1748.png代码地址:https:github.comkiroroyoyocardTransform
    来自:
    浏览:6531
  • CSS+JS实现图片集展示

    首先,说说实现的效果:1、图片的展示与翻页;2、点击图片放大图片。实现的效果如下所示:?初始化和第一张?中间的图片?最后一张图片?单击放大显示图片详细与信息实现的内容很简单,是常规图片的展示方式,下面说说我的实现思路。1、图片的展示与翻页a、图片展示图片展示是通过标签实现的:                                                                                                             b、翻页 翻页是通过updateImage这个函数实现的,传递参数为type,判断操作时“上一张”还是“下一张”,updateImage函数如下: function updateImage(type){ if(type===prev){ if(imgIndex>1){ imgIndex=imgIndex-1; } } else{ if(imgIndex1){ imgIndex=imgIndex-1; } } else{ if(imgIndex
    来自:
    浏览:642
  • 广告
    关闭

    腾讯极客挑战赛-寻找地表最强极客

    报名比赛即有奖,万元礼品和奖金,等你来赢!

  • CSS+JS实现图片集展示(续)

    上一篇文章里,我们实现了图片集的展示,在本文,对上一篇文章的内容作了封装,实现效果上作了一些优化,具体的思路我就不再赘述,下面将我的代码贴出来,以供搭建参考。1、imglist.csshtml, body, .modal-bg { height: 100%; margin: 0; padding: 0; font-size: 13px; font-weight: bold; color: #fff;}.modal-bg{ position: absolute; left: 0px; top: 0px; width: 100%; background: #48525e; opacity: 0.4; z-index: 10;}.modal{ position: relative; z-index: 99; opacity: 1; top: 15%; left: 40%; width: 600px; height: 400px;}.modal .title .tips-bg{ position: absolute; bottom: 0px; left: 0px; background: #48525e; width: 100%; height: 50px; opacity: 0.8;}.modal .title .tips{ position: absolute; bottom: 13px; left: 10px; font-family: Arial; font-weight: bold; font-size: 20px;}.modal .title .close{ background: url(..imgclose.png) no-repeat; width: 27px; height: 27px; position: absolute; top: 5px; right: 5px;}.modal .title .close:hover{ cursor: pointer;}.container{ position: absolute; top: 200px; text-align: center; width: 100%; z-index: 5;}.image-list{ margin-left: 40%; position: relative;}#prev{ display: none; width: 45px; height: 50px; background: url(..imgprev.png);}#next{ width: 45px; height: 50px; background: url(..imgnext.png);}#prev:hover,#next:hover{ cursor: pointer;}.page-num{ position: absolute; right: 8px; bottom: 15px; border: 2px solid #fff; font-weight: bold; background: #666666; color: #fff; border-radius:15px; text-align: center; padding: 3px; width: 15px; font-size: 13px;}.thumb-a{ display:inline-block; padding:4px; margin:0 0.5rem 1rem 0.5rem 1rem; line-height:0; -webkit-transition:background-color 0.1s ease-out; -moz-transition:background-color 0.1s ease-out; -o-transition:background-color 0.1s ease-out; transition:background-color 0.1s ease-out; -webkit-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; border-radius:6px}.thumb-a:hover{ background-color:#4ae; cursor: pointer;}.thumb-a-hide{ display: none;}.thumb-img{ -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px} 2、jquery.imglist.js (function($){ $.fn.imgList = function(options){ var defaults = {}; var options = $.extend(defaults, options); var container=$(this); var imgUrls = options.imgurls; var autoPlay = options.autoplay; var thumbWidth = options.thumbwidth, thumbHeight = options.thumbheight, detailWidth = options.detailwidth,detailHeight = options.detailheight; var length,imgIndex=1; length = imgUrls.length; var play; var imgList = $().addClass(image-list).css(width,thumbWidth+px); $(.image-list).live(mouseenter,function(){ play = clearInterval(play); divCtrl.show(); }); $(.image-list).live(mouseleave,function(){ play = setInterval(playImg,3000); divCtrl.hide(); }); var divPageNum = $().addClass(page-num).html(imgIndex); divPageNum.appendTo(imgList); var divCtrl = $().css(width,100%).css(height,100%).hide(); var divPrev = $().attr(id,prev), divNext = $().attr(id,next); divPrev.css(position,absolute), divNext.css(position,absolute); divPrev.css(top,(thumbHeight2-25)+px), divNext.css(top,(thumbHeight2-25)+px); divPrev.css(left,-10px), divNext.css(right,-12px); divPrev.on(click,function(){ if(imgIndex>1){ imgIndex=imgIndex-1; } for(var i=0;i
    来自:
    浏览:326
  • CSS+JS实现图片集展示(二)

    题目与上面的两篇文章有所重复,但是内容与上两篇上有所区别,本文中,实现的图片集展示的效果为:1、详细图和缩略图的同步展示;2、图片的自动播放;3、显示图片的缩影图的焦点显示与别的图片的遮盖显示;4、鼠标移动至详图显示图片控制控件。具体效果图如下:?初始化或者第一张状态?中间状态?最后一张状态这种方式的图片展示一般用的图片新闻或者类似的东西中比较常见,例如百度首页的新闻就是用类似的方式来展示的,如下:?百度首页新闻下面将我实现的代码贴出来,以供大家参考。1、showimg.csshtml, body{ height: 100%; margin: 0; padding: 0; text-align: center;}#prev{ position: absolute; top: 125px; left: 0px; width: 45px; height: 50px; background: url(..imgprev.png);}#next{ position: absolute; top: 125px; right: 0px; width: 45px; height: 50px; background: url(..imgnext.png);}#prev:hover,#next:hover{ cursor: pointer;}.detail-div{ position: relative; display:inline-block; padding:4px; margin:0 0.5rem 1rem 0.5rem 1rem; line-height:0; -webkit-transition:background-color 0.1s ease-out; -moz-transition:background-color 0.1s ease-out; -o-transition:background-color 0.1s ease-out; transition:background-color 0.1s ease-out; -webkit-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; border-radius:6px;}.thumb-div{ position: absolute; bottom: -110px; left: 4px; background: #555;}.thumb{ margin-left: 7px; margin-top: 5px; margin-bottom: 5px; float: left; position: relative;}.thumb-img{ -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px}.thumb-active{ border: 2px solid #fff; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px; height: 100px;}.thumb-modal{ background: #141414; opacity: 0.5; filter:alpha(opacity=50); position: absolute; left: 0px; bottom: 2px; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px;}.thumb-modal-hide{ display: none;} 2、juqery.showimg.js (function($){ $.fn.showImg = function(options){ var defaults = {}; var options = $.extend(defaults, options); var container=$(this); var imgUrls = options.imgUrls; var width = options.width,height = options.height,thumbHeight = options.thumbHeight; var autoPlay = options.autoplay; container.css(width,width+px); var imgIndex = 1,length = imgUrls.length; var play; ** * 图片详情 * var detailDiv = $().addClass(detail-div).appendTo(container); var ctrlDiv = $().appendTo(detailDiv).hide(); var prevA = $().attr(id,prev).appendTo(ctrlDiv).hide(), nextA = $().attr(id,next).appendTo(ctrlDiv); $(.detail-div).live(mouseenter,function(){ play = clearInterval(play); ctrlDiv.show(); }); $(.detail-div).live(mouseleave,function(){ play = setInterval(playImg,3000); ctrlDiv.hide(); }); var detailImgA = $().appendTo(detailDiv); var detailImg = $().attr(id,detailImg) .attr(width,width) .attr(height,height) .attr(src,imgdemopageimage-+imgIndex+.jpg) .appendTo(detailImgA); ** * 缩影图片 * var thumbDiv = $().addClass(thumb-div) .appendTo(container) .css(width,width+px); addThumbImgs(); prevA.on(click,function(){ imgCtrlFun(prev); }); nextA.on(click,function(){ imgCtrlFun(next); }); if(autoPlay){ play = setInterval(playImg,3000); } function playImg(){ if(imgIndex===length){ imgIndex=0; } nextA.click(); } ** * 图片控制 * @param type * function imgCtrlFun(type){ if(type===prev){ if(imgIndex>1){ imgIndex= imgIndex-1; } } else{ if(imgIndex
    来自:
    浏览:1117
  • GPU 云服务器

    腾讯GPU 云服务器是提供 GPU 算力的弹性计算服务,具有超强的并行计算能力,作为 IaaS 层的尖兵利器,服务于深度学习训练、科学计算、图形图像处理、视频编解码等场景……
    来自:
  • FPGA 云服务器

    腾讯FPGA云服务器是基于FPGA硬件可编程加速的弹性计算服务,您只需几分钟就可以获取并部署您的FPGA实例。结合IP市场提供的图片,视频,基因等相关领域的计算解决方案,提供无与伦比的计算加速能力……
    来自:
  • 专用宿主机

    专用宿主机(CDH)提供用户独享的物理服务器资源,满足您资源独享、资源物理隔离、安全、合规需求。专用宿主机搭载了腾讯云虚拟化系统,购买之后,您可在其上灵活创建、管理多个自定义规格的云服务器实例,自主规划物理资源的使用。
    来自:
  • 黑石物理服务器2.0

    腾讯黑石物理服务器2.0(CPM)是一种包年包月的裸金属云服务,为您提供云端独享的高性能、无虚拟化的、安全隔离的物理服务器集群。使用该服务,您只需根据业务特性弹性伸缩物理服务器数量,获取物理服务器的时间将被缩短至分钟级。
    来自:
  • 容器服务

    腾讯云容器服务(Tencent Kubernetes Engine ,TKE)基于原生kubernetes提供以容器为核心的、高度可扩展的高性能容器管理服务。腾讯云容器服务完全兼容原生 kubernetes API ,扩展了腾讯云的云硬盘、负载均衡等 kubernetes 插件,为容器化的应用提供高效部署、资源调度、服务发现和动态伸缩等一系列完整功能,解决用户开发、测试及运维过程的环境一致性问题,提高了大规模容器集群管理的便捷性,帮助用户降低成本,提高效率。容器服务提供免费使用,涉及的其他云产品另外单独计费。
    来自:
  • 弹性伸缩

    腾讯弹性伸缩(AS)为您提供高效管理计算资源的策略。您可设定时间周期性地执行管理策略或创建实时监控策略,来管理 CVM 实例数量,并完成对实例的环境部署,保证业务平稳顺利运行。弹性伸缩策略不仅能够让需求稳定规律的应用程序实现自动化管理,同时告别业务突增或CC攻击等带来的烦恼,对于每天、每周、每月使用量不停波动的应用程序还能够根据业务负载分钟级扩展。
    来自:
  • 云函数

    云函数(Serverless Cloud Function,SCF)是腾讯云为企业和开发者们提供的无服务器执行环境,帮助您在无需购买和管理服务器的情况下运行代码。您只需使用平台支持的语言编写核心代码并设置代码运行的条件,即可在腾讯云基础设施上弹性、安全地运行代码。SCF 是实时文件处理和数据处理等场景下理想的计算平台。
    来自:
  • 批量计算

    批量计算(Batch)是为有大数据计算业务的企业、科研单位等提供高性价比且易用的计算服务。批量计算可以根据用户提供的批处理规模,智能地管理作业和调动所其需的最佳资源……
    来自:
  • 消息队列 CMQ

    腾讯云消息队列(CMQ)是一种分布式消息队列服务,它能够提供可靠的基于消息的异步通信机制,能够将分布式部署的不同应用(或同一应用的不同组件)之间的收发消息,存储在可靠有效的 CMQ 队列中,防止消息丢失。CMQ 支持多进程同时读写,收发互不干扰,无需各应用或组件始终处于运行状态。
    来自:
  • 消息队列 CKafka

    CKafka(Cloud Kafka)是一个分布式的、高吞吐量、高可扩展性的消息系统,100%兼容开源 Kafka API(0.9版本)。Ckafka 基于发布/订阅模式,通过消息解耦,使生产者和消费者异步交互,无需彼此等待。Ckafka 具有数据压缩、同时支持离线和实时数据处理等优点,适用于日志压缩收集、监控数据聚合等场景。
    来自:
  • API 网关

    腾讯云 API 网关(API Gateway)是腾讯云推出的一种 API 托管服务,能提供 API 的完整生命周期管理,包括创建、维护、发布、运行、下线等。您可使用 API 网关封装自身业务,将您的数据、业务逻辑或功能安全可靠的开放出来,用以实现自身系统集成、以及与合作伙伴的业务连接。
    来自:
  • 微服务平台 TSF

    腾讯微服务平台(TSF)是一个围绕应用和微服务的 PaaS 平台,提供一站式应用全生命周期管理能力和数据化运营支持,提供多维度应用和服务的监控数据,助力服务性能优化。
    来自:
  • 对象存储

    腾讯云对象存储数据处理方案主要针对于存储于腾讯云对象存储COS中的数据内容进行处理加工,满足压缩、转码、编辑、分析等多种诉求,激活数据价值。
    来自:
  • 文件存储

    文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。CFS 可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云 CFS 的管理界面简单、易使用,可实现对现有应用的无缝集;按实际用量付费,为您节约成本,简化 IT 运维工作。
    来自:

相关视频

47秒

js中的睡眠排序

2分31秒

uni-app使用微信JS-SDK

19分51秒

Web前端框架通用技术 webpack5 18_去除项目里的死代码(无用的js和css代码) 学习猿

1分7秒

基于koa实现的微信JS-SDK调用Demo

10分50秒

javaweb项目实战 20-在前端使用JS批量验证用户注册 学习猿地

相关资讯

相关关键词

活动推荐

    运营活动

    活动名称
    广告关闭

    扫码关注云+社区

    领取腾讯云代金券