注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端开发那点事儿

冒犯之处,敬请谅解。

 
 
 

日志

 
 
 
 

HTML5 CSS3 BOX-SHADOW :before,getImageData示例  

2013-05-08 14:41:25|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

HTML5 CSS3 BOX-SHADOW :before,getImageData示例 - Diligent - PHP开发那些事儿
 

<html>
<head>
<title>WUKONG | RZT</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://evanwukong.blog.163.com/blog/./jquery.mobile-1.3.1.css">
<style>
.reportInfoDiv {
    display: none;
}
.debug {
    display: block;
    position: absolute;
    top: 100px;
    left: 100px;
}

.reportInfoDiv1 {
    display: block;
    font-size: 14px;
    position: absolute;
    text-align: left;
    background: gold;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #999999;
    top: 156px;
    left: 40px;
    right: 4px;
}
.reportInfoDiv1:before {
    border-color: transparent gold gold transparent;
    border-style: solid;
    border-width: 10px;
    bottom: 0;
    content: "";
    display: block;
    font-size: 0;
    height: 0;
    left: 50px;
    position: absolute;
    width: 0;
    top: -20px;
    left: 192px;
}


.reportInfoDiv2 {
    display: block;
    font-size: 14px;
    position: absolute;
    text-align: left;
    background: gold;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #999999;
    top: 196px;
    left: 4px;
    right: 40px;
}
.reportInfoDiv2:before {
    border-color: transparent gold gold transparent;
    border-style: solid;
    border-width: 10px;
    bottom: 0;
    content: "";
    display: block;
    font-size: 0;
    height: 0;
    left: 50px;
    position: absolute;
    width: 0;
    top: -20px;
    left: 170px;
}


.reportInfoDiv3 {
    display: block;
    font-size: 14px;
    position: absolute;
    text-align: left;
    background: gold;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #999999;
    top: 250px;
    left: 4px;
    right: 40px;
}
.reportInfoDiv3:before {
    border-color: transparent gold gold transparent;
    border-style: solid;
    border-width: 10px;
    bottom: 0;
    content: "";
    display: block;
    font-size: 0;
    height: 0;
    left: 50px;
    position: absolute;
    width: 0;
    top: -20px;
    left: 150px;
}


.reportInfoDiv4 {
    display: block;
    font-size: 14px;
    position: absolute;
    text-align: left;
    background: gold;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #999999;
    top: 336px;
    left: 4px;
    right: 40px;
}
.reportInfoDiv4:before {
    border-color: transparent gold gold transparent;
    border-style: solid;
    border-width: 10px;
    bottom: 0;
    content: "";
    display: block;
    font-size: 0;
    height: 0;
    left: 50px;
    position: absolute;
    width: 0;
    top: -20px;
    left: 92px;
}



.reportInfoDiv5 {
    display: block;
    font-size: 14px;
    position: absolute;
    text-align: left;
    background: gold;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #999999;
    top: 320px;
    left: 40px;
    right: 4px;
}
.reportInfoDiv5:before {
    border-color: transparent gold gold transparent;
    border-style: solid;
    border-width: 10px;
    bottom: 0;
    content: "";
    display: block;
    font-size: 0;
    height: 0;
    left: 50px;
    position: absolute;
    width: 0;
    top: -20px;
    left: 110px;
}

.reportInfoDiv6 {
    display: block;
    font-size: 14px;
    position: absolute;
    text-align: left;
    background: gold;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #999999;
    top: 314px;
    left: 40px;
    right: 4px;
}
.reportInfoDiv6:before {
    border-color: transparent gold gold transparent;
    border-style: solid;
    border-width: 10px;
    bottom: 0;
    content: "";
    display: block;
    font-size: 0;
    height: 0;
    left: 50px;
    position: absolute;
    width: 0;
    top: -20px;
    left: 180px;
}


.reportInfoDiv7 {
    display: block;
    font-size: 14px;
    position: absolute;
    text-align: left;
    background: gold;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #999999;
    top: 364px;
    left: 40px;
    right: 4px;
}
.reportInfoDiv7:before {
    border-color: transparent gold gold transparent;
    border-style: solid;
    border-width: 10px;
    bottom: 0;
    content: "";
    display: block;
    font-size: 0;
    height: 0;
    left: 50px;
    position: absolute;
    width: 0;
    top: -20px;
    left: 142px;
}


.reportInfoDiv8 {
    display: block;
    font-size: 14px;
    position: absolute;
    text-align: left;
    background: gold;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #999999;
    top: 440px;
    left: 4px;
    right: 40px;
}
.reportInfoDiv8:before {
    border-color: transparent gold gold transparent;
    border-style: solid;
    border-width: 10px;
    bottom: 0;
    content: "";
    display: block;
    font-size: 0;
    height: 0;
    left: 50px;
    position: absolute;
    width: 0;
    top: -20px;
    left: 186px;
}


.reportInfoDiv9 {
    display: block;
    font-size: 14px;
    position: absolute;
    text-align: left;
    background: gold;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #999999;
    top: 450px;
    left: 4px;
    right: 40px;
}
.reportInfoDiv9:before {
    border-color: transparent gold gold transparent;
    border-style: solid;
    border-width: 10px;
    bottom: 0;
    content: "";
    display: block;
    font-size: 0;
    height: 0;
    left: 50px;
    position: absolute;
    width: 0;
    top: -20px;
    left: 88px;
}


.reportInfoDiv10 {
    display: block;
    font-size: 14px;
    position: absolute;
    text-align: left;
    background: gold;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #999999;
    top: 496px;
    left: 40px;
    right: 4px;
}
.reportInfoDiv10:before {
    border-color: transparent gold gold transparent;
    border-style: solid;
    border-width: 10px;
    bottom: 0;
    content: "";
    display: block;
    font-size: 0;
    height: 0;
    left: 50px;
    position: absolute;
    width: 0;
    top: -20px;
    left: 152px;
}

.reportInfoDiv11 {
    display: block;
    font-size: 14px;
    position: absolute;
    text-align: left;
    background: gold;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #999999;
    top: 540px;
    left: 4px;
    right: 40px;
}
.reportInfoDiv11:before {
    border-color: transparent gold gold transparent;
    border-style: solid;
    border-width: 10px;
    bottom: 0;
    content: "";
    display: block;
    font-size: 0;
    height: 0;
    left: 50px;
    position: absolute;
    width: 0;
    top: -20px;
    left: 76px;
}




</style>
<script type="text/javascript" src="http://evanwukong.blog.163.com/blog/./jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://evanwukong.blog.163.com/blog/./jquery.mobile-1.3.1.js"></script>
<script type="text/javascript">
$(function(){
    $.support.cors = true;
    $.mobile.allowCrossDomainPages=true;

    var timeoutHideFlag = false;
    
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    var image = new Image();
    image.src="http://evanwukong.blog.163.com/blog/./shanxi_vertical.png";
    $(image).load(function() {
    ctx.drawImage(image, 0, 0);
    });

    $(canvas).click(function(e) {
        var canvasOffset = $(canvas).offset();
        var canvasX = Math.floor(e.pageX - canvasOffset.left);
        var canvasY = Math.floor(e.pageY - canvasOffset.top);
        var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
        var pixel = imageData.data;
        var pixcolor = "rgba(" + pixel[0] + "," + pixel[1] + "," + pixel[2] + "," + pixel[3] + ")";
        //$("#info").text(pixcolor);
        //var infoText = "X:"+String(canvasX)+"Y:" + String(canvasY) + "COLOR:" + pixcolor;
        var infoText = "X:"+String(canvasX)+"Y:" + String(canvasY);
    
        switch(pixel[0] + "," + pixel[1] + "," + pixel[2] ){
            case '255,255,102':
                window.positionDiv(1);
                break;
            case '255,204,153':
                window.positionDiv(2);
                break;
            case '153,255,153':
                window.positionDiv(3);
                break;
            case '102,204,255':
                window.positionDiv(4);
                break;
            case '102,255,255':
                window.positionDiv(5);
                break;
            case '204,153,255':
                window.positionDiv(6);
                break;
            case '204,153,204':
                window.positionDiv(7);
                break;
            case '255,204,102':
                window.positionDiv(8);
                break;
            case '255,102,153':
                window.positionDiv(9);
                break;
            case '153,153,102':
                window.positionDiv(10);
                break;
            case '255,102,51':
                window.positionDiv(11);
                break;
            default:
                return;
                window.positionDiv(false,pixel);
                break;
        }
    });

    window.positionDiv = function(cityIndex,pixel){
        if(arguments.length > 1){
            $("#info").attr("class",'debug')
            $('#info').text(pixel[0] + ' | ' + pixel[1] + ' | ' + pixel[2] + ' | ' + pixel[3]);
            return;
        }
        
        var cityArr = ['大同','朔州','忻州','吕梁','太原'
            ,'阳泉','晋中','长治','临汾','晋城','运城'];

        cityIndex = typeof cityIndex == 'object' ? cityIndex.src.substr(-6,2).replace('/','') : cityIndex;

        var cls = 'reportInfoDiv' + cityIndex;
        
        if(timeoutHideFlag !== false){
            clearTimeout(timeoutHideFlag);
        }

        $("#info").attr("class",cls)
        $('#info').text(cityArr[(cityIndex - 1)] + '天气...');

        timeoutHideFlag = setTimeout(function(){
            $("#info").attr("class",'reportInfoDiv')
        },5000)
    }
});
</script>
</head>

<body>
<img src="http://evanwukong.blog.163.com/blog/./city/1.png" style="position: absolute;top: 124px;left: 224px;" onclick="positionDiv(this)" />
<img src="http://evanwukong.blog.163.com/blog/./city/2.png" style="position: absolute;top: 160px;left: 176px;" onclick="positionDiv(this)" />
<img src="http://evanwukong.blog.163.com/blog/./city/3.png" style="position: absolute;top: 214px;left: 150px;" onclick="positionDiv(this)" />
<img src="http://evanwukong.blog.163.com/blog/./city/4.png" style="position: absolute;top: 300px;left: 86px;" onclick="positionDiv(this)" />
<img src="http://evanwukong.blog.163.com/blog/./city/5.png" style="position: absolute;top: 280px;left: 150px;" onclick="positionDiv(this)" />

<img src="http://evanwukong.blog.163.com/blog/./city/6.png" style="position: absolute;top: 280px;left: 228px;" onclick="positionDiv(this)" />
<img src="http://evanwukong.blog.163.com/blog/./city/7.png" style="position: absolute;top: 330px;left: 180px;" onclick="positionDiv(this)" />
<img src="http://evanwukong.blog.163.com/blog/./city/8.png" style="position: absolute;top: 400px;left: 180px;" onclick="positionDiv(this)" />
<img src="http://evanwukong.blog.163.com/blog/./city/9.png" style="position: absolute;top: 410px;left: 86px;" onclick="positionDiv(this)" />
<img src="http://evanwukong.blog.163.com/blog/./city/10.png" style="position: absolute;top: 460px;left: 180px;" onclick="positionDiv(this)" />
<img src="http://evanwukong.blog.163.com/blog/./city/11.png" style="position: absolute;top: 500px;left: 86px;" onclick="positionDiv(this)" />

<div style="position: absolute;left: 0;right: 0;top: 30px;font-size: 22px;font-weight: bold;text-align: center;">山西省天气实况</div>
<canvas id="myCanvas" width="344" height="570" ></canvas>
<div id="info" class="reportInfoDiv">
</div>

</body>
</html>
  评论这张
 
阅读(781)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017