菜单

jquery实现tab切换内容为几个不同swiper.js轮播插件模块的代码

做一个点击指定元素切换指定内容的页面模块(TAB切换),要切换的内容是独立的swiper.js轮播插件模块,如果先swiper初始化轮播内容,然后实现tab切换就会出现各轮播模块冲突,比如前进后退按钮异常、分页器异常、切换时内容加载异常等。可以避免各轮播模块冲突的方法是点击切换时再初始化当前的swiper轮播,其它的swiper轮播则注销掉。 HTML代码: <script src="js/swiper-bundle.min.js"></script> <div class="videos"> <div class="ta...

支持跟随鼠标方向的Canvas 3D粒子波浪动画效果代码

支持跟随鼠标方向的Canvas 3D粒子波浪动画效果代码

偶尔会用到的3D效果,由粒子构成的波浪形状,并以波浪形态运动的3D动画效果,支持鼠标摆动方向。 该效果基于JavaScript 3D库three.js,一个易于使用、轻量级、跨浏览器、通用的3D库。three.js库地址:https://github.com/mrdoob/three.js HTML代码: <div id="particle"></div> 引入three.js: <script src="js/three.min.js"></script> Javascript代...

jquery鼠标悬浮元素时图片向上滚动的代码

图片高度超过DOM元素节点高度,且父元素添加了overflow:hidden;图片超过高度的部分不会显示,通过鼠标悬浮图片,图片向上滚动的方式显示被截取的部分。 HTML代码: <div class="scroll"> <img src="图片URL地址" alt="长图片"/> </div> CSS代码: .scroll {padding-bottom:50%; overflow:hidden;} .scroll img {display: block; position: absolute; left:0; ...

Javascript监控页面指定DOM所有图片是否加载完成的代码

实现监控检测网页所有图片是否加载完成的思路:把网页所有img定义成一个数组变量,再实例化一个Image对象,然后遍历前面的数组变量,把每个src逐个附值给Image对象src,再逐个通过onload事件判断图片是否加载完成。 扩展:ready是指DOM结构加载完成后执行,不包括网页上的图片等媒体元素;onload则是DOM结构和页面资源(图片、视频、flash等)全部加载完成后执行。所以判断图片是否加载完成要用onload事件。(注意:jquery对象以及使用querySelectorAll、getElementsByTagName、getElementsByClassNam...

JavaScript判断指定数字是否是小数的方法代码

js没有直接判断一个数字是不是小数的方法,但可以通过indexOf()方法来获取小数点的位置,通过返回值来判断是否是小数;或者通过js正则表达式的方式来判断是否是小数。 方法一:indexOf()方法判断是否是小数 function isDecimal(num){ if(String(num).indexOf('.') > -1){ return true; }else{ return false; } } if(isDecimal(3.1415926)){ alert('这个是小数'); }else{ alert('这个不是...

javascript不刷新页面替换地址栏url的方法replaceState()和pushState()

replaceState()和pushState()是HTML5中history对象新添加的两个方法,用来在浏览历史中添加或修改记录,通过这两个方法可以实现替换浏览器地址栏url而不刷新网页。 语法 history.replaceState(stateObj, title[, url]); history.pushState(stateObj, title[, url]); 两上方法的参数完全一样,区别是两者是否会修改浏览历史中当前纪录。其中replaceState不会有历史记录,pushState有历史记录。 参数 ...

javascript获取中文文字词组全拼和拼音首字母的代码

js汉字转拼音的代码在前面的《jquery实现淘宝APP收货地址地区联动选择效果》有发布过,这里单独记录代码的使用方法,如转全拼、提取首字母。 Javascript代码(代码比较长) /* --- description: Pinyin, to get chinese pinyin from chinese. license: MIT-style authors: Bill Lue requires: core/1.2.1: '*' provides: [Pinyin] ... */ var pinyin = (function (){ v...

javascript防止浏览器打开Web开发者工具查看或调试代码

不想网页被人通过浏览器审查元素或控制台调试网页代码,可以通过比较屏幕window.outerWidth和页面可见区域window.innerWidth的差距判断浏览器是否打开了Web开发者工具,如果检测到Web开发者工具被打就清空网页代码。 实现代码: ;(function () { 'use strict'; var devtools = { open: false, orientation: null } var threshold = 160;//outerWidth与innerWidth...

控制CSS animation动画暂停或运行的样式属性animation-play-state代码

animation 动画是经常会使用到的CSS3样式属性,通常是用来运行 @keyframes 定义动画,在网页开发过程中,想暂停 animation 动画要怎么做?CSS3 提供了 animation-play-state 属性,该属性的作用是运行或者暂停动画,支持该属性的浏览器版本 Chrome 43+(4.0 -webkit-)、IE10+、Firefox 16+(5.0 -moz-)、Safari 9.0+、Opera 30+(12.0 -o-)。 语法 animation-play-state: paused|running; 参数 ...

带完整省市json数据的jquery省市二级联动代码

做表单涉及到地址地区时,经常需要做地区联动,比如省市二级联动、省市县三级联动以及更深层次的省市县镇街道联运等,下面的代码是最常用到的省市二级联动,附带了完整的json数据,其实做地区联动不难,麻烦的是弄对应的地区数据。 引入省市数据文件 把json数据保存为area.js文件后,引入文件(json数据太长,放在文章末尾了,请在文章末复制) <script src="area.js"></script> HTML代码: <form> <select name="province" onchange...

响应式javascript堆叠式轮播图切换的实现代码

响应式javascript堆叠式轮播图切换的实现代码

三张图堆叠式立体轮播图效果在网页前端开发过程中经常会做到,之前不想费心费力自己弄,习惯使用一些成熟的jquery轮播图插件(如slick.js、Owl-Carousel.js)改造实现,效果也算是差强人意。这次在bilibili上看到有人分享相同效果的代码,下载下来发现代码挺简单,效果也比较合适,于是就在原代码的基础上对html、css和js都进行了些小修改,结果比较符合自己的要求。 HTML代码: <div class="owl"> <div id="stacked"> <div class="item">...

支持IE/Chrome/Firefox浏览器的网页打印javascript代码

支持IE/Chrome/Firefox浏览器的网页打印javascript代码

点击网页某个元素,调用window.print()方法,打印功能,打印指定元素内的内容,经测试支持Firefox、Chrome、IE9+浏览器。 提醒:IE需要在Internet选项的安全设置中【自定义级别】的“对标记为可安全执行脚本的 ActiveX 控制执行脚本*”设置为启用。 html代码 <div id="entry"> 此处是要被打印的内容! </div> <a href="javascript:void(0);" id="print">打印内容</a> javascr...