纯css3波浪动画效果

特效介绍非常漂亮的基于CSS3动画实现的波浪翻滚的动画效果,放在网页上,肯定能让网页效果更佳绚烂。我爱模板网之前做的一个手机APP下载页面就用了这种效果。使用方法请往下看。效果图1、将下载下来的img里面的图片放入项目中,一共三张图。2、将下面的css3代码放入您的css文件中:@keyframes move_wave {0% {transform: translateX(0) translateZ(0) scaleY(1)}50% {transform: translateX(-25%) transla
小黑 CSS相关2020-01-27
div的局部刷新

//div的局部刷新 $(".dl").load(location.href+" .dl");//第2个值前面必须空一格//全页面的刷新方法 window.location.reload()刷新当前页面parent.location.reload()刷新父亲对象(用于框架)opener.location.reload()刷新父窗口对象(用于单开窗口)top.location.reload()刷新最顶端对象(用于多开窗口)
小黑 JS相关2019-11-11
用JS使广告窗口倒计时5秒后关闭

!DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"meta name="viewport" content="width=device-width, initial-scale=1.0"meta http-equiv="X-UA-Compatible" content="ie=edge"titleDocument/titlestyleb
小黑 JS相关2019-10-11
js实现点击复制

此方法通用script type="text/javascript"function copyUrl2(){var Url2=document.getElementById("biao1").innerText;var oInput = document.createElement('input');oInput.value = Url2;document.body.appendChild(oInput);oInput.select(); //
小黑 JS相关2019-08-26
js还原textarea多行支持换行

script type="text/javascript"$(function() {init1();});function init1() {var text1 = $("div.text1").text(); //先取出未转换格式前端数据var des = text1.replace(/\r\n/g, 'br/', 'p').replace(/\n/g, 'br/', 'p').re
小黑 JS相关2019-08-11
教你如何将1920px的图片用img在不同分辨率下居中显示

话不多说,直接上代码div style="overflow: hidden; position: relative;"img src="图片地址" style = "position:absolute;width:1920px;height:400px;left:50%;margin-left:-960px;"//div
小黑 CSS相关2019-07-06
CSS3选择器nth-child(n)实现隔几行选择元素

nth-child(n),n 可以是数字、关键词或公式。选择器匹配属于其父元素的第N个子元素,不论元素的类型。序号写法:1. li:nth-child(3){background:orange;}倍数写法:1. li:nth-child(3n){background:orange;}倍数分组匹配:1. li:nth-child(3n+1){background:orange;}2. li:nth-child(3n+5){background:orange;}3. li:nth-child(5n-1){ba
小黑 CSS相关2019-05-17
CSS移动端实现元素垂直居中

方法一:table-celldisplay:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7就除外了。div class="box box1"span垂直居中/span/div .box1{display: table-cell;vertical-align: middle;text-align: center;}注意:此属性不能与 float:left 或是 position:absolute
小黑 CSS相关2019-05-16
如何解决div里面img图片下方有空白的问题?

相信网站前端开发者可能会遇到这样的问题,divimg src="picture.png"//div这样的格式在html5的文档标准下会有一段空白区域,那么怎样去掉这部分空白区域呢?首先我们要知道这部分空白产生的原因。图片默认的vertical-align是baseline,也就是字母x的下边距,我们在图片后面写上x就是这样如果给x加上背景色就是这样可以看到图片是与字母x的下边距对齐的,也就是baseline,css2的文档中有这么一句解释,翻译过来也就是一个inline-block元素
小黑 CSS相关2019-04-29
多功能选项卡切换效果

效果图HTMLdiv id="box"div id="tab"ulli class="on"选项卡一/lili选项卡二/lili选项卡三/lili选项卡四/li/ul/divdiv id="content"div class="pic on"ulli class="on" style="background: url(http://www.jq22.com/img/cs/500
小黑 JS相关2019-02-25
tab选项卡切换

效果图HTMLdiv class="box"ul class="menu"li历史/lili文学/lili宗教/li/ulul class="list"li style="background: red"1/lili style="background: black"2/lili style="background: purple"3/li/ul/divCSS * {margin:0;p
小黑 JS相关2019-02-25
JS下划线跟随tab选项卡

效果图 HTMLdiv class="nav"ullidon(0)"翠翠/lilidon(1)"嗯嗯/lilidon(2)"小白/lilidon(3)"小沫/lilidon(4)"同同/li/ul/divdiv class="tiao"div id="zhou" class="zhou" style="left: 0;"div class="ww&
小黑 JS相关2019-02-25
jQuery导航下划线滑动

效果图HTMLdivulli class=""关于我们/lili关于产品/lili class="active"加入我们/lili联系我们/lidiv class="line"/div/ul/divCSS* {margin:0;padding:0;list-style:none;}ul {width:800px;margin:0 auto;position:relative;overflow:hidden;}li {float:left;line
小黑 JS相关2019-02-25
JS实现div随屏幕滚动到一定高度后固定

在有些网页中我们会发现会有这样的现象:某个div会随着屏幕的滚动达到一定高度的时候位置就固定下来了。例如淘宝的导航条:那么这里就需要用到JS的逻辑方法来实现了。下面是HTML代码简单实现:(记得加总JS才能运行哦)!DOCTYPE htmlhtmlheadmeta http-equiv="Content-Type" content="text/html; charset=utf-8"/style type="text/css"body{width
小黑 JS相关2019-02-25
页面刷新后,tab记住刷新前位置

页面刷新后,对于有tab按钮的页面,每次刷新都默认回到第一个,自己都烦了,想想是别人使用,估计会更烦。于是就百度踩坑呀。效果图镇楼:主要使用到Session Storage,浏览器缓存原理。打开调试器:能看到缓存值:下面我要强迫自己写demo了:div class="demo"gt;ul class="tab-hd clearfix"li class="active"基本信息/lili课程详情/lili视频管理/lili讲义管理/lili习题管理
小黑 JS相关2019-02-10