CSS透視鏡效果

來源:互聯網
上載者:User
<style>
body{
 background:url(http://www.zcool.com.cn/pic/background/23/bg23_005.gif);
 overflow:hidden;
}
</style>
<body>
<script>
function id(obj){//取id函數
 return document.getElementById(obj);
}
window.onload=function(){
 id("mask").setCapture();
}
function mm(obj){
 id("mask").setCapture();
 obj.style.left=window.event.x-1500;
 obj.style.top=window.event.y-1500;
}
</script>
<div id=mask style="position:absolute;width:3000;height:3000px;" onmousemove="mm(this);">
 <div style="float:left;width:1490px;height:1490px;background-color:white;filter:alpha(opacity=50);"></div>
 <div style="float:left;width:20px;height:1490px;background-color:white;filter:alpha(opacity=50);"></div>
 <div style="float:left;width:1490px;height:1490px;background-color:white;filter:alpha(opacity=50);"></div>
 <div style="float:left;width:1490px;height:20px;background-color:white;filter:alpha(opacity=50);"></div>
 <div style="float:left;width:20px;height:20px;"></div>
 <div style="float:left;width:1490px;height:20px;background-color:white;filter:alpha(opacity=50);"></div>
 <div style="float:left;width:1490px;height:1490px;background-color:white;filter:alpha(opacity=50);"></div>
 <div style="float:left;width:20px;height:1490px;background-color:white;filter:alpha(opacity=50);"></div>
 <div style="float:left;width:1490px;height:1490px;background-color:white;filter:alpha(opacity=50);"></div>
</div>
</body>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.