实用的loading插件 一个兼容移动端pc以及ie10以上的loading插件

loading

一个兼容移动端pc以及ie10以上的loading插件

演示地址: http://www.daiwei.org/components/loading/

direction

方向,column纵向 row 横向

animateIn

进入类型,这里不需要引用animatecss(因为个人觉得loading效果不需要太花哨,默认fadeInNoTransform,其他设置都不会有动画效果)

title

loading的title名称 为” 则不显示

titleColor

title的文字颜色

name

loading的name名称 这算是唯一标识,重复的name的loading不会再生成,因此每次需要给一个name属性

type

loading显示的样式   是转动的小圆球 origin 还是图片 pic

discription

loading的描述  为” 则不显示

discColor

loading的描述颜色

loadingWidth

默认260 loading的宽度

loadingBg

默认 ‘rgba(0, 0, 0, 0.6)’ loading的背景色

borderRadius

默认12 loading的圆角

loadingMaskBg

默认 transparent loading的遮罩层背景色

zIndex

默认 1000001 loading的层级

圆形旋转的loading样式  (origin)

originDivWidth

默认 60 loading内部圆球区域的宽度

originDivHeight

默认 60 loading内部圆球区域的高度

originWidth

默认 8 小圆球的宽度

originHeight

默认 8 小圆球的高度

originBg

默认’#fefefe’ 小圆球的背景色

smallLoading

默认 false 是否显示更小一点的旋转小球效果

这是图片的样式   (pic)

imgSrc

默认的图片地址

imgDivWidth

默认 80 图片的宽度

imgDivHeight

默认 80 图片的高度

flexCenter

默认false, 是否用flex布局让loading-div垂直水平居中

flexDirection

默认’row’ row column flex的方向 横向 和 纵向

mustRelative

默认false 调用loading的元素是否规定relative

 

https://github.com/IFmiss/loading

用CSS3实现瀑布流布局

以前使用瀑布流都要用js,现在有了css3,可以轻松实现了。

掌握点:

1、column-count 把div中的文本分为多少列

2、column-width 规定列宽

3、column-gap 规定列间隙

4、break-inside: avoid; 避免元素内部断行并产生新列

注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。

实例:

复制代码




CSS3瀑布流


1 convallis timestamp

2 convallis timestamp 2 Donec a fermentum nisi.

3 Nullam eget lectus augue. Donec eu sem sit amet ligula
faucibus suscipit. Suspendisse rutrum turpis quis nunc
convallis quis aliquam mauris suscipit.

4 Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue.

5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.



复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3瀑布流</title>
    <style>
    /*大层*/
    .container{width:80%;margin: 0 auto;}
    /*瀑布流层*/
    .waterfall{
        -moz-column-count:4; /* Firefox */
        -webkit-column-count:4; /* Safari 和 Chrome */
        column-count:4;
        -moz-column-gap: 1em;
      -webkit-column-gap: 1em;
      column-gap: 1em;
    }
    /*一个内容层*/
    .item{
      padding: 1em;
      margin: 0 0 1em 0;
      -moz-page-break-inside: avoid;
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
     border: 1px solid #000;
    }
    .item img{
        width: 100%;
        margin-bottom:10px;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="waterfall">
            <div class="item">
                <img src="https://imgsa.baidu.com/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=f3d4063328738bd4d02cba63c0e2ecb3/a2cc7cd98d1001e910616de1be0e7bec55e797fa.jpg">
                <p>1 convallis timestamp</p>
           </div>



            <div class="item">
                <img src="https://imgsa.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=03948ea9b4315c60579863bdecd8a076/8326cffc1e178a825a6b5d1cfe03738da977e833.jpg">
                <p>2 convallis timestamp 2 Donec a fermentum nisi. </p>
           </div>




            <div class="item">
                <img src="https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=3d645bf2d0ca7bcb6976cf7ddf600006/6d81800a19d8bc3efe5f64fb858ba61ea8d345af.jpg">
                <p>3 Nullam eget lectus augue. Donec eu sem sit amet ligula 
        faucibus suscipit. Suspendisse rutrum turpis quis nunc 
        convallis quis aliquam mauris suscipit.</p>
           </div>



            <div class="item">
                <img src="https://imgsa.baidu.com/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=fbc3501b0a087bf469e15fbb93ba3c49/bf096b63f6246b60ea65dd24e3f81a4c510fa273.jpg">
                <p> 4 Donec a fermentum nisi. Integer dolor est, commodo ut 
        sagittis vitae, egestas at augue. </p>
           </div>

  <div class="item">
                <img src="https://imgsa.baidu.com/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=9fe1d71697ef76c6c4dff379fc7f969f/b03533fa828ba61ed2efcd184634970a304e5987.jpg">
                <p> 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
           </div>
        </div>
    </div>
</body>
</html>

html5 css3 实现瀑布流布局

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Consectetuer adipiscing elit.
  • Eu risus.
  • Vestibulum auctor dapibus neque.
  • Lorem ipsum dolor sit amet
  • Aliquam tincidunt mauris eu risus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Vestibulum auctor dapibus neque.

.example {
-webkit-columns: 150px;
-moz-columns: 150px;
columns: 150px;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
}

body {
font-size: 12px;
font-family: ‘Georgia’, serif;
font-weight: 400;
line-height: 1.45;
color: #333;
background: #ecf0f1;
padding: 1em;
}

li {
background: white;
padding: 1em;
margin-bottom: 1.3em;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}

html 表格布局 简单dome


<style type="text/css">
/*表格*/
.table_vs .td1{background:#ded1e9;width: 30%; height: 45px;}
.table_vs .td2{background: #efe9ff;}
.table_vs .td3{background:#fee2b5; width: 35%;}
</style>

<table align="center" border="0" cellpadding="0" cellspacing="1" style="text-align: center;" width="100%" class="table_vs">
<thead>
<tr>
<td class="td1" style="background-color: #ee2a39; color:#fff; text-align:center; font-weight:bold; font-size:17px; padding-top:2%; padding-bottom:2%;">真爱医院</td>
<td class="td2" style="background-color: #ffdadd; color:#fff; font-weight:bold; font-size:17px; padding-top:2%; padding-bottom:2%">VS</td>
<td class="td3" style="background-color: #4c4c4c; color:#fff; text-align:center; font-weight:bold; font-size:17px; padding-top:2%; padding-bottom:2%;">其他医院</td>
</tr>
</thead>
<tbody>
<tr >
<td class="td1">
<p>必要的检查,大约在200元左右</p></td>
<td class="td2">
术前</td>
<td class="td3">
<p>200-500元</p></td>
</tr>

<tr >
<td class="td1">
<p>根据孕囊大小、手术方式不同,价格大约在600-2000元不等</p></td>
<td class="td2">
术中</td>
<td class="td3">
<p>1000-3000元</p></td>
</tr>

<tr >
<td class="td1">
<p>术后消炎药约百元左右 </p></td>
<td class="td2">
术后</td>
<td class="td3">
<p>1000-3000元</p></td>
</tr>

<tr >
<td class="td1">
<p>1000-2000元左右</p></td>
<td class="td2">
总计</td>
<td class="td3">
<p>1000-3000元</p></td>
</tr>
</tbody>
</table>

CSS解决段落缩进图片不缩进问题

段落前面空两个字的距离,不要再使用空格了。应该使用首行缩进text-indent。
text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。

<style type="text/css">
p{
text-indent: 2em; /*em是相对单位,2em即现在一个字大小的两倍*/
}
</style>

注:div标签不要忘记起始符。text-indent只对p或div标签有效,对br标签不生效,原因是br标签是换行标签不是分段标签。
用CSS实现段落首缩进两个字符,实现首行缩进的通用方法是加四个小角空格。
在style里定义如下缩进样式:.suojin{text-indent:2em}
在需要缩进的地方使用class=”suojin”即可,比如用一个div定义一整块段落首先缩进,
凡在div区域里,浏览器一碰上p语句(即一个新段的开始),就会执行.suojin所定义的缩进。
也可以在正文中使用嵌入式CSS样式来定义,下面举个实例(使用时请将尖括号改为小角尖括号):

<div style="text-indent:2em">
<p>段落一</p>
<p>段落二</p>
<p>段落三<p>
</div>

可加了这个缩进后当遇到正文内容中有独立段落的图片时,图片也会被缩进,这样会很影响排版。而且对于缩进后的图片大小也不好把握,对于自适应主题尤其如此。所以很多人因为搞不定图片这个问题最后放弃了使用段落首行缩进。
其实text-indent有个很奇怪的属性,就是其内部元素遇到float或者display: block后就不继承外部这个缩进的属性了,也就是说,只要给图片加上float或者display: block的 CSS 属性后,图片的缩进会自动失效。
但是为了排版的效果,一般都使用display:block;,这样图片就不会与文字并排,图片单独占一行。

烟花 canvas html html5

<html><head>
<meta charset=”UTF-8″>
<title>canvas basic – firework – happy new year!</title>
<style>
*{margin: 0px;padding: 0px;}
canvas {display: block;}
</style>
</head>

<body>
<canvas id=”canvas” width=”1920″ height=”933″></canvas>
<script src=”http://www.100sucai.com/js/jquery.js”></script>

<script src=”js/index.js”>
$(function() {
var canvas = $(‘#canvas’)[0];
canvas.width = $(window).width();
canvas.height = $(window).height();
var ctx = canvas.getContext(‘2d’);

// init
ctx.fillStyle = ‘#000’;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// objects
var listFire = [];
var listFirework = [];
var fireNumber = 10;
var center = { x: canvas.width / 2, y: canvas.height / 2 };
var range = 100;
for (var i = 0; i < fireNumber; i++) {
var fire = {
x: Math.random() * range / 2 – range / 4 + center.x,
y: Math.random() * range * 2 + canvas.height,
size: Math.random() + 0.5,
fill: ‘#fd1’,
vx: Math.random() – 0.5,
vy: -(Math.random() + 4),
ax: Math.random() * 0.02 – 0.01,
far: Math.random() * range + (center.y – range)
};
fire.base = {
x: fire.x,
y: fire.y,
vx: fire.vx
};
//
listFire.push(fire);
}

function randColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var color = ‘rgb($r, $g, $b)’;
color = color.replace(‘$r’, r);
color = color.replace(‘$g’, g);
color = color.replace(‘$b’, b);
return color;
}

(function loop() {
requestAnimationFrame(loop);
update();
draw();
})();

function update() {
for (var i = 0; i < listFire.length; i++) {
var fire = listFire[i];
//
if (fire.y <= fire.far) {
// case add firework
var color = randColor();
for (var i = 0; i < fireNumber * 5; i++) {
var firework = {
x: fire.x,
y: fire.y,
size: Math.random() + 1.5,
fill: color,
vx: Math.random() * 5 – 2.5,
vy: Math.random() * -5 + 1.5,
ay: 0.05,
alpha: 1,
life: Math.round(Math.random() * range / 2) + range / 2
};
firework.base = {
life: firework.life,
size: firework.size
};
listFirework.push(firework);
}
// reset
fire.y = fire.base.y;
fire.x = fire.base.x;
fire.vx = fire.base.vx;
fire.ax = Math.random() * 0.02 – 0.01;
}
//
fire.x += fire.vx;
fire.y += fire.vy;
fire.vx += fire.ax;
}

for (var i = listFirework.length – 1; i >= 0; i–) {
var firework = listFirework[i];
if (firework) {
firework.x += firework.vx;
firework.y += firework.vy;
firework.vy += firework.ay;
firework.alpha = firework.life / firework.base.life;
firework.size = firework.alpha * firework.base.size;
firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha;
//
firework.life–;
if (firework.life <= 0) {
listFirework.splice(i, 1);
}
}
}
}

function draw() {
// clear
ctx.globalCompositeOperation = ‘source-over’;
ctx.globalAlpha = 0.18;
ctx.fillStyle = ‘#000’;
ctx.fillRect(0, 0, canvas.width, canvas.height);

// re-draw
ctx.globalCompositeOperation = ‘screen’;
ctx.globalAlpha = 1;
for (var i = 0; i < listFire.length; i++) {
var fire = listFire[i];
ctx.beginPath();
ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = fire.fill;
ctx.fill();
}

for (var i = 0; i < listFirework.length; i++) {
var firework = listFirework[i];
ctx.globalAlpha = firework.alpha;
ctx.beginPath();
ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = firework.fill;
ctx.fill();
}
}
})
</script>

</body></html>

jquery 回到顶部

<html>
<head>
<title></title>
</head>
<body>
<style type=”text/css”>
.go-top-trigger {
width: 52px;
height: 52px;
cursor: pointer;
z-index: 10;
right: 13px;
bottom: 132px;
position: fixed;
background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/n/nvn/static/news/imgs/go-top_b1fff84.png) no-repeat;
background-size: 52px auto;
-webkit-background-size: 52px auto;
background-position: right center;}
</style>
<div class=”go-top-trigger” style=”display:none;” ></div>

</body>
<script type=”text/javascript” src=”http://www.jq22.com/js/jquery.min.js”></script>
<script type=”text/javascript”>
$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 300){
$(‘.go-top-trigger’).fadeIn(300);
}else{
$(‘.go-top-trigger’).fadeOut(300);
}
});
$(‘.go-top-trigger’).click(function(){
$(‘html,body’).animate({scrollTop: ‘0px’}, 800);});
});
</script>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
</html>

html首行缩进2字符,可以使用CSS属性中的【text-indent】进行设置。

html首行缩进2字符,可以使用CSS属性中的【text-indent】进行设置。

设置代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>缩进2字符</title>
<style type="text/css">
p{ text-indent:2em;}
</style>
</head>
<body>
<p>首行缩进2字符的案例展示如下。需要多写几行看效果,需要多写几行看效果,需要多写几行看效果,需要多写几行看效果,需要多写几行看效果,需要多写几行看效果,需要多写几行看效果。</p>
</body>
</html>

说明:

text-indent表示段落首行缩进,2em表示缩进2字符。

html 实现 消息咨询提示框 微信提示框 微信咨询按钮

需要引用jquery    图标


&lt;style&gt;
#ding {width:100%; max-width:640px; max-height:100px; position:fixed; top:0; z-index:999999; background-color:#000; background:transparent; color:#FFF; background-color:rgba(0,0,0,0.70);}
.wxin { width:10%; height:100%; overflow:hidden; padding-top:8px; padding-bottom:8px; padding-left:8px; padding-right:8px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #c7c5c5; }
.wxin img { width:100%; max-height:74px;}
.wenz { width:60%; height:100%; overflow:hidden; float:left; margin-left:8px; padding-top:2%;}
.wenz { color:#FFF; font-size:14px;}
.huifu { width:18%; height:100%; overflow:hidden; float:left; background-color:#3daf35; border-radius:6px; text-align:center; padding-top:4px; padding-bottom:4px; margin-top:15px;}
.huifu span { font-size:14px; color:#FFF;}
&lt;/style&gt;
&lt;div id="ding" style="display:none;"&gt;
&lt;div class="wxin"&gt;&lt;img src="/images/wx1.png"&gt;&lt;/div&gt;
&lt;div class="wenz"&gt;&lt;p&gt;真爱在线医生&lt;br&gt;您好,请问有什么可以帮您?&lt;/p&gt;&lt;/div&gt;
&lt;div class="huifu"&gt;&lt;a href="javascript:void(0)" onClick="openZoosUrl();LR_HideInvite();return false;"&gt;&lt;span&gt;回复&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
$(function () {
//绑定滚动条事件
//绑定滚动条事件
$(window).bind("scroll", function () {
var sTop = $(window).scrollTop();
var sTop = parseInt(sTop);
if (sTop &gt;= 10) {
if (!$("#ding").is(":visible")) {
try {
$("#ding").slideDown();
} catch (e) {
$("#ding").show();
}
}
}
else {
if ($("#ding").is(":visible")) {
try {
$("#ding").slideUp();
} catch (e) {
$("#ding").hide();
}
}
}
});
})
&lt;/script&gt;