回复：新人痛下决心，狠学前端，希望大家给予支持！

各位朋友，被家中琐事绊住了，两个星期不见了，放下学习两个星期了，罪过罪过！不过放假回来后，做了几个效果，算作复习，发上来，大家给看看问题！
第一个：切换
第二个：自动回字形
第三个：左右
第四个：100个DIV
第五个：翻书

第四个：100个DIV
问题。屏幕闪啊闪。求助大神

代码是：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>妙味课堂视频-复习4 -100个DIV</title>
</head>
<style>
h2,p,ul,li { margin:0; padding:0;}
li { list-style:none;}
body { font-size:16px;}
#zbox { width:765px; height:728px; background:url(img/box-bg.jpg) no-repeat; margin:100px auto; padding:300px 12px 0 12px;}
#box { width:712px; height:220px; padding:12px; }
#ileft { width:256px; height:224px; border-left:1px solid #000; border-right:1px solid #000; padding-left:16px; float:left;}
#ileft div { }
#ileft .intro { width:244px; height:86px; border-bottom:1px solid #b1b1b1;}
#ileft .intro h2 { width:244px; height:20px; font-size:12px; color:#bc1823;}
#ileft .intro p { width:244px; height:48px; font-size:10px;}
#ileft .intro span { display:block; width:100px; height:16px; line-height:16px;font-size:10px; margin-left:2px; text-indent:8px; background:url(img/span-bg.jpg) no-repeat center left; cursor:pointer;}
#ileft .intro-p { width:244px; height:116px; margin-top:10px;}
#ileft .intro-p h2 { width:244px; height:20px; font-size:12px; color:#bc1823;}
#ileft .intro-p p { width:244px; height:78px; font-size:10px; }
#ileft .intro-p img { width:110px; height:68px; border:3px solid #d7d7d7; margin-right:4px; float:left;}
#ileft .intro-p strong { width:104px; height:62px; display:block; float:left; padding:3px; margin-left:12px;}
#ileft .intro-p span {display:block; width:100px; height:16px; line-height:16px;font-size:10px; margin-left:2px; text-indent:8px; background:url(img/span-bg.jpg) no-repeat center left; cursor:pointer;}
#iright { width:434px; height:224px; float:left; position:relative;}
#iright .lis { width:54px; height:224px; position:relative; float:left; margin-right:10px; overflow:hidden;}
#iright ul { position:absolute; top:0; left:0; padding-top:1px;}
#iright ul li { width:54px; height:35px; margin-bottom:11px; background-size:100% 100%; cursor:pointer;}
#iright #pic { width:350px; height:220px; float:left; position:relative; overflow:hidden;}
#iright #pic div { width:35px; height:22px; position:absolute; top:0; left:0; }
#iright img { width:350px; height:220px;}
#iright p { width:14px; height:220px; float:left;}
#iright a { width:14px; height:112px; display:block;}
#up {}
#down {}
</style>
<script src="miaovdoMove.js"></script>
<script src="miaovOpacity.js"></script>
<script>
window.onload = function(){//为什么总是闪。而且还这么慢。bug
var oPic = document.getElementById(*pic*);
var oIright = document.getElementById(*iright*);
var oUl = oIright.getElementsByTagName(*ul*)[0];
var aLi = oUl.getElementsByTagName(*li*);
var oIleft = document.getElementById(*ileft*);
var oImgSmal = oIleft.getElementsByTagName(*img*)[0];
var oImg = oPic.getElementsByTagName(*img*)[0];
var aDiv = oPic.getElementsByTagName(*div*);
var oA = oIright.getElementsByTagName(*a*);
var arrP = [*img/v1.JPG*,*img/v2.JPG*,*img/v3.JPG*,*img/v4.JPG*,*img/v5.JPG*,*img/v6.JPG*,];
var str = **;
var len = 100;
var num = 0;
var j = -1;
var that = 0;
var itimer = ltimer = 0;
var iPos = zPos = wPos = sum = 0;
iPos = parseInt(getStyle(oUl,*top*));
for (var i=0; i<aLi.length; i++){
aLi[i].index = i;
aLi[i].style.backgroundImage = *url(*+ arrP[i] +*)*;
aLi[i].onclick = function(){
that = this.index;
oPic.innerHTML = ** ;
oImgSmal.style.opacity = 0;
Opacity(oImgSmal,100,1);
oImgSmal.src = arrP[that];
fnBg(that);
};
}
oA[0].onmouseover = function(){
fnLis(1);
};
oA[1].onmouseover = function(){
fnLis(-1);
};
for (var i=0; i<oA.length; i++){
oA[i].onmouseout = function(){
clearInterval(ltimer);
};
}
function fnBg(aim){
str = **;
for(var i=0; i<len; i++){
str += *<div></div>*;
}
oPic.innerHTML = str;
for(var i=0; i<len; i++){
if(i%10 == 0){
j ++;
}
aDiv[i].style.top = -220 + 22*(j%10) + *px*;
aDiv[i].style.left = + 35*(i%10) + *px*;
aDiv[i].style.background = *url(*+ arrP[aim] +*)*;
aDiv[i].style.backgroundPosition = (-35*(i%10)) + *px * + (-22*(j%10)) + *px*;
}
num = 0;
itimer = setInterval(function(){
Ntarget = parseInt(getStyle(aDiv[num],*top*)) + 220;
doMove(aDiv[num],*top*,30,Ntarget);
num ++ ;
if (num == 100) {
clearInterval(itimer);
}
},10);
}
function fnLis(n){
if(n<0){//上
ltimer = setInterval(function(){
zPos = parseInt(getStyle(oUl,*height*))-(6*parseInt(getStyle(aLi[0],*height*)));
wPos = iPos + sum;
oUl.style.top = wPos + *px*;
sum -= 2;
if( wPos < -zPos){
clearInterval(ltimer);
}
},30);
}
if(n>0){//下
ltimer = setInterval(function(){
zPos = parseInt(getStyle(oUl,*height*))-(6*parseInt(getStyle(aLi[0],*height*)));
wPos = iPos + sum;
oUl.style.top = wPos + *px*;
sum += 3;
if( wPos > zPos){
clearInterval(ltimer);
}
},100);
}
};
};
</script>
<body>
<div id="zbox">
<div id="box">
<div id="ileft">
<div class="intro">
<h2>A FEW WORDS ABOUT ME</h2>
<p>Good morning !It is really my honor to have this opportunity for a interview,...</p>
<span>READ MORE</span>
</div>
<div class="intro-p">
<h2>A FEW WORDS ABOUT ME</h2>
<p>
<img src="img/v1.JPG"/>
<strong>Good morning !It is really my honor to ,...</strong>
</p>
<span>READ MORE</span>
</div>
</div>
<div id="iright">
<p>
<a id="up" href="javascript:;"></a>
<a id="down" href="javascript:;"></a>
</p>
<div class="lis">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="pic">
<img src="img/1.jpg"/>
</div>
</div>
</div>
</div>
</body>
</html>

熊猫办公

熊猫办公javascript:，全新AI写作助手，支持创意文案/智能问答/整理大纲/办公使用等各种功能.javascript:，领先的AI写作工具，3分钟快速高效得到想要内容。

2025-03-22 01:53广告

立即查看

厉害厉害，进步神速啊

楼主自学了多长时间了，好猛啊！

效果还是很漂亮的。

广告贴，鉴定完毕

欣然发现我的学习记录帖，被楼上的哥们儿（或许是个姐们儿）评价为“广告帖”，
我很欣慰，正所谓：“仁者见仁，淫者见淫……”
也很感触，妙味视频确实让我做出这么多东西，替他们打广告我乐此不疲，
那话儿咋说来着？——哦，有钱难买我乐意 ^_^
从我购买妙味VIP群视频到现在，做了一些我个人感觉还蛮不错的小练习，但人外有人，天外还有天上天
比起妙味VIP群里另外一位凶猛的哥们（陈剑鑫——妙味专门为他写帖子展示的那位兄弟），我就是个‘呵呵’。

对比这么绚的个人网站，真是羡慕！我目前的技术在他的作品面前，就是个菜，
但我觉得总有一天能达到、甚至超越他的！
今天非常开心，就这么愉快的报了JQ远程课，他们说我这样的原生JS基础完全可以了，嘿嘿，开心！
这里必须要得瑟一下，我报完名以后，客服小美告诉我：
此次远程班50个名额仅剩4个了，估计明天就截止报名了！
嘿嘿，我这样说，这算不算广告？要真算的话我能找他们拿回扣不？
不过就算说我这些话是广告，你想报名这期远程，名额也满了报不了，
反正我是报上了，我得一个瑟，又得一个瑟……哈哈，失态了！
好，罗嗦了这么多，也算给这个帖子结帖，
马上要参加JQ远程班了，到时候我会再开一个帖子，向大家汇报我的学习成绩，
敬请支持我的兄弟姐妹们继续支持我！！
敬请鄙视我的大哥大姐们更猛烈鄙视我，有你们的鄙视，我学习才更有动力！
下个帖子的标题就叫做：新人JQ学习之路，老三十七的第二步！

建议楼主代码截图。。然后就是等楼主的代码无法和别人分享的时候，说明楼主开始进阶了

楼主不是要报JQR的课程么，建议你把JQR和原生的都写一遍，作对比，这样可能对你帮助很大，对于其他关注你的人也有帮助。哈啊哈

广告创意

加油坚持做笔记这样记得牢固

楼主留个qq给我，一起交流

楼主，加个qq呗，我也在学js

加油吧，静下心来

冒个泡。。。

扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！

首页上一页 7 8 9 10 下一页尾页
303回复贴，共10页
，跳到页

<<返回javascript吧

分享到:

日	一	二	三	四	五	六