网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
javascript吧 关注：269,337贴子：906,426

求大神指点 JS怎么把图片分成一个个小块

本来是空白，鼠标移上去就自动出现图片的小块小块的图片，怎么用JS实现这种效果


createImageData()
getImageData()
putImageData()
用这三个函数
先在二维数组里建立若干imagedata对象以方便管理
把图像直接画在canvas上
然后用getImageData()获取每一个小块的数据
取完之后把canvas清空，注意不是清除
改变onMouseOver使鼠标移动到某个区域时找到对应的数据
然后用putImageData()在对应位置画就行
记得移到其他区域时把canvas从新清空再画
代码的话……我用的手机就不打了……


又想到一个……
当鼠标移到某区域时从新载入图片，然后把根据区域坐标把区域上下左右都清空就可以了，这样不需要建立很多对象，比刚才那个省内存省多了


看过miaov视频的估计都做过这道题，有很多种方式可以实现，这是我的思路
1设置ul为背景
2循环输出100个li应该会吧，每个小格是一个li
3.css里给li加透明样式，为1
4.鼠标移入li里，把透明度设置为0，关于js如何设置透明度，可以先存一个class（存透明值为0），调用的时候li.className = 设置的class


<script>
window.onload=function(){
var But=document.getElementById(*but*);
var j=0;
var aDiv=document.getElementsByTagName(*div*);
for(var i=0;i<7;i++)
{
document.body.innerHTML+=*<div>*+i;
}
for(var i=0;i<aDiv.length;i++)
{
if(i<4){
aDiv[i].style.left=50+i*60+*px*;
aDiv[i].style.top=50+i*60+*px*;
}
else{
aDiv[i].style.left=50+i*60+*px*;
aDiv[i].style.top=50+(i-2-j++)*60+*px*;
j++;
}
}
But.onclick=function(){
alert(*请输入一点内容吧*);
}
}
</script>
</head>
<body>
<input type="button" id="but" value="点击变化"/>
</body>
</html>
这个按钮按一次再按就没有警告提示了，怎么弄啊


求大神啊


   5"  
下载贴吧客户端发语音！
那些木有了的经验要用多少十五字


   5"  
其实十五字回复神马的全是浮云啊


<!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>无标题文档</title>
<style>
div{width:50px; height:50px;background:red; position:absolute; ;
font-size:30px; text-align:center; line-height:50px;color:#09F; }
</style>
<script>
window.onload=function(){
var But=document.getElementById(*but*);
var num=60;
var arr=[*red*,*blue*,*pink*,*black*]
var j=0;
But.onclick=function(){
alert(*点击提示*);
var aDiv=document.getElementsByTagName(*div*);
for(var i=0;i<7;i++)
{
document.body.innerHTML+=*<div>*+i+*</div>*;
}
for(var i=0;i<aDiv.length;i++)
{
if(i<4){
aDiv[i].style.background=arr[i];
aDiv[i].style.left=50+i*num+*px*;
aDiv[i].style.top=50+i*num+*px*;
}
else{
aDiv[i].style.background=arr[i-4];
aDiv[i].style.left=50+i*num+*px*;
aDiv[i].style.top=50+(i-2-j++)*num+*px*;
j++;
}
}
}
}
</script>
</head>
<body>
<input type="button" id="but" value="点击变化"/>
</body>
</html>
点击按钮之后再点击就不会再出现警告框了，弄了一下午都不知道哪里出问题了


<!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>无标题文档</title>
<style>
div{width:50px; height:50px;background:red; position:absolute; margin:10% 30%;
font-size:30px; text-align:center; line-height:50px;color:#09F; }
</style>
<script>
window.onload=function(){
var But=document.getElementById(*but*);
var List=document.getElementById(*list*);
var num=60;
var arr=[*red*,*blue*,*pink*,*black*]
var j=0;
var k=0;
But.onclick=function(){
List.innerHTML=**;
var aDiv=document.getElementsByTagName(*div*);
if(k==0){
for(var i=0;i<7;i++)
{
List.innerHTML+=*<div>*+i+*</div>*; }
for(var i=0;i<aDiv.length;i++)
{
if(i<4){
aDiv[i].style.background=arr[i];
aDiv[i].style.left=50+i*num+*px*;
aDiv[i].style.top=50+i*num+*px*;
}
else{
aDiv[i].style.background=arr[i-4];
aDiv[i].style.left=50+(i-2-j++)*num+*px*;
aDiv[i].style.top=50+i*num+*px*;
j++;
}
}k=1;
}
else {List.innerHTML=**;
for(var i=0;i<7;i++)
{
List.innerHTML+=*<div>*+i+*</div>*;
}
for(var i=0;i<aDiv.length;i++)
{
if(i<4){
aDiv[i].style.background=arr[i];
aDiv[i].style.left=50+i*num+*px*;
aDiv[i].style.top=50+i*num+*px*;
}
else{
aDiv[i].style.background=arr[i-4];
aDiv[i].style.left=50+i*num+*px*;
aDiv[i].style.top=50+(i-2-j++)*num+*px*;
j++;
}
}k=0;
}
}
}
</script>
</head>
<body>
<input type="button" id="but" value="点击变化"/>
<ul id="list"></ul>
</body>
</html>点击实现两个V的相互变化，怎么没办法啊


感觉好叼的样子！


鼠标移上去加个白线的PNG图片不就好了，最简单


<!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>无标题文档</title>
</head>
<style>
*{padding:0px; margin:0px;}
#pho{width:501px; height:501px; background:url(pic.jpg); }
pic{width:50px; height:50px;background:#fff;position:absolute;
font-size:30px; text-align:center; line-height:50px;color:black; position:absolute;border: 1px solid black;}
</style>
<script>
window.onload=function(){
var Pho=document.getElementById(*pho*);
var Div=document.getElementsByTagName(*pic*);
var num=50;
for(var i=0;i<100;i++){
Pho.innerHTML+=*<pic>*+i+*</pic>*;
}
for(var i=0;i<Div.length;i++)
{
Div[i].style.left=i*num+*px*;
var t=i/10;
for(var k=1;k<=t;k++)
{
Div[i].style.top=k*num+*px*;
Div[i].style.left=(i%10)*num+*px*;
}
}
}
</script>
<body>
<div id="pho">
</div>
</body>
</html>
怎么实现移动上去方块消失啊，做不动了


苦逼高二，手机实在没法打代码……晚上给你写一个吧……



这个效果吧(图片请无视)...
<html>
<head>
<title>把图片分成一个个小块</title>
<script>
var img
var canvas
window.onload=function(){
img=document.getElementById("img")
can=document.getElementById("canvas")
canvas=can.getContext(*2d*)
}
var x
var y
//x和y保存上一次鼠标在哪个位置,可以尽量减少canvas的重画次数..其实一般不用减少...但我家256内存伤不起...后面width是你想要的小块宽度,height是长度
function drawImage(_x,_y){//_x,_y为鼠标相对于canvas的坐标
//alert(x+","+y)
var width=400
var height=400
if(!(Math.floor(_x/width)==x&&Math.floor(_y/height)==y)){
canvas.drawImage(img,0,0)
var x=Math.floor(_x/width)
var y=Math.floor(_y/height)
//这里xy代表你的鼠标在哪个区域
canvas.clearRect(0,0,x*width,99999)
canvas.clearRect((x+1)*width,0,99999,99999)
canvas.clearRect(0,0,99999,y*height)
canvas.clearRect(0,(y+1)*height,99999,99999)
}
//整个函数的意思是,当鼠标移到另一个区域时,重新画图片,并且把区域上下左右都清空
}
</script>
</head>
<body>
<img src="009.jpg" height=0 width=0 id="img"/>
<!--载入图片,但不显示,由于我对html不是很熟,就用这个办法了...src后面跟图片的相对路径-->
<canvas height=1000 width=1000 id="canvas" onMouseMove=drawImage(event.offsetX,event.offsetY)>
<!--height对应你图片的高度,width对应宽度,也可设置成自动获取-->
</canvas>
</body>
</html>


扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！
分享到: