展开菜单

原生javascript获取指定对象所有子孙元素集合的代码

不限制层级、不区分标签名、不区分样式名,通过原生javascript代码获取所有子元素,包括子元素的子元素(孙元素)的集合,可以通过定义一个数组,然后多次嵌套使用javascript的children属性获取子元素存储到数组来实现,代码很简单,效率不详! 代码示例 HTML代码 <div id="tddx-entry"> <p> <span></span> </p> <h2> <i></i> </h2> <h3&g...

通俗易懂的javascript动态创建svg的函数代码

js动态创建svg在制作网页时是经常使用到的,最简单最容易理解的用处就是如果需要多个相同的svg,如果一个一个地写<svg></svg>,即不好看,也多余,而动态创建,只需要创建一个,然后循环出来就可以了。 常规的动态创建svg var svgNS = 'http://www.w3.org/2000/svg'; //必须需要,否则可能会导致svg不显示 var svg = document.createElementNS(svgNS, svg); //因为需要命名空间,所以使用createElementNS var path = docume...

支持移动端图片放大缩小旋转的图片预览js插件viewer.js

支持移动端图片放大缩小旋转的图片预览js插件viewer.js

淘宝网宝贝详情里的图片,点击后可以弹窗预览,且支持触摸放大缩小,体验非常好,viewer.js插件就是款可以实现类似效果、功能完善的图片预览js插件,有纯js版本和jQuery版本。 viewer.js插件可以实现点击图片弹窗显示,PC端支持鼠标键盘移动、放大缩小,移动端支持触摸移动缩放等,还支持旋转(类似微博图片的旋转)、水平/垂直翻转、全屏幻灯片、缩略图、标题以及多种自定义事件等,另外还提供了多种回调函数。 viewer.js插件下载 纯JS版本:https://github.com/fengyuanchen/viewerj...

vue 绑定style显示背景图片background-image的方法代码

HTML标签使用style background-image属性添加背景图片,需要和vue双向绑定。 HTML代码 <div id="app"> <div class="pic" v-bind:style="{backgroundImage:'url('+ bg + ')'}"></div> </div> 这里需要注意的是: 在vue中background-image要用驼峰写法,写成backgroundImage(和在jquery里的写法一致); 结束不要加分号。 ...

javascript获取对象数组中指定对象属性的对象下标的方法findIndex()

一个对象数组,已知其中一个对象属性的某个属性值,然后通过该属性值获取其所属对象的对象下标。 简单地说就是通过指定对象属性值获取对象的下标,可以通过 javascript 的 findIndex() 方法实现。 findIndex() 方法的作用是传入一个函数条件,然后返回符合条件的数组的第一个元素的位置(下标)。 示例代码: var _name = 'tddx'; //已知属性值 var _object = [ { name: 'tddx', age: '10' }, { name: 'neirong', a...

javascript实现点击递增递减改变字体字号大小的代码

网页中常见的效果,点击按钮改变内容的字体显示大小,方便眼睛视力不同的人阅读,提高网页的用户体验。 实现方法也比较简单,通过js修改元素css的font-size属性。 实现代码 HTML代码: <a id="cut" href="javascript:void(0);">A-</a> <a id="add" href="javascript:void(0);">A+</a> <div id="entry"> 这里是内容 </div> Javascript代码...

纯CSS实现动态加载矩形边线的动画效果

纯CSS实现动态加载矩形边线的动画效果

制作web动画效果,通常会想到使用svg或者canvas甚至flash,其实一些简单的动画效果,使用css3属性transition就可以实现,比如动态显示矩形边框线的效果,实现原因是利用过渡效果时宽高显示的时间差。 示意图 实现代码 HTML代码: <div class="border"> </div> CSS代码: .border {position: relative; width:300px; height:300px;} .border:before, .border:afte...

单独调用百度编辑器UEditor视频上传组件的代码

有一个单独的视频设置字段,需要视频上传的功能,自己编写相关代码太麻烦,那么可以通过单独调用 UEditor 编辑器的视频上传组件来实现。 HTML代码 <div class="uploadvideo"> <input name="video" id="video" type="text" class="uplod_video" value="" /> <span class="btn">上传视频</span> </div> 引用UEditor编辑器相关文件 <!-- 配置文件 ...

微信小程序input组件点击输入时placeholder文字上移

微信小程序input组件点击输入时placeholder文字上移

微信小程序原生组件input文本输入框,点击聚焦后,placeholder占位符文字位置会向上编移,原因是input使用了box-sizing: border-box;样式的同时添加了上下内边距(padding)或上下外边距(margin),解决方法可以把box-sizing:border-box;或者上下内外边距去掉。 示例: wxml代码 <input type="text" confirm-type="search" placeholder-class="placeholder" placeholder="输入关键词搜索"/> wxs...

原生javascript实现tab切换效果的代码

Tab切换是网页制作中常用的效果,通过jquery很容易实现,使用原生javascript代码则稍微有点繁锁。 HTML代码: <div id="tabmenu"> <span class="current>普通会员</span> <span>超级会员</span> </div> <div id="tabbox"> <div class="item"> 普通会员权限 </div> <div class="item"> ...

天地图地图网页API浏览器端javascript调用代码

除了百度、高德提供在线地图调用api外,还有国家测绘地理信息局建设的地理信息综合服务网站“天地图”也提供了相应的地图接口服务,且免费对外开放,可直接使用。 “天地图” API 接口支持HTTP和HTTPS,支持浏览器端和服务器端,可快速调用天地图在线地理信息服务的通道,包括快速创建地图、调用地图、地名搜索以及在地图上添加覆盖物等,即和百度地图、高德地图一样。 天地图开发资源网站:http://lbs.tianditu.gov.cn/home.html 常规调用代码: javascript代码: <script src="htt...

微信小程序前端Tab切换内容代码

微信小程序常用的小交互效果,简单的tab切换,点击菜单选项,切换到对应指数的内容模块。 wxml代码 <view class="tabBtn"> <block wx:for="{{tabBtn}}" wx:key="index"> <view class="item{{curTab == index ? ' active' : ''}}" bindtap="clickTab" data-idx="{{index}}">{{item}}</view> </block> </view> <...