html,Code片段,代码实例,代码示例,代码片段库

html Отображениеиперемещениеслоязамышью

Отображениеиперемещениеслоязамышью

move.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#pointer-block {
  font: 50px sans-serif;
  text-transform: uppercase;
  text-align: center;
  width: 200px;
  padding: 30px;
  border: 5px black dashed;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  position: absolute;
  display: none;
}
</style>
<script language="JavaScript" type="text/javascript">
window.onload = function() {
  var pointer = document.getElementsByClassName('pointer')[0];
  var pointerBlock = document.getElementById('pointer-block');
  pointer.onclick = function(e) {
    pointerBlock.style.display = 'block';
    pointerBlock.style.top = (e.pageY+25) + 'px';
    pointerBlock.style.left = e.pageX + 'px';
    document.body.onmousemove = function(e) {
      pointerBlock.style.top = (e.pageY+25) + 'px';
      pointerBlock.style.left = e.pageX + 'px';
    }
  }
}
</script>
</head>
<body>
<div id="pointer-block">Move</div>
<div id="block" style="width: 500px; height: 600px">
  <a href="#" class="pointer" style="margin: 100px; display: inline-block">link</a>
</div>
</body>
</html>

html 使用jQuery编号验证表单

使用jQuery编号验证表单

gistfile1.html

<div id="MyForm">
<form method="POST" name="info-form">
    <input type="hidden" value="/form-sent" name="returnURL" />
    <label for="First Name">First Name: </label>
    <input type="text" name="First Name" maxlength="40" />
    <label for="Last Name">Last Name: </label>
    <input type="text" name="Last Name" maxlength="80" />
    <label>Enter the below number: </label>
    <input type="hidden" value="701469" id="verifyNumHidden" name="verifyNumHidden" />
    <input type="text" id="enterVerify" name="enterVerify" />
    <div id="verifyNum"></div>
    <input type="submit" value="Submit" name="save" class="cat_button" />
</form>
</div>

html 使用jQuery的交付表单

使用jQuery的交付表单

gistfile1.html

<form id="checkDelivery">
	<label for="postcode">Enter your postcode</label>
	<input type="text" required name="postcode"/>
	<button class="button">Submit</button>
</form>
<div id="delivery_options"></div>

<script>
$('#checkDelivery').submit(function() {
	var data = $(this).serializeArray(),
	    postcodes = [2015,2019,2011];
	jQuery.each(data, function(i, field){
		if ( $.inArray(parseInt(field.value), postcodes) != -1 ) {
			$('#delivery_options').html('<p>Yes, we deliver to your area!</p>');
		}
		else {
			$('#delivery_options').html('<p>Unfortunately, we do not deliver to your area.</p>');
		}
	});
	return false;
});
</script>

html 表到Divs - HTML

表到Divs - HTML

gistfile1.html

<table class="productTable ">
  <tbody>
    <tr>
      <td class="productItem">
        <div class="product_item">
         Product 1
        </div>
      </td>
      <td class="productItem">
        <div class="product_item">
         Product 2
        </div>
      </td>
    </tr>
  </tbody>
</table>

html 调用隐藏iframe

调用隐藏iframe

gistfile1.html

<a href="#" onclick="HideFrame()">Sample text</a>

html AJAX调用包括JS和CSS

AJAX调用包括JS和CSS

gistfile1.html

<a href="javascript:ajaxpage('test.htm', 'contentarea'); loadobjs('external.css', 'feature.js')">test</a>
<div id="contentarea"></div>

html 进行重新取样。

进行重新取样。

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg { font: 10px sans-serif; }
.brsh .extent { fill: steelblue; stroke: grey; stroke-width: 0.5px; fill-opacity: .125;}
.brsh .back   { fill: none; stroke: black; stroke-width: 1px;}
.line         { fill: none; stroke: black; stroke-width: 1px; }
.axis         { fill: none; stroke: black; }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
    function Complex(re, im) { this.re  =   re; this.im  =   im; };
    Complex.prototype.clone = function(){ return new Complex(this.re,this.im); };
    Complex.prototype.add = function(z) { this.re += z.re; this.im += z.im; return this; };
    Complex.prototype.sub = function(z) { this.re -= z.re; this.im -= z.im; return this; };
    Complex.prototype.mul = function(z) 
    { 
        var tmp = this.re;
        this.re = this.re*z.re - this.im*z.im; 
        this.im =     tmp*z.im + this.im*z.re; 
        return this;
    };
                                                     
    Complex.prototype.div = function(z) 
    { 
        var tmp =  this.re, 
              n =     z.re*z.re +    z.im*z.im;
        this.re = (this.re*z.re + this.im*z.im)/n; 
        this.im = (   -tmp*z.im + this.im*z.re)/n; 
        return this;
    };
                                                     
 
 
    var width = 960, height = 500;

 
    var svg = d3.select("body")
                .append("svg")
                .attr("width",   width)
                .attr("height", height);

    svg.append("clipPath")
       .attr("id","clip")
       .append("rect")
            .attr("x",0).attr("y",0)
            .attr("width",width/2).attr("height",height);


    var mapd = svg.append("g").attr("class","mapd").attr("clip-path","url(#clip)");

    var brsh = svg.append("g").attr("class","brsh")
                              .attr("transform","translate("+width/2+")");

    var brsb = brsh.append("g");
 
    var x1 = d3.scale.linear().range([0, width/2]).domain([-3, 3]);
    var y1 = d3.scale.linear().range([ height, 0]).domain([-3, 3]);
    var x2 = d3.scale.linear().range([0, width/2]).domain([-3, 3]);
    var y2 = d3.scale.linear().range([ height, 0]).domain([-3, 3]);

    mapd.append("g").attr("class","axis")
        .attr("transform","translate(0,"+height/2+")")
        .call(d3.svg.axis().scale(x1).orient("bottom"));

    mapd.append("g").attr("class","axis")
        .attr("transform","translate("+width/4+")")
        .call(d3.svg.axis().scale(y1).orient("left")); 

    brsh.append("g").attr("class","axis")
        .attr("transform","translate(0,"+height/2+")")
        .call(d3.svg.axis().scale(x2).orient("bottom"));

    brsh.append("g").attr("class","axis")
        .attr("transform","translate("+width/4+")")
        .call(d3.svg.axis().scale(y2).orient("left"));

    var line1 = d3.svg.line()
                      .x(function(d) { return x1(d.re); })
                      .y(function(d) { return y1(d.im); });

    var line2 = d3.svg.line()
                      .x(function(d) { return x2(d.re); })
                      .y(function(d) { return y2(d.im); });

    var brush = d3.svg.brush().x(x2).y(y2).on("brush", plot);    

    brsh.append("rect").attr("class","back")
                       .attr("width",width/2)
                       .attr("height",height);

    brsh.call(brush);

    function plines(sel,data, f)
    {
        var paths = sel.selectAll('.line').data(data);
        paths.enter().append('path').attr('class','line');
        paths.attr('d',f);
        paths.exit().remove();
    }


    function f(z) { return z.add((new Complex(1,0)).div(z)) }

    function resample(func,eps)
    {

        function dist(z0,z,z1)
        {
            var dx10 = z1.re-z0.re, dy10 = z1.im-z0.im;
            var dx0  =  z.re-z0.re,  dy0 =  z.im-z0.im;
            return Math.pow(dx10*dy0-dy10*dx0,2)/(dx0*dx0+dy0*dy0);
        }

        var ps = d3.range(-Math.PI,Math.PI,Math.PI/8);

        function refStep(dat)
        {
            for(var i = 0; i < dat.length; i++)
            {
                var p0 = dat[i], p1 = dat[i+1<dat.length?i+1:0];
                var newp = (p0+p1)/2;
                if( p1-p0 >= Math.PI || p1-p0 <= -Math.PI ) newp += Math.PI;
                if(dist(func(p0),func(newp),func(p1)) > eps) dat.splice(++i,0,newp);
            }
        }

        refStep(ps);
        refStep(ps);
        refStep(ps);
        refStep(ps);
        refStep(ps);

        return ps.map(func);
    }

    function plot()
    { 
        if(brush.empty()) return;
        ext = brush.extent();
        
        var x0 = (ext[1][0] + ext[0][0])/2;
        var y0 = (ext[1][1] + ext[0][1])/2;
        var dx = (ext[1][0] - ext[0][0])/2;
        var dy = (ext[1][1] - ext[0][1])/2;
        
        var data = d3.range(1/20,1,1/20).map(function(r){
            var parametric = function(t){return f(new Complex(x0+r*dx*Math.cos(t),y0+r*dy*Math.sin(t)));}
            return resample(parametric,0.0001);});

        plines(brsb, 
               d3.range(1/20,1,1/20).map(function(r){ 
                    return d3.range(-Math.PI,Math.PI,Math.PI/20).map(function(p){
                        return new Complex(x0+r*dx*Math.cos(p),y0+r*dy*Math.sin(p))})}),
        function(d){return line2(d)+'Z';});

        plines(mapd,data,function(d){return line1(d)+'Z';});
    }

</script>
</body>

html Meta：视口无缩放

Meta：视口无缩放

meat-viewport.html

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

html Joukowski + d3.brush

Joukowski + d3.brush

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg { font: 10px sans-serif; }
.brsh .extent { fill: steelblue; stroke: grey; stroke-width: 0.5px; fill-opacity: .125;}
.brsh .back   { fill: none; stroke: black; stroke-width: 1px;}
.line         { fill: none; stroke: black; stroke-width: 0.5px; }
.axis         { fill: none; stroke: black; }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
    function Complex(re, im) { this.re  =   re; this.im  =   im; };
    Complex.prototype.clone = function(){ return new Complex(this.re,this.im); };
    Complex.prototype.add = function(z) { this.re += z.re; this.im += z.im; return this; };
    Complex.prototype.sub = function(z) { this.re -= z.re; this.im -= z.im; return this; };
    Complex.prototype.mul = function(z) 
    { 
        var tmp = this.re;
        this.re = this.re*z.re - this.im*z.im; 
        this.im =     tmp*z.im + this.im*z.re; 
        return this;
    };
                                                     
    Complex.prototype.div = function(z) 
    { 
        var tmp =  this.re, 
              n =     z.re*z.re +    z.im*z.im;
        this.re = (this.re*z.re + this.im*z.im)/n; 
        this.im = (   -tmp*z.im + this.im*z.re)/n; 
        return this;
    };
                                                     
 
 
    var width = 960, height = 500;
 
    var svg = d3.select("body")
                .append("svg")
                .attr("width",   width)
                .attr("height", height);

    var mapd = svg.append("g").attr("class","mapd");

    var brsh = svg.append("g").attr("class","brsh")
                              .attr("transform","translate("+width/2+")");

    var brsb = brsh.append("g");
 
    var x1 = d3.scale.linear().range([0, width/2]).domain([-10, 10]);
    var y1 = d3.scale.linear().range([ height, 0]).domain([-10, 10]);
    var x2 = d3.scale.linear().range([0, width/2]).domain([-2, 2]);
    var y2 = d3.scale.linear().range([ height, 0]).domain([-2, 2]);

    mapd.append("g").attr("class","axis")
        .attr("transform","translate(0,"+height/2+")")
        .call(d3.svg.axis().scale(x1).orient("bottom"));

    mapd.append("g").attr("class","axis")
        .attr("transform","translate("+width/4+")")
        .call(d3.svg.axis().scale(y1).orient("left")); 

    brsh.append("g").attr("class","axis")
        .attr("transform","translate(0,"+height/2+")")
        .call(d3.svg.axis().scale(x2).orient("bottom"));

    brsh.append("g").attr("class","axis")
        .attr("transform","translate("+width/4+")")
        .call(d3.svg.axis().scale(y2).orient("left"));

    var line1 = d3.svg.line()
                      .x(function(d) { return x1(d.re); })
                      .y(function(d) { return y1(d.im); });

    var line2 = d3.svg.line()
                      .x(function(d) { return x2(d.re); })
                      .y(function(d) { return y2(d.im); });

    var brush = d3.svg.brush().x(x2).y(y2).on("brush", plot);    

    brsh.append("rect").attr("class","back")
                       .attr("width",width/2)
                       .attr("height",height);

    brsh.call(brush);

    function plines(sel,data, f)
    {
        var paths = sel.selectAll('.line').data(data);
        paths.enter().append('path').attr('class','line');
        paths.attr('d',f);
        paths.exit().remove();
    }


    function plot()
    { 
        if(brush.empty()) return;
        ext = brush.extent();
        
        var x0 = (ext[1][0] + ext[0][0])/2;
        var y0 = (ext[1][1] + ext[0][1])/2;
        var dx = (ext[1][0] - ext[0][0])/2;
        var dy = (ext[1][1] - ext[0][1])/2;
        
        var data = d3.range(0,1,1/20).map(function(r){
            return d3.range(-Math.PI,Math.PI,Math.PI/20).map(function(p){
            return new Complex(x0+r*dx*Math.cos(p),y0+r*dy*Math.sin(p));})})

        plines(brsb,data,function(d){return line2(d)+'Z';});
        data.forEach(function(d){d.forEach(function(z) {z.add((new Complex(1,0)).div(z));})});
        plines(mapd,data,function(d){return line1(d)+'Z';});
    }

</script>
</body>

html .htaccess加速网络

.htaccess加速网络

gistfile1.html

# Enable GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</ifmodule>

# Expires Headers - 2678400s = 31 days
<ifmodule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 0 seconds"
  ExpiresByType image/gif "access plus 2678400 seconds"
  ExpiresByType image/jpeg "access plus 2678400 seconds"
  ExpiresByType image/png "access plus 2678400 seconds"
  ExpiresByType text/css "access plus 518400 seconds"
  ExpiresByType text/javascript "access plus 2678400 seconds"
  ExpiresByType application/x-javascript "access plus 2678400 seconds"
</ifmodule>

# Cache Headers
<ifmodule mod_headers.c>
  # Cache specified files for 31 days
  <filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
  Header set Cache-Control "max-age=2678400, public"
  </filesmatch>
  # Don't cache HTML
  <filesmatch "\.(html|htm)$">
  Header set Cache-Control "max-age=0, private, must-revalidate"
  </filesmatch>
  # Cache PDFs for a day
  <filesmatch "\.(pdf)$">
  Header set Cache-Control "max-age=86400, public"
  </filesmatch>
  # Cache Javascripts for 31 days
  <filesmatch "\.(js)$">
  Header set Cache-Control "max-age=2678400, private"
  </filesmatch>
</ifmodule>