Web 开发
JS生成马赛克样式div
墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网
我也要 关注 + 加入社区本来提了一次问题了，可是不知道为何被csdn吃了，这次我就简短写了
我写了两个html，导入了jquery-1.4.3.js，其余的就用eclipse写的了
自己初学java，然后写代码的时候还是有很多问题，大神们来帮忙看看，感激不尽
首先，
第一个html，这是我前天写的，只是为了自己图好玩
昨天想了一下不知能，于是昨天想了一下又重新写了一个，我大概说一下主要的实现，就是通过点击button获得用户text里输入的文本内容num，然后生成num*num的正方形div，然后在添加div时会设置top和left值，并且动态给id属性，然后通过jquery的animate给每个div加fadeIn和fadeOut动画，然后用setInterval自动执行方法，从而产生动态的效果，
然后，正方形div能够正常打印出来， 然后在浏览器的console里我也能看见动态生成的div是成功给了id属性，可是只有最后一个div加上了动画效果，大神们帮帮忙吧，第一次提问题，没有描述清楚请见谅，具体想实现的效果大家可以看看第一段html，
下面是我第二段html，也就是出问题的那个，然后有疑问的那部分也加红了，ps.还想问一个在div的颜色在这样生成的时候则么能做出渐变色的效果呢，具体效果大家也可以看看第一段html，谢谢大神们了，在这先谢了！
我写了两个html，导入了jquery-1.4.3.js，其余的就用eclipse写的了
自己初学java，然后写代码的时候还是有很多问题，大神们来帮忙看看，感激不尽
首先，
第一个html，这是我前天写的，只是为了自己图好玩
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
setInterval(f1,100);
setInterval(f2,100);
setInterval(f3,100);
setInterval(f4,100);
setInterval(f5,100);
setInterval(f6,100);
setInterval(f7,100);
setInterval(f8,100);
setInterval(f9,100);
});
function f1(){
$('#d1').fadeOut(Math.random()*100+100);
$('#d1').fadeIn(Math.random()*100+100);
}
function f2(){
$('#d2').fadeOut(Math.random()*100+100);
$('#d2').fadeIn(Math.random()*100+100);
}
function f3(){
$('#d3').fadeOut(Math.random()*100+100);
$('#d3').fadeIn(Math.random()*100+100);
}
function f4(){
$('#d4').fadeOut(Math.random()*100+100);
$('#d4').fadeIn(Math.random()*100+100);
}
function f5(){
$('#d5').fadeOut(Math.random()*100+100);
$('#d5').fadeIn(Math.random()*100+100);
}
function f6(){
$('#d6').fadeOut(Math.random()*100+100);
$('#d6').fadeIn(Math.random()*100+100);
}
function f7(){
$('#d7').fadeOut(Math.random()*100+100);
$('#d7').fadeIn(Math.random()*100+100);
}
function f8(){
$('#d8').fadeOut(Math.random()*100+100);
$('#d8').fadeIn(Math.random()*100+100);
}
function f9(){
$('#d9').fadeOut(Math.random()*100+100);
$('#d9').fadeIn(Math.random()*100+100);
}
</script>
<style type="text/css">
body{
font-family:'Microsoft Yahei';
font-size:30px;
margin:0;
padding:0;
}
div{
width:100px;
height:100px;
margin:0;
padding:0;
position:absolute;
display:none;
}
#d1{
background-color:#faa;
}
#d2{
background-color:#fbb;
left:100px;
}
#d3{
background-color:#fcc;
left:200px;
}
#d4{
background-color:#faa;
top:100px;
}
#d5{
background-color:#fbb;
top:100px;
left:100px;
}
#d6{
background-color:#fcc;
top:100px;
left:200px;
}
#d7{
background-color:#faa;
top:200px;
}
#d8{
background-color:#fbb;
top:200px;
left:100px;
}
#d9{
background-color:#fcc;
top:200px;
left:200px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>
<div id="d9"></div>
</body>
</html>昨天想了一下不知能，于是昨天想了一下又重新写了一个，我大概说一下主要的实现，就是通过点击button获得用户text里输入的文本内容num，然后生成num*num的正方形div，然后在添加div时会设置top和left值，并且动态给id属性，然后通过jquery的animate给每个div加fadeIn和fadeOut动画，然后用setInterval自动执行方法，从而产生动态的效果，
然后，正方形div能够正常打印出来， 然后在浏览器的console里我也能看见动态生成的div是成功给了id属性，可是只有最后一个div加上了动画效果，大神们帮帮忙吧，第一次提问题，没有描述清楚请见谅，具体想实现的效果大家可以看看第一段html，
下面是我第二段html，也就是出问题的那个，然后有疑问的那部分也加红了，ps.还想问一个在div的颜色在这样生成的时候则么能做出渐变色的效果呢，具体效果大家也可以看看第一段html，谢谢大神们了，在这先谢了！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
//页面加载完成后给button加上onlick事件
$('#btn').click(btn);
});
function btn(){
//每次点button清楚页面所有div
$('div').remove();
//获取页面输入的值
var num=getNum();
//画div
show(num);
}
function getNum(){
var num=0;
//通过jQuery对象获得文本框内容
num=$('#num').val();
return num;
}
function show(number){
var num= number;
var drawNum=0;
//每画num个div，就要换行，所以index做取模用，但是要+1，因为0/index=0，所以循环下标不能从0开始，所以就会少画一个div，因此index=num+1由于num是字符串，所以用eval计算，
var index =eval("("+num+"+1)");
//total是总共的格子数，num*num
var total = 0;
//画div的横向参数
var x = 1;
//画div的纵向参数
var y = 1;
//给每个div的id值
var id="";
try{
//总共的div=num*num
total = eval("("+num+"*"+num+")");
//每次在换行的时候会少画一个div，一共换num次行，因此少画了num个div，因此实际上一共要循环num+total次
drawNum= eval("("+num+"+"+total+")");
}catch(e){
console.log(e);
}
//在页面里显示一共多少个格子
$('#s1').text(total);
for(i=1;i<drawNum;i++){
//拼接id字符串
id ="#d"+i;
//取模换行
if(i%(index)!=0){
//div的position设置为absolute，因此在div上或字节加style来确定位置
$('#num').after("<div id=d"+i+" style='left:"+(x-1)*100+"px; top:"+y*100+"px'></div>");
setInterval(function(){
//设置fadeOut和fadeIn参数为99-199ms之间，模拟随机出现时间
$(''+id+'').fadeOut(Math.random()*100+100);
$(''+id+'').fadeIn(Math.random()*100+100);
//方法每99ms执行一次
},99);
//每画一个div，横向参数x++
x++;
}else{
//当取模等于0时，则换行，用div的top来实现，所以纵向参数y++
x=1;
y++;
}
}
}
</script>
<style type="text/css">
body{
font-family:'Microsoft Yahei';
font-size:20px;
margin:0;
padding:0;
}
div{
width:100px;
height:100px;
margin:0;
padding:0;
position:absolute;
/*display:none;*/
background-color:#eef;
}
</style>
</head>
<body>
<span id="s1"></span><br/>
Number:<input id="num"/><input type="button" id="btn" value="Confirm"/><br/>
</body>
</html>
...全文
相关推荐
JS实现马赛克图片效果完整示例
以下是一个通过JavaScript实现马赛克效果的详细步骤和示例代码。首先，我们需要了解JavaScript在处理图像时的基本概念。
使用JavaScript实现多图幻灯Pixelate马赛克效果
在本文中，我们将介绍如何使用JavaScript实现一个多图幻灯片效果，并添加一个马赛克（Pixelate）特效。我们将使用HTML和CSS创建基本的幻灯片布局，然后使用JavaScript来控制图像切换和马赛克效果。在上面的示例中，我们创建了一个名为"slideshow"的容器来包含幻灯片。的函数，该函数接收一个图像作为参数，并在该图像上应用马赛克效果。在切换幻灯片时，我们隐藏当前幻灯片，增加当前幻灯片索引，并显示下一个幻灯片。在上面的JavaScript代码中，我们首先获取幻灯片容器和幻灯片元素。
实现jQuery马赛克图片还原动画特效
jQuery，一个简洁高效的JavaScript库，它极大地简化了网页中DOM操作和动画效果的实现。通过它，我们能够快速地让网页元素动起来，实现丰富的交互效果。特别是在图片处理领域，jQuery的应用尤为突出，例如在实现一个马赛克图片还原动画特效时，jQuery能够帮助我们轻松地通过控制DOM元素和利用CSS，为用户提供一个绚丽的视觉体验。
CSS3悬停马赛克样式滤镜特效
本文将深入探讨“CSS3悬停马赛克样式滤镜特效”，这是一种利用CSS3特性实现的鼠标悬停时图片由马赛克模糊效果转变为高清显示的动画效果。
jquery马赛克拼接翻转效果.zip
CSS（层叠样式表）在构建马赛克拼接效果时扮演着关键角色。通过定义不同大小和位置的div元素，我们可以创建出马赛克般的布局。
