.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)
}
}
<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;}
<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)}
$(".gradlist:nth-child(3n)").css("margin-right","0")
<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;}
<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
})
<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>
<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>
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);
}
});
}
<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()+'…');
}
});
<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>
.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;}
点击演示
<link rel="shortcut icon" href="/images/favicon.ico" />
<!--只是刷新不跳转到其他页面 -->
<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);
}
});
$('#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
});
})
hasClass() //方法检查被选元素是否包含指定的 class。 语法
$(selector).hasClass(class)
//例子:
if($("#b").hasClass("a")){
alert("包含class a");
}
-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;上、右、下、左
background-color:rgba(0,0,0,0.2);
.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);
})
})
<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
});
.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);
})
})
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>')
}
$("#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();
}
<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;
}
}
}
.clearfix:after{ display:block; visibility:hidden; clear:both; height:0; content:".";} .clearfix{zoom:1}
<div class="clearfix"></div>
<div style="clear:both;"></div>
@-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;
}
<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);
}
}
<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;}
@-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>
*{-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}
-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;
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%);
$(window).resize(function() {
var width = $(window).width();
});
播放: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);
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;
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+ */ }
/*强制不换行*/
white-space:nowrap;
/*自动换行*/
word-wrap: break-word;
word-break: normal;
/*强制英文单词断行*/
word-break:break-all;
text-transform:uppercase
capitalize 英文拼音的首字母大写
uppercase 英文拼音字母全大写
lowercase 英文拼音字母全小写
var a="aBcD";a=a.toLowerCase();
alert(a);
//提示出来的就是 abcd
var a="aBcD";
a=a.toUpperCase();
alert(a);
//提示出来的就是 ABCD
.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);
}
.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;}
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
<iframe border="0" src="map.html" frameborder="0" width="100%" height="300"></iframe>
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() {上面选一个放到这里。
});
window.location.href='http://www.baidu.com';
<a href="javascript:;" onclick="javascript:history.back(-1);">返回</a>
<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>')
}
})
//底部报名
$(window).scroll(function() {
if ($(this).scrollTop() > 965) {
$(".foot-baoming").fadeIn()
} else {
$(".foot-baoming").fadeOut()
}
})
//页面滚屏
$(".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);
})
// 数量加减
$(".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);
});
<div class="wow bounceIn" data-wow-duration="1s" data-wow-delay="0s"></div> data-wow-duration="1s" 动画时间 data-wow-delay="0s" 动画什么时候执行
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 | 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变 |
<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
}
<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动画演示
<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]下载
$(this).children(".chilp").stop(true,true).slideToggle()
<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-->
$(window).load(function() {
var oTxt = $(".bkyy-list").length
var num = parseInt(oTxt);
if (num % 2 == 0) {
return true;
} else {}
})
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();
})
<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);
}
}
//去掉#号
var oTxt="#1244" oTxt=oTxt.replace('#','');
display: table-cell;vertical-align: middle;
<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;}
<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 href="tel:05222222"></a>
document.oncontextmenu=new Function('event.returnValue=false;'); document.onselectstart=new Function('event.returnValue=false;');
-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" />
<!--[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]-->
//第一种方法
$('.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();
}
});
<meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--提示-->
<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图标代码演示
$(".获取焦点").focus(function(){})
$(".失去焦点"blur(function(){})
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
div{-webkit-overflow-scrolling: touch;}
div{-webkit-transform: translateZ(0);}
var oTxt="id";
$("."+oTxt)
$("#"+oTxt)
.layui-tab-item {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
layui-tab-item iframe {
width: 100%;
height: 100%;
}
<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);
});
<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')
})
})
<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);}
}
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);
pointer-events: none;cursor: default;
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();