腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

前端之攻略

专栏作者

377

文章

803968

阅读量

37

订阅数

vue项目主题切换

主要的实现原理是，2套css样式，2套js文件，如果需要切换图片的情况也需要2套图片，页面上有个切换按钮，点击的时候切换css样式和js文件，以及切换图片，css文件切换时会立即起效，但是js没有效果，需要重新刷新下，采用的是点击按钮的时候直接reload,切换样式文件和js文件都在初始化时进行

2022-05-29

1.1K0

切换css主题

在html文件中修改css文件可以切换主题，不需要刷新页面 computed: { curTheme (){ return this . $store .

2021-12-28

1.7K0

vue cli3 引入外部字体

编程算法 node.js css

如果ps设计稿的字体在网页中没有对应的字体显示，要想跟设计稿效果一致要引入外部字体

2021-08-31

1.4K0

vue 中使用threejs

css 图像处理 javascript

1、安装threejs ：npm install three --save 2、页面引入：import * as THREE from "three"; 如果使用到 OrbitControls 和 CSS3DRenderer import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; import { CSS3DRenderer,CSS3DObject } from "three/examples/j

2020-07-21

6.5K2

bootstrap中表格固定头部：原

bootstrap jquery css javascript

使用chromatable在bootstrap中的使用，首先引用css样式与js <link rel="stylesheet" href="../../plugins/jquery.chromatable-1.3.0/css/style.css">

2019-04-04

9650

响应式状态时的jqprint打印原

最近需要打印，使用jqprint 进行打印，页面状态是电脑平板都能正常显示的响应式页面，打印时由于要打印在一个A4纸上，需要定义打印的宽度，并且点击打印的同时，需要修改页面的样式从而保证页面内容打印在A4纸张的范围内（点击打印前是响应式的，打印时是固定的宽度），主要代码如下： $("#printArea").css("width","295mm"); $(".row .col-md-6").removeClass("col-md-6").addClass("col-xs-6");

2019-04-04

1.5K0

mobiscroll日期插件使用原

特别注意如果需要含有秒，需要设置参数 timeFormat: 'HH:ii:ss',timeWheels: 'hhiiss',如果timeWheels: 'HHiiss', //24小时制

2019-04-04

1.2K0

css3选择器-选择范围原

(adsbygoogle = window.adsbygoogle || []).push({});

2019-04-04

6270

bootstrap 表格插件bootstrap-table的使用

最近找到一款比较好的表格插件bootstrap-table，根据名称我们可以看出是基于bootstrap框架下

2019-04-04

1.7K0

对话框css3实现方式原

(adsbygoogle = window.adsbygoogle || []).push({});

2019-04-04

7910

弹出框css技巧原

(adsbygoogle = window.adsbygoogle || []).push({});

2019-04-04

5.3K0

掌握jQuery插件开发这篇文章就够了转

在实际开发工作中，总会碰到像滚动，分页，日历等展示效果的业务需求，对于接触过jQuery以及熟悉jQuery使用的人来说，首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求。目前页面中常用的一些组件，都有多种jQuery插件可供选择，网络上也有很多专门收集jQuery插件的网站。利用jQuery插件确实可以给我们的开发工作带来便捷，但是如果只是会简单使用，而对其中的原理不甚了解，那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑。本文的目的就是可以快速了解jQuery插件的开发原理以及掌握jQuery开发的基本技能。进行jQuery插件开发前，首先要知道两个问题：什么是jQuery插件？jQuery插件如何使用？第一个问题，jQuery插件就是用来扩展jQuery原型对象的一个方法，简单来说就是jQuery插件是jQuery对象的一个方法。其实回答了第一个问题，也就知道第二个问题的答案了，jQuery插件的使用方式就是jQuery对象方法的调用。我们先看个例子：$("a").css("color","red")。我们知道每个jQuery对象都会包含jQuery中定义的DOM操作方法,这里使用$方法来选择a元素，返回一个a元素的jQuery对象，这个对象就可以使用jQuery中定义的DOM操作方法。那么jQuery对象是如何获取这些方法的呢？其实jQuery内部定义了一个jQuery.fn对象，查看jQuery源码可以发现jQuery.fn=jQuery.prototype，也就是说jQuery.fn对象是jQuery的原型对象,jQuery的DOM操作方法都在jQuery.fn对象上定义的，然后jQuery对象就可以通过原型继承这些方法。基础版jQuery插件知道了上面这些知识，我们就可以来写一个简单的jQuery插件。假如我现在需要一个jQuery插件用来改变标签内容颜色，就可以按下面的方式来实现这个插件： $.fn.changeStyle = function(colorStr){ this.css("color",colorStr); } 然后按下面的方式来使用插件： $("p").changeStyle("red"); 插件调用的时候，插件内部的this就是当前调用插件的jQuery对象，这样的话每个使用$()方法选择的标签，在调用changeStyle()插件时都会使用css()方法重设color样式。满足链式调用的jQuery插件链式调用时jQuery的一大特色，一个通用的插件应该遵循jQuery风格，满足链式调用要求。实现链式调用的方式也很简单： $.fn.changeStyle = function(colorStr){ this.css("color",colorStr); return this; } 然后使用的时候就可以链式调用其他方法了： $("p").changeStyle("red").addClass("red-color"); 实现链式调用的关键点就一行代码return this，插件中加了这行代码，那么在插件执行完之后，就会把当前的jQuery对象返回，然后就可以在插件方法后面继续调用其它jQuery方法。防止$符号污染的jQuery插件有很多js库都会使用$符号，虽然jQuery可以使用jQuery.noConflict()方法交出$符号的使用权，但是如果定义插件的时候，使用$.fn对象来定义的，那么这些插件使用的时候就会受到其它使用$变量的js库的影响。对于这种情况，我们可以使用立即执行函数通过传参的方式封装插件。形式如下： (function($){ $.fn.changeStyle = function(colorStr){ this.css("color",colorStr); return this; } })(jQuery); 因为使用了立即执行函数，所以此时的$只属于这个立即执行函数的函数作用域，这样就可以避免$符号的污染。可以接受参数的jQuery插件继续上面的例子，假如我还想为这个插件添加一个设置标签元素内容文字大小的功能，那么我可以这么来实现： (function($){ $.fn.changeStyle = function(colorStr，fontSize){ this.css("color",colorStr).css("fontSize",fontSize+"px"); return this; } })

2019-04-04

4040

css3 transition 原

css3 transition 需要4个参数 transition-property, transition-duration, transition-timing-function, and transition-delay。参数意思：（1）指定要添加效果的css属性（2）持续时间（3）效果的转速曲线（4）推迟执行的时间

2019-04-04

3180

css position：static 的使用

relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过top,bottom,left,right定位，并且可以通过z-index进行层次分级

2019-04-04

8290

蒙版css技巧原

(adsbygoogle = window.adsbygoogle || []).push({});

2019-04-04

5150

居中的文字在小屏幕下后面的换行原

(adsbygoogle = window.adsbygoogle || []).push({});

2019-04-04

5630

css文字居中原

注意上面的dt里面包含div,否则下面的样式vertical-align:middle;无效，因为dt是浮动的，在里面包含一个div就可以解决vertical-align:middle 无效的问题，

2019-04-04

3.3K0

谷歌浏览器不支持小于12px的解决方法原

<p class="secondp"><span>字体为10号</span></p>

2019-04-04

5050

手机拍照预览2种实现方式原

手机拍照并把图片设定特定尺寸，在网上找了一些资料，可以使用html5原生的方式也可以使用插件，现在分别按2种方式实现

2019-04-04

9880

CSS3 3D旋转立方体原

主要用到动画css3 animation,特别注意当完成正方体的过程中，每个面旋转时这个面的坐标系是跟着变换的，只是他们的相对位置不变，默认的变换基点是（50% 50% 0），我们可以使用transform-origin改变默认基点，也可以按默认的基点来变换，关于rotateX或者rotateY旋转角度的正负区分，是视线在x轴或者Y轴的+方向向负方向看，如果是顺时针则角度为正值，逆时针为负值，下面是按默认基点实现立方体的。

2019-04-04

1.2K0

点击加载更多

社区活动

腾讯技术创作狂欢月

“码”上创作 21 天，分 10000 元奖品池！

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态