永恒い☆心

【----置顶----】

VUE前端框架 PHP教程 CSS渐变配色 flex网站布局 99资源网上传设计稿

【网站文档】

PC文档 WAP2.0(float布局) WAP3.0(flex布局) VUE项目(scss版)

【css3 放大缩小】

放大缩小

.tiaodong {
	animation: myfirst 2s infinite;
}
@keyframes myfirst {
    0% {
        transform: translate(0px, 0px);
        -webkit-transition: scale(1);
        -moz-transition: scale(1);
        -ms-transition: scale(1);
        -o-transition: scale(1);
        transform: scale(1)
    }
    50% {
        transform: translate(0px, -15px);
        -webkit-transition: scale(1.2);
        -moz-transition: scale(1.2);
        -ms-transition: scale(1.2);
        -o-transition: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        transform: translate(0px, 0px);
        -webkit-transition: scale(1);
        -moz-transition: scale(1);
        -ms-transition: scale(1);
        -o-transition: scale(1);
        transform: scale(1)
    }
}

【css 按钮点击样式】

<button class="g-copy"></button>

.g-copy{ position:absolute;right:0;top:11px;margin:0;padding:0; font-size:13px; background:none;border:0;color:#333; border-radius:4px; height:30px;padding:0 8px; border:#eee 1px solid; outline:none;}
.g-copy:hover{border:#ccc 1px solid; background:#fefefe;color:#333;}
.g-copy:active {border:#000 1px solid; background:#f9f9f9;color:#000; box-shadow:0 0 4px #666;}

【css 鼠标经过图片放大】

<div class="fangda"><img src="sucai/6.jpg"></div>

.fangda img{width:300px; height:200px; overflow:hidden;-webkit-transition:all .7s;-moz-transition:all .7s;-ms-transition:all .7s;-o-transition:all .7s;transform:all .7s}
.fangda:hover img{-webkit-transition: scale(1.1);-moz-transition: scale(1.1);-ms-transition: scale(1.1);-o-transition: scale(1.1);transform: scale(1.1)}

【jquery 每隔几个奇数偶数】

$(".gradlist:nth-child(3n)").css("margin-right","0")

【css鼠标经过阴影渐渐效果】

鼠标经过试一下

<a href="javascript:;" class="btn green yinyingbtn">鼠标经过试一下</a>

.yinyingbtn{position:relative;-moz-transition: all .3s ease-out;transition: all .3s ease-out;}
.yinyingbtn:hover{-webkit-box-shadow:0 15px 30px rgba(0,0,0,.1);box-shadow:0 15px 30px rgba(0,0,0,.1);-webkit-transform:translate3d(0,-2px,0);transform:translate3d(0,-2px,0);bottom:2px;-webkit-transition: all .3s ease-out;}

【jquery 数字滚动翻滚】

count数字滚动js下载 1994517 1994625 62517

<a class="value1" href="javascript:;">1994517</a>
<a class="value2" href="javascript:;">1994517</a>
<a class="value3" href="javascript:;">1994517</a>
<a class="value4" href="javascript:;">1994517</a>
<script src="js/count.js"></script>

//底部数字滚动
var val1=$(".value1").text();//案例库
var val2=$(".value2").text();//全国入驻商家数
var val3=$(".value3").text();//服务好评数
var val4=$(".value4").text();//全国活动城市分布数
$(".value1").numberRock({
    speed:10,
    count:val1
})
$(".value2").numberRock({
    speed:10,
    count:val2
})
$(".value3").numberRock({
    speed:10,
    count:val3
})
$(".value4").numberRock({
    speed:10,
    count:val4
})

【jquery 数字滚动翻滚2】

jquery-count数字滚动js下载 0 0 0

<a class="timer count-title" data-to="3562" data-speed="200">0</a>
<a class="timer count-title" data-to="3562" data-speed="200">0</a>
<a class="timer count-title" data-to="3562" data-speed="200">0</a>

<script src="js/jquery-count.js"></script>

【js移动端弹窗弹框提示框插件】

弹框素材下载

默认 2秒后自动关闭带有title 带有按钮追加样式其他正在加载

<a class="btn zise" id="mdialog1" href="javascript:;">默认</a>
<a class="btn blue" id="mdialog2" href="javascript:;">2秒后自动关闭</a>
<a class="btn red" id="mdialog3" href="javascript:;">带有title</a>
<a class="btn orange" id="mdialog4" href="javascript:;">带有按钮</a>
<a class="btn green" id="mdialog5" href="javascript:;">追加样式</a>
<a class="btn hui" id="mdialog6" href="javascript:;">其他</a>
<a class="btn zise3" id="mdialog9" href="javascript:;">正在加载</a>

查看css

mdialog1.onclick = function(){
    Dialog.init('大家都吃着聊着笑着',{maskClick : 1});
}
mdialog2.onclick = function(){
    Dialog.init('两秒后自动关闭',2000);
}
mdialog3.onclick = function(){
    Dialog.init('带有title',{
        title : '是否删除？'
    });
}
mdialog4.onclick = function(){
    Dialog.init('<input type="text" placeholder="请输入5个字符"  style="margin:8px 0;width:100%;padding:11px 8px;font-size:15px; border:1px solid #999;"/>',{
        title : '输入点什么吧！',
        button : {
            确定 : function(){
                if(this.querySelector('input').value.length >= 5){
                Dialog.init('你输入的内容是：'+this.querySelector('input').value);
                Dialog.close(this);
            }else{
                Dialog.init('你输入的内容不符合要求！',1100);
            };
            },
            点击关闭 : function(){
                Dialog.init('你点击了关闭',1000);
                Dialog.close(this);
            }
        }
    });
}
mdialog5.onclick = function(){
    Dialog.init('追加样式',{
        title : '警告',
        style : 'padding: 30px 14px;color:red;font-weight: bold;font-size:25px'
    });
}
mdialog6.onclick = function(){
    Dialog.init('<img src="dist/6.jpg" width="100%">',{
        title : '图片预览',
        button : {
            确定 : function(){Dialog.close(this);}
        }
    });
}
mdialog9.onclick = function(){
    Dialog.init('<img src="dist/load3.gif" width="48px"/>',{
        mask : 0,
        addClass : 'dialog_load',
        time : 3000,
        after : function(){
            Dialog.init('加载成功！',1000);
        }
    });
}

【jquery 限制字符】

限制字符限制字符限制字符限制字符限制字符限制字符限制字符限制字符限制字符限制字符限制字符限制字符限制字符

<div class="textlist">限制字符限制字符限制字符限制字符限制字符限制字符限制字符限制字符限制字符限制字符限制字符限制字符限制字符</div>

//限制字符个数
$(".textlist").each(function(){
    //限制字符个数
    var maxwidth=23;
    if($(this).text().length>maxwidth){
        $(this).text($(this).text().substring(0,maxwidth));
        $(this).html($(this).html()+'…');
    }
});

【rem.js网页自适应单位换算】

下载rem.js

【虚拟主机开子域名二级域名】

RewriteEngine On #RewriteCond %{HTTP_HOST} !^www\..+$ [NC] #RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L] RewriteCond %{HTTP_HOST} ^(video.)?wk517.com$ RewriteCond %{REQUEST_URI} !^/video/ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ /video/$1 RewriteCond %{HTTP_HOST} ^(video.)?wk517.com$ RewriteRule ^(/)?$ video/ 把该TXT文件的名字另存为所有文件命名为.htaccess 将该文件（ .htaccess）使用FTP工具上传到你虚拟主机的跟目录，在根目录建一个video的文件夹
查看例子下一步：主机绑定域名，图片教程下一步：域名解析，图片教程 .htaccess文件下载

【网站css、js调用】

<link type="text/css" href="css/reset.css" rel="stylesheet" />
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>

【css固定定位超出可滚动】

.eject-box{ position:fixed;left:0;top:0;width:100%; height:100%; overflow-y:auto; overflow-x:hidden;z-index:99; display:none;}
.side-classify{ position:absolute;left:50%;top:-100%;display:none; background:#fff;}

点击演示

【ico小图标调用代码】

<link rel="shortcut icon" href="/images/favicon.ico" />

【html meta跳转链接刷新】

<!--只是刷新不跳转到其他页面 -->
<meta http-equiv="refresh" content="5">
<!--定时转到其他页面 -->
<meta http-equiv="refresh" content="5;url=index.html">

【全选全不选】

<form>
    <input type="checkbox" id="checkall"/>全选/不全选
    <input type="checkbox" name="hxy" class="checklist" />
    <input type="checkbox" name="hxy" class="checklist" />
    <input type="checkbox" name="hxy" class="checklist"/>
    <input type="checkbox" name="hxy" class="checklist" />
</form>

$("#checkall").click(function () {
    if (this.checked) {
        $(".checklist").attr("checked", true);
    } else {
        $(".checklist").attr("checked", false);
    }
});

[演示]

【ico小图标在线生成链接】

http://www.bitbug.net/

【zepto 弹框提示错误正在加载】

zepto下载

[演示]

$('#success').click(function () {
    popup({
        type: 'success',
        msg: "操作成功",
        delay: 1000,
        callBack: function () {
            console.log('callBack~~~');
        }
    });
})
$('#error').click(function () {
    popup({
        type: 'error',
        msg: "操作失败",
        delay: 2000,
        bg: true,
        clickDomCancel: true
    });
})
$('#load').click(function () {
    popup({
        type: 'load',
        msg: "请等待",
        delay: 1500,
        callBack: function () {
            v
            popup({
                type: "success",
                msg: "加载成功",
                delay: 1000
            });
        }
    });
})
$('#tip').click(function () {
    popup({
        type: 'tip',
        msg: "提示信息",
        delay: null
    });
})

【jquery 判断元素是否具有某个class】

hasClass() //方法检查被选元素是否包含指定的 class。 语法
$(selector).hasClass(class)
//例子：
if($("#b").hasClass("a")){
	alert("包含class a");
}

【css圆角】

[横版写法]

-moz-border-radius: 15px; -webkit-border-radius: 15px;border-radius:15px;

[竖版版写法]

-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius:15px;

[顺序]

border-radius: 15px 15px 15px 15px;上、右、下、左

【css背景半透明】

background-color:rgba(0,0,0,0.2);

【jquery无缝滚动向左向右】

.winBox {
    width: 100% ;
    height: 40px;
    overflow: hidden;
    position: relative;
    background: pink;
}
.scroll { /*width的大小是根据下面li的长度和多少个li而定的，需注意！*/
    width: 1500px;
    position: absolute;
    left: 0px;
    top: 0px;
}
.scroll li {
    width: 300px;
    float: left;
    line - height: 40px;
    text - align: center;
}
.scroll li span {
    display: inline - block;
    padding: 0 8px;
}

<div class="winBox">
    <ul class="scroll"> <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
        <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
        <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
        <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
        <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
    </ul>
</div>

$(function () {
    var lilen = $(".winBox li").length;
    $(".scroll").width(lilen * 300)
    var num = 0;

    function goLeft() { //750是根据你给的尺寸，可变的
            if (num == -750) {
                num = 0;
            }
            num -= 1;
            $(".scroll").css({
                left: num
            })
        }
        //设置滚动速度
    var timer = setInterval(goLeft, 20); //设置鼠标经过时滚动停止
    $(".winBox").hover(function () {
            clearInterval(timer);
        },
        function () {
            timer = setInterval(goLeft, 20);
        })
})

【页面图片延迟加载】

延迟js下载

<img class="lazy" data-original="图片路径" alt="和家家博会" />
<script type="text/javascript" src="js/jquery.lazyload.js"></script>

//图片延迟加载
$("img.lazy").lazyload({
    effect: "fadeIn", // 载入使用何种效果
    threshold: 200,
    skip_invisible: false
});

【jquery无缝滚动向上向下】

.winBox {
	width:100%;
	height:200px;
	overflow:hidden;
	position:relative;
	background:pink;
}
.scroll {
	/*width的大小是根据下面li的长度和多少个li而定的，需注意！*/
	position:absolute;
	left:0px;
	top:0px;
}
.scroll li {
	width:300px;
	line-height:40px;
	text-align:center;
}
.scroll li span {
	display:inline-block;
	padding:0 8px;
}

<div class="winBox">
    <ul class="scroll">
        <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
        <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
        <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
        <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
        <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
    </ul>
</div>

$(function () {
    var lilen = $(".winBox li").length;
    $(".scroll").height(lilen * 40)
    var num = 0;

    function goLeft() { //750是根据你给的尺寸，可变的
            if (num == -40) {
                num = 0;
            }
            num -= 1;
            $(".scroll").css({
                top: num
            })
        }
        //设置滚动速度
    var timer = setInterval(goLeft, 20); //设置鼠标经过时滚动停止
    $(".winBox").hover(function () {
            clearInterval(timer);
        },
        function () {
            timer = setInterval(goLeft, 20);
        })
})

【jquery 判断元素里是否包含某个文字】

if ($("#appTabs").text().indexOf("如果有就") != -1) {
    return false;
} else {
    alert($("#appTabs").text())
    $("#appTabs").append('<li title="' + url + '">' + urlText + '<i class="layui-icon layui-unselect layui-tab-close">×</i></li>')
}

【jquery onclick this关闭】

$("#appTabs").append('<li title="' + url + '" class="layui-this">' + urlText + '<i class="layui-icon layui-unselect layui-tab-close"  onClick="tabClose(this)">×</i></li>')

function tabClose(obj) {
	$(obj).parents("li").remove();
}

【jquery上传图片】

上传图片

<img src="" class="img0 hides" width="120" /> <input type="file" name="file0" id="file0" multiple class="upimg" />

//上传图片 $("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]);
console.log("objUrl = " + objUrl);
if (objUrl) {
    $(".img0").attr("src", objUrl);
    $(".img0").removeClass("hides");
}
});
//建立一個可存取到該file的url
function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file) ; }
        else if (window.URL != undefined) {
            // mozilla(firefox) url = window.URL.createObjectURL(file) ; }  else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; }
            return url;
        }
    }
}

【css清除浮动】

[方法1]

.clearfix:after{ display:block; visibility:hidden; clear:both; height:0; content:".";} .clearfix{zoom:1}

<div class="clearfix"></div>

[方法2]

<div style="clear:both;"></div>

【css摇摆、抖动效果】

@-webkit-keyframes rotate {
	to {
	-webkit-transform: rotate(30deg);
}
} @-ms-keyframes rotate {
	to {
	-ms-transform: rotate(30deg);
}
} @-moz-keyframes rotate {
	to {
	-moz-transform: rotate(30deg);
}
} @-o-keyframes rotate {
	to {
	-o-transform: rotate(30deg);
}
} @keyframes rotate {
	to {
	transform: rotate(30deg);
}
} .swing {
	position: relative;
	right: 15px;
	top: 0;
	z-index: 4;
	/*别忘了宽高*/
	-webkit-transform-origin: center top;
	-ms-transform-origin: center top;
	-moz-transform-origin: center top;
	-o-transform-origin: center top;
	transform-origin: center top;
	-webkit-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	transform: rotate(-30deg);
	-webkit-animation: rotate 1.5s ease-in-out alternate infinite;
	-ms-animation: rotate 1.5s ease-in-out alternate infinite;
	-moz-animation: rotate 1.5s ease-in-out alternate infinite;
	-o-animation: rotate 1.5s ease-in-out alternate infinite;
	animation: rotate 1.5s ease-in-out alternate infinite;
}

css摇摆

【css颤抖、抖动效果】

css摇摆

<a href="javascript:;" class="btn redbag zise3">css颤抖</a>

.redbag {
	position:relative;
	-webkit-animation: alarm-2 4ms infinite;
	animation: alarm-2 4ms infinite;
}
@keyframes tick-tock {
	to {
	transform: rotate(360deg);
}
} @-webkit-keyframes tick-tock {
	to {
	-webkit-transform: rotate(360deg) translate3d(0, 0, 0);
}
} @-webkit-keyframes alarm {
	from {
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotate(15deg);
}
to {
	-webkit-transform-origin: bottom left;
	-webkit-transform: rotate(-15deg);
}
} @keyframes alarm {
	from {
	transform-origin: bottom right;
	transform: rotate(15deg);
}
to {
	transform-origin: bottom left;
	transform: rotate(-15deg);
}
} @-webkit-keyframes alarm-2 {
	from {
	-webkit-transform: rotate(1deg);
}
to {
	-webkit-transform: rotate(-1deg);
}
} @keyframes alarm-2 {
	from {
	transform: rotate(1deg);
}
to {
	transform: rotate(-1deg);
}
}

【css摇晃、晃动来回摇摆】

css摇摆

<a href="javascript:;" class="btn huangdong green">css摇晃</a>

.huangdong {
	-webkit-animation:swinging 2s ease-in-out 0s infinite;
	-moz-animation:swinging 2s ease-in-out 0s infinite;
	animation:swinging 2s ease-in-out 0s infinite;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}
@-webkit-keyframes swinging {
    0% {
        -webkit-transform: rotate(10deg);
    }
    50% {
        -webkit-transform: rotate(-10deg);
    }
    100% {
        -webkit-transform: rotate(10deg);
    }
}

【分页】

<div class="fenye"> <a href="" class="fencur">上一页</a>
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">下一页</a>
    <input type="text" class="num" placeholder="输入跳转页数" />
    <a href="#" class="button">跳转</a>
    <span class="allnum">共 <i>100</i> 页</span>
</div>

.fenye{ text-align:center;padding:15px 0;}
.fenye a{ display:inline-block; border-radius:4px;margin:0 4px;border:#ddd 1px solid; padding:0 15px; height:24px; line-height:24px; font-size:14px;color:#666;}
.fenye a:hover{border:#999 1px solid;color:#333;}
.fenye a.fencur{border:#f60 1px solid;}
.fenye .num{width:98px;height:22px;border:#ddd 1px solid;padding-left:8px;}
.fenye .button{display:inline-block; border-radius:4px;margin:0 4px;border:#ccc 1px solid; padding:0 15px; height:24px; line-height:22px; font-size:14px;color:#333; background:#f1f1f1;}
.fenye .button:hover{ background:#f60;color:#fff;border:#f60 1px solid;}
.allnum{ font-size:15px;color:#999;margin-left:5px;}
.allnum i{ font-style:normal;color:#666;}

【css3实现闪光效果】

@-webkit-keyframes twinkling {
	/*透明度由0到1*/
	0% {
	opacity: 0.1;
	/*透明度为0*/
	
}
100% {
	opacity: 1;
	/*透明度为1*/
	
}
} @keyframes twinkling {
	/*透明度由0到1*/
	0% {
	opacity: 0.1;
	/*透明度为0*/
	
}
100% {
	opacity: 1;
	/*透明度为1*/
	
}
} .element {
	-webkit-animation: twinkling 1s infinite ease-in-out;
}

<div class="element"></div>

css闪光

【css内外边距不占宽高】

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} 
*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

【背景视差滚动】

效果演示效果下载

【css延迟效果，比如鼠标经过渐渐的变色】

[竖版]

-webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; transition: all .3s ease-out;

[横版]

-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out; transition: all .3s ease-out;

【css背景色渐变】

[上下]

background-image:-webkit-linear-gradient(#ec4b57, #71040c); 
background-image:-moz-linear-gradient(#ec4b57, #71040c);
background-image:-ms-linear-gradient(#ec4b57, #71040c);
background-image:-o-linear-gradient(#ec4b57,#71040c);
background-image:linear-gradient(#ec4b57, #71040c);

[左右]

background: -moz-linear-gradient(left, #138ba3 0%, #20ab53 100%);
background: -webkit-gradient(linear, top left, top left, color-stop(0%,#138ba3), color-stop(100%,#20ab53));
background: -webkit-linear-gradient(bottom, #138ba3 0%,#20ab53 100%);
background: -o-linear-gradient(left, #138ba3 0%,#20ab53 100%);
background: -ms-linear-gradient(left, #138ba3 0%,#20ab53 100%);
background: linear-gradient(to right, #138ba3 0%,#20ab53 100%);

[渐变配色网]

https://webgradients.com/

【jquery监听浏览器窗口大小】

$(window).resize(function() {
	var width = $(window).width();
});

【video视频播放插件】

播放：myPlayer.play();暂停：
myPlayer.pause();

获取播放进度：
var whereYouAt = myPlayer.currentTime();设置播放进度：
myPlayer.currentTime(120);

视频持续时间，加载完成视频才可以知道视频时长，且在flash情况下无效
var howLongIsThis = myPlayer.duration();缓冲，就是返回下载了多少
var whatHasBeenBuffered = myPlayer.buffered();百分比的缓冲
var howMuchIsDownloaded = myPlayer.bufferedPercent();声音大小（0 - 1之间）
var howLoudIsIt = myPlayer.volume();设置声音大小
myPlayer.volume(0.5);取得视频的宽度
var howWideIsIt = myPlayer.width();设置宽度
myPlayer.width(640);获取高度
var howTallIsIt = myPlayer.height();设置高度：
myPlayer.height(480);一步到位的设置大小：
myPlayer.size(640, 480);全屏myPlayer.enterFullScreen();离开全屏
myPlayer.enterFullScreen();添加事件
durationchange
ended //播放结束 firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
paus / 暂停
play //播放 progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
var myFunc = function() { // Do something when the event is fired };
		事件绑定
		myPlayer.on("ended", function() {
			console.log("end", this.currentTime());
		});
		myPlayer.on("pause", function() {
			console.log("pause")
		});删除事件
		myPlayer.removeEvent(“eventName”, myFunc);

演示地址下载video.js

【css阴影】

box-shadow:0 0 5px #000; -moz-box-shadow:0 0 5px #000; -webkit-box-shadow:0 0 5px 0#000; -o-box-shadow:0 0 5px #000;

【css让图片变灰】

img { filter: url("data:imagsvg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
                /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ }

【css设置【禁止换行强制不换行】【自动换行】【强制英文单词断行】

/*强制不换行*/
white-space:nowrap;
/*自动换行*/
word-wrap: break-word;
word-break: normal;
/*强制英文单词断行*/
word-break:break-all;

【css英文字母全大写小写】

text-transform:uppercase
capitalize 英文拼音的首字母大写
uppercase 英文拼音字母全大写
lowercase 英文拼音字母全小写

【jquery jq英文字母全小写大写】

var a="aBcD";a=a.toLowerCase();
alert(a);
//提示出来的就是 abcd
var a="aBcD";
a=a.toUpperCase();
alert(a);
//提示出来的就是 ABCD

【404页面】

404页面演示 404页面下载

【css旋转经过旋转】

.xuanzhuan {
	text-align: center;
	transition:all 0.5s linear;
	-webkit-transition:all 0.5s linear;
	-moz-transition:all 0.5s linear;
	-ms-transition:all 0.5s linear;
	-o-transition:all 0.5s linear;
}
.xuanzhuan:hover {
	transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-o-transform:rotate(180deg);
}

经过旋转

【css按钮】

.btn{ display:inline-block; height:38px; line-height:38px;padding:0 25px; font-size:15px;color:#fff;-moz-border-radius:4px; -webkit-border-radius: 4px;border-radius:4px;}
.btn:hover{ opacity:0.8;color:#fff;} .btn.blue{background:#09f;}
.btn.orange{ background:#f60;}
.btn.red{ background:#f00;}
.btn.green{ background:#090;}
.btn.hui{ background:#999;}

我是红色我是橙色我是绿色我是蓝色我是灰色

【css限制字符，超出部分省略号】

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

css限制字符，超出部分省略号css限制字符，超出部分省略号css限制字符，超出部分省略号css限制字符，超出部分省略号

【css、js、html美化】

https://tool.lu/

【素材下载、查找网址】

[下载]】

下载千图网素材

[特效]】

17素材

[图片]】

千库网千图网

[网站字体图标]】

http://iconfont.cn/

【iframe】

<iframe border="0" src="map.html" frameborder="0" width="100%" height="300"></iframe>

【jquery或者js刷新页面】

window.onresize = function() {
	location.reload();
};
---共有1条评论---DesignStar虽然这个代码在谷歌好使但是火狐就不好使了。window.onresize = function() {
	location = location
};改成这样之后谷歌火狐都好使了。 (2个月前) Javascript刷新页面的几种方法：

1 history.go(0) 2 location.reload() 3 location = location 4 location.assign(location) 5 document.execCommand('Refresh') 6 window.navigate(location) 7 location.replace(location) 8 document.URL = location.href说明一下，jQuery没有发现刷新页面的方法。window.resize(function() {上面选一个放到这里。
});

【jquery跳转链接】

window.location.href='http://www.baidu.com';

【jquery/js返回上一页】

<a href="javascript:;" onclick="javascript:history.back(-1);">返回</a>

【jquery将获取的一段数字挨个输出】

<div id="bmnum">12345</div>

$(window).load(function() {
	var num = $("#bmnum").text();
	for (var i = 0; i & lt; num.length; i++) {
		$("#bmnumecho").append('<i>' + num.charAt(i) + '</i>')
	}
})

【jquery超出隐藏显示、位置、滚动】

//底部报名
$(window).scroll(function() {
	if ($(this).scrollTop() > 965) {
		$(".foot-baoming").fadeIn()
	} else {
		$(".foot-baoming").fadeOut()
	}
})

【jquery返回顶部、返回底部、返回固定位置、定位、特定位置、滚屏、滚动】

//页面滚屏
$(".dat-info-eq li").click(function() {
	var datindex = $(this).index();
	var scroll_offset = $(".dat-info-list").eq(datindex).offset();
	$("body,html").animate({
		scrollTop: scroll_offset.top
	}, 500);
})
//到特定位置
<a href = "javascript:;" onClick = "tao0();" >我要报名 </a>
function tao0() {  var scroll_offset = $("#chanpin").offset();  $("body,html").animate({  scrollTop:scroll_offset.top  },500);  }
// 返回顶部
$(".back-top").click(function() {
	$("body,html").animate({
		scrollTop: 0
	}, 500);
})
//返回底部
$(".back-btm").click(function() {
	var scroll_offset = $("#btm").offset();
	$("body,html").animate({
		scrollTop: scroll_offset.top
	}, 500);
})

【jquery加减】

// 数量加减
$(".add").click(function() {
	var n = $(".num").val();
	var num = parseInt(n) + 1;
	if (num == 0) {
		alert("cc");
	}
	$(this).prev(".num").val(num);
});
$(".jian").click(function() {
	var n = $(".num").val();
	var num = parseInt(n) - 1;
	if (num == 0) {
		alert("不能为0!");
		return
	}
	$(this).next(".num").val(num);
});

【css页面动画wow.js】

//js调用 if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){ new WOW().init(); };

<div class="wow bounceIn" data-wow-duration="1s" data-wow-delay="0s"></div> data-wow-duration="1s" 动画时间 data-wow-delay="0s" 动画什么时候执行

wow.js wow动画演示

wow rollIn	从左到右、顺时针滚动、透明度从100%变化至设定值

wow bounceIn	从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值
wow bounceInUp	从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变
wow bounceInDown	从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变
wow bounceInLeft	从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变
wow bounceInRight	从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变

wow slideInUp	从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度）
wow slideInDown	从上往下、上来后固定到设定位置、透明度为设定值不变
wow slideInLeft	从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右）
wow slideInRight	从右往左、上来后固定到设定位置、透明度为设定值不变

wow lightSpeedIn	从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值
wow pulse	原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳）
wow flipInX	原位置后仰前栽、透明度从100%变化至设定值
wow flipInY	原位置左右旋动、透明度从100%变化至设定值
wow bounce	上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow shake	左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow swing	从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变
wow bounceInU	原位置不变、直接从不显示到显示（无过过渡效果）
wow wobble	原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

【css旋转、大转盘】

<div class="windmill2">
    <span class="djcj"></span>
    <span class="axis">
    <!--<img src="images/zhuanpans.png">-->
    </span>
</div>

@-webkit-keyframes rotate {
	from {
	-webkit-transform:rotate(0)
}
to {
	-webkit-transform:rotate(360deg)
}
} @-moz-keyframes rotate {
	from {
	-moz-transform:rotate(0)
}
to {
	-moz-transform:rotate(359deg)
}
} @-o-keyframes rotate {
	from {
	-o-transform:rotate(0)
}
to {
	-o-transform:rotate(359deg)
}
} @keyframes rotate {
	from {
	transform:rotate(0)
}
to {
	transform:rotate(359deg)
}
} @-webkit-keyframes rotate2 {
	from {
	-webkit-transform:rotate(0)
}
to {
	-webkit-transform:rotate(360deg)
}
} @-moz-keyframes rotate2 {
	from {
	-moz-transform:rotate(0)
}
to {
	-moz-transform:rotate(359deg)
}
} @-o-keyframes rotate2 {
	from {
	-o-transform:rotate(0)
}
to {
	-o-transform:rotate(359deg)
}
} @keyframes rotate2 {
	from {
	transform:rotate(0)
}
to {
	transform:rotate(359deg)
}
} .windmill2 {
	display:block;
	position:relative;
	width:200px;
	height:200px;
	overflow:hidden
}
.windmill2 .axis {
	position:absolute;
	top:0;
	left:0;
	width:200px;
	height:200px;
	overflow:hidden;
	z-index:1;
	-webkit-transition-property:-webkit-transform;
	-webkit-transition-duration:3s;
	-moz-transition-property:-moz-transform;
	-moz-transition-duration:3s;
	-webkit-animation:rotate 14s linear infinite;
	-moz-animation:rotate 14s linear infinite;
	-o-animation:rotate 14s linear infinite;
	animation:rotate 14s linear infinite;
	background:#09f;
	border-radius:50% 0 50% 0
}
.windmill2 .axis img {
	width:200px;
	height:200px
}
.djcj {
	position:absolute;
	width:40px;
	height:40px;
	left:50%;
	top:50%;
	margin:-20px 0 0 -20px;
	z-index:2;
	cursor:pointer;
	background:#f60
}
.djcj img {
	width:40px;
	height:40px
}

【swiper、滚动】

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

<script>
    var swiper = new Swiper('.swiper-container', {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>

swiper-JS swiper-CSS swiper-滚屏页面下载 swiper-滚屏页面演示 animate动画演示

【页面弹框、提示】

PC版演示 PC版下载 WAP版演示 WAP版下载

【最好用的滚动效果】

<div class="scrolllist">
    <a class="abtn aleft" href="javascript:;" title="左移"></a>
    <div class="imglist_w">
        <ul class="imglist">
            <li></li>
            <li style="background:#0F0;"></li>
        </ul>
    </div>
    <a class="abtn aright" href="javascript:;" title="右移"></a>
</div>

a.abtn{ position:absolute;top:50%;width:36px; height:96px;overflow:hidden; z-index:4;border:#ccc 1px solid; opacity:0.8;margin-top:-48px;}
a.aleft{left:0; background:url(../images/right.png);}
a.aright{right:0; background:url(../images/left.png);}
a.agrayleft,a.agrayright{cursor:default; opacity:0.5;}
.imglist_w ul{width:20000px;position:absolute;left:0px;top:0px;}
.scrolllist{width:300px;height:96px;position:relative;}
.scrolllist .imglist_w{width:300px;height:96px;overflow:hidden;float:left;position:relative;/*必要元素*/}
.scrolllist .imglist_w li{float:left;width:300px;height:96px; background:#09f;}

//滚动
$(".scrolllist").xslider({
	unitdisplayed: 1,
	movelength: 1,
	unitlen: 300,
	autoscroll: null
});

所用到的js[slider]下载

【jquery获取网站url】

txt教程网站教程

【jquery黑洞特效url】

黑洞特效下载

【jquer下拉菜单禁止重复动画】

$(this).children(".chilp").stop(true,true).slideToggle()

【jquer/js局部打印】

<script type="text/javascript">
function doPrint() {
	bdhtml = window.document.body.innerHTML;
	sprnstr = "<!--startprint-->";
	eprnstr = "<!--endprint-->";
	prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
	prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
	window.document.body.innerHTML = prnhtml;
	window.print();
}
</script>

<!--startprint-->
<!--注意要加上html里star和end的这两个标记，之前没加，一直没效果，谁叫咱们菜呢~-->
<h1> 打印标题</h1>
<p> 打印内容~~</p>
<!--endprint-->

【网页加载完onload +each遍历】

onload

$(window).load(function() {
	var oTxt = $(".bkyy-list").length
	var num = parseInt(oTxt);
	if (num % 2 == 0) {
		return true;
	} else {}

})

each遍历

var $oBox = $('.slide');
$oBox.each(function() {
	var imgeq1 = $(this).find(".midiabox li") var texteq1 = $(this).find(".midialist") imgeq1.click(function() {
		var imglistindex2 = $(this).index();
		$(texteq1).eq(imglistindex2).show().siblings(".case-details").hide();
	})
})
$(".medBack a").click(function() {
	$(".midialist").hide();
	$(this).parents(".slide").find(".midiabox").fadeIn();
})

【QQ跳转】

http://wpa.qq.com/msgrd?v=3&uin=2445638917&site=qq&menu=yes mqqwpa://im/chat?chat_type=wpa&uin=1234567&version=1&src_type=web&web_src=lvlingseeds.com

【css 来回跳动上下晃动】

跳动演示效果

<div class"tiaodong"></div>

.tiaodong {
	animation: myfirst 2s infinite;
}
@keyframes myfirst {
	0% {
	transform: translate(0px, 0px);
}
50% {
	transform: translate(0px, -10px);
}
100% {
	transform: translate(0px, 0px);
}
}

【jquery去掉某个字符、截取字符】

//去掉#号
var oTxt="#1244" oTxt=oTxt.replace('#','');

【css垂直居中图片文字】

display: table-cell;vertical-align: middle;

【css多行文字垂直居中】

<div class="ld-text">
    <div class="ld-center">
        <div class="texts">
        现场下定并参与全场统一收银即可在付款时享受5%优惠 注意：仅限1F建材品牌+2F（部分建材品牌）+3F家具品牌参与。（部分品牌不参与，详见现场）
        </div>
    </div>
</div>

.ld-text{ background:url(../images/black60.png);width:200px; height:200px;}
.ld-center{display: table; height: 200px;}
.texts{display: table-cell; vertical-align:middle; text-align:center;padding:0 30px;color:#fff; font-size:12px;}

现场下定并参与全场统一收银即可在付款时享受5%优惠注意：仅限1F建材品牌+2F（部分建材品牌）+3F家具品牌参与。（部分品牌不参与，详见现场）

【css多元素垂直居中】

<div class="section">
	<div class="kz-content"></div>
</div>

.section {
	width:100%;
	display: table;
	position:relative;
}
.kz-content {
	display: table-cell;
	vertical-align: middle;
}

【a标签点击拨打电话】

<a href="tel:05222222"></a>

【禁止右击复制】

document.oncontextmenu=new Function('event.returnValue=false;'); document.onselectstart=new Function('event.returnValue=false;');

【f截图、截屏、放大镜小工具】

FastStone下载

【css延迟效果、慢慢变色】

-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;transition: all .3s ease-out;

【禁止页面缩放】

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

【让低版本浏览器支持html5标签】

<!--[if lt IE 9]>
<script>
(function() {
	if (! /*@cc_on!@*/
	0) return;
	var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
	var i = e.length;
	while (i--) {
		document.createElement(e[i])
	}
})()
</script>
<![endif]-->

【jquery除指定区域外点击任何地方隐藏DIV】


//第一种方法
$('.btn').on('click',function(e){
    $('.box').show();
    e.stopPropagation();
})
$('body').on('click',function(){
    $('.box').hide();
})
//第二种方法
$('body').click(function(e) {
        var target = $(e.target);
 
        // 如果#overlay或者#btn下面还有子元素，可使用
        // !target.is('#btn *')
        if(target.is('#btn')){
            $('.box').show();
        }else{
            $('.box').hide();
        }
    });

【让浏览器默认IE8加载】

<meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

【大转盘特效转盘素材】

大转盘特效下载大转盘特效演示大转盘PSD素材下载

【错误、正确、提示、提醒、弹框、弹窗、iconfont、font、图标】

[样式1]

<!--提示-->
<div class="tip-success-bg tip-tip-box">
    <div class="tip-tip-box-nei">
    	<strong>您还没有输入内容</strong>
    </div><!--tip-tip-box/-->
</div><!--tip-success-bg/-->
<!--提示-->

/*各种提示*/

.tip-success-bg{ position:fixed;left:0;top:50%;width:100%; text-align:center;z-index:15; display:none;} .tip-success-bg div{ cursor:default;}
.tip-tip-box{ height:34px; margin:-20px 0 0 0;}
.tip-tip-box-nei{ display:inline-block;height:34px;padding:0 10px; line-height:34px; background-color:rgba(0,0,0,0.6);; -moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius:5px; opacity:0;color:#fff; font-size:14px;}
.tip-tip-box-nei i{ font-size:18px;margin-right:5px;color:#FF3;position:relative;top:2px;}

//提示
function tip() { //从这里 开
	$(".tip-tip-box").fadeIn();
	$(".tip-tip-box-nei").animate({
		opacity: "1"
	}, function() {
		$(".tip-tip-box-nei").animate({
			opacity: "1"
		}, 2000, function() {
			$(".tip-tip-box-nei").animate({
				opacity: "0"
			}, 1000)
			$(".tip-success-bg").fadeOut()
		})
	})
	//到这里 结束 
}

弹框样式1演示成功提示错误提示 fonts图标下载 fonts图标代码演示

【jquery获取焦点、失去焦点】

$(".获取焦点").focus(function(){})
$(".失去焦点"blur(function(){})

【清除input select 默认样式】

appearance:none;
-moz-appearance:none;
-webkit-appearance:none;

【移动端 ios苹果手机滑动不流畅滚动不流畅】

div{-webkit-overflow-scrolling: touch;}

【移动端 ios苹果手机fixed抖动不流畅滚动不流畅】

div{-webkit-transform: translateZ(0);}

【jquery全屏滚动插件】

效果演示下载

【ftp工具】

FTP下载

【psphotoshopcs6 设计工具】

PS下载

【dwdreamweavercs6 代码编辑器制作工具】

DW下载

【aics6 设计工具】

AI下载

【jquery选择器变量 id class】

var oTxt="id";
$("."+oTxt)
$("#"+oTxt)

【Visual Studio Code代码编辑器】

Visual Studio Code下载
语言设置

1、快捷键
Windows、Linux 快捷键是：ctrl+shift+p
macOS 快捷键是：command + shift + p
2、搜索：
配置语言或者 Configure Language

【PC亮度调节器】

亮度调节器下载

【让ifram在移动端苹果ios支持滚动】

.layui-tab-item {
	-webkit-overflow-scrolling: touch;
	overflow-y: scroll;
}
layui-tab-item iframe {
	width: 100%;
	height: 100%;
}

【jquery 刷新页面随机显示展示图片】

<div class="suiji"></div>

.suiji{
width:200px;
height:150px;
background-image:url("");
background-size:100%;
}

$(document).ready(function(){
    var random_bg=Math.floor(Math.random()*6+1);
    var bg='url(images/'+random_bg+'.jpg)';
    $(".suiji").css("background-image",bg);
});

【jquery 点击随机显示展示图片】

<img src="images/1.jpg" id="img1" />
<input id="btn1" type="button" value="变换" />

#img1{
    width:200px;
    height:150px;
}

$(function() {
	$('#btn1').click(function() {
		var num = Math.floor(Math.random() * 6 + 1);
		$('#img1').attr('src', 'images/' + num + '.jpg')
	})
})

【css3 gif效果图片切换】

<div class="element2 infinite"></div>

.element2{
    width:266px;
    height:72px;
    overflow:hidden;
    animation: 1s element ease-in infinite;
}
@keyframes element{
    0%{background:url(001.png);}
    25%{background: url(002.png);}
    50%{background: url(003.png);}
    75%{background: url(004.png);}
    100%{background: url(001.png);}
}

【jquery 定时器】

只执行一次

window.setTimeout('$(".share").fadeOut()',4000);
//定时器 异步运行 
function hello(){ 
	alert("hello"); 
} 
//使用方法名字执行方法 
var t1 = window.setTimeout(hello,1000); 
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 
window.clearTimeout(t1);//去掉定时器

重复执行

function hello(){ 
	alert("hello"); 
} 
//重复执行某个方法 
var t1 = window.setInterval(hello,1000); 
var t2 = window.setInterval("hello()",3000); 
//去掉定时器的方法 
window.clearInterval(t1);

【手机滑动日期选择插件】

下载

【手机城市选择插件】

下载

【prism 网页代码高亮显示、美化】

打开网址

【瀑布流 flow 特效】

下载瀑布流

【图片切换图片滚动相册】

下载相册特效

【抽奖奖池转盘】

下载抽奖特效

【jquery 上传图片带进度条压缩图片】

查看效果下载上传特效

【jquery 随机数字切换】

下载数字特效

【css 禁止点击】

pointer-events: none;cursor: default;

【jq判断页面滚动到底部最底部瀑布流】

var totalHeight = 0; //定义一个总高度变量
function zxScroll() { //loa动态加载数据
	totalHeight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); //浏览器的高度加上滚动条的高度
	if ($(document).height() <= totalHeight) { //当文档的高度小于或者等于总的高度时，开始动态加载数据
		//加载数据
		$(".zx_ft_container").fadeOut();
	} else {
		$(".zx_ft_container").fadeIn();
	}
}
$(window).scroll(function() {
	zxScroll();
})

【质感发光闪闪】

发光了！

<a href="javascript:;" class="loadings zhigan">加载更多<span class="zgbg"></span>

.loadings {
	display:block;
	width:200px;
	height:.7rem;
	line-height:.7rem;
	background-image: linear-gradient(-225deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%);
	color:#fff;
	text-align:center;
	font-size:.3rem;
	border-radius:.1rem;
}
.zhigan {
	position:relative;
	overflow:hidden;
}
.zgbg {
	position:absolute;
	width:1.28rem;
	height:.72rem;
	background:url(../images/zhigan.png) center center no-repeat;
	background-size:101%;
	left:-.6rem;
	top:0;
	z-index:4;
}

function animates() {
	$(".zgbg").animate({
		left: '7rem',
		opacity: "1"
	}, 500, function() {
		$(".zgbg").css({
			"left": "0",
			"opacity": "0"
		})
	})
	setTimeout("animates()", 2000);
}
animates();

【----置 顶----】

【网站文档】

【css3 放大缩小】

【css 按钮点击样式】

【css 鼠标经过图片放大】

【jquery 每隔几个 奇数 偶数】

【css鼠标经过阴影渐渐效果】

【jquery 数字滚动 翻滚】

【jquery 数字滚动 翻滚2】

【js移动端弹窗弹框提示框插件】

【jquery 限制字符】

【rem.js网页自适应单位换算】

【虚拟主机开子域名二级域名】

【网站css、js调用】

【css固定定位超出可滚动】

【ico小图标调用代码】

【html meta跳转链接 刷新】

【全选全不选】

[演示]

【ico小图标在线生成链接】

【zepto 弹框提示错误正在加载】

[演示]

【jquery 判断元素是否具有某个class】

【css圆角】

[横版写法]

[竖版版写法]

[顺序]

【css背景半透明】

【jquery无缝滚动向左向右】

【页面 图片延迟加载】

【jquery无缝滚动向上向下】

【jquery 判断元素里是否包含某个文字】

【jquery onclick this关闭】

【jquery上传图片】

【css清除浮动】

[方法1]

[方法2]

【css摇摆、抖动效果】

【css颤抖、抖动效果】

【css摇晃、晃动来回摇摆】

【分页】

【css3实现闪光效果】

【css内外边距不占宽高】

【背景视差滚动】

【css延迟效果，比如鼠标经过渐渐的变色】

[竖版]

[横版]

【css背景色渐变】

[上下]

[左右]

[渐变配色网]

【jquery监听浏览器窗口大小】

【video视频播放插件】

【css阴影】

【css让图片变灰】

【css设置【禁止换行 强制不换行】【自动换行】【强制英文单词断行】

【css英文字母全大写小写】

【jquery jq英文字母全小写大写】

【404页面】

【css旋转 经过旋转】

【css按钮】

【css限制字符，超出部分省略号】

【css、js、html美化】

【素材下载、查找网址】

[下载]】

[特效]】

[图片]】

[网站字体图标]】

【iframe】

【jquery或者js刷新页面】

【jquery跳转链接】

【jquery/js返回上一页】

【jquery将获取的一段数字挨个输出】

【jquery超出隐藏显示、位置、滚动】

【jquery返回顶部、返回底部、返回固定位置、定位、特定位置、滚屏、滚动】

【jquery加减】

【css页面动画wow.js】

【css旋转、大转盘】

【swiper、滚动】

【页面弹框、提示】

【----置顶----】

【jquery 每隔几个奇数偶数】

【jquery 数字滚动翻滚】

【jquery 数字滚动翻滚2】

【html meta跳转链接刷新】

【页面图片延迟加载】

【css设置【禁止换行强制不换行】【自动换行】【强制英文单词断行】

【css旋转经过旋转】

【css 来回跳动上下晃动】

【大转盘特效转盘素材】

【移动端 ios苹果手机滑动不流畅滚动不流畅】

【移动端 ios苹果手机fixed抖动不流畅滚动不流畅】

【dwdreamweavercs6 代码编辑器制作工具】

【css3 gif效果图片切换】

【图片切换图片滚动相册】

【抽奖奖池转盘】

【jquery 上传图片带进度条压缩图片】

【jquery 随机数字切换】

【jq判断页面滚动到底部最底部瀑布流】