2023-11-02 20:11来源:m.sf1369.com作者:宇宇
这段代码其实非常简单,实际上就是选中页面上的3个div, 然后调用了一个名为iFadeSlide 的jquery 插件来对它们进行处理。第一个调用没有加任何入参,第二个和第三个分别提供了一堆入参。至于入参就不用注释了,你可以去查找这个iFadeSlide 的API 文档。我只把其他需要解释的代码注释了一下。
<script language=javascript>
$(function(){ //jquery ondocumentready 事件,意思是说,当页面加载完成后,执行以下代码:
$('div#slide').iFadeSlide(); //将页面上一个id为slide 的div 元素选中,再调用iFadeSlide 插件
$('div#slide_b').iFadeSlide({ //将页面上一个id为slide_b 的div 元素选中,再调用iFadeSlide 插件,并传递以下的入参
field: $('div#slide_b a'),
icocon:$('div.ico_b'),
hoverCls: 'high_b',
curIndex: 2,
interval: 2000
});
$('div#slide_c').iFadeSlide({ //将页面上一个id为slide_c 的div 元素选中,再调用iFadeSlide 插件,并传递以下的入参
field: $('div#slide_c img'),
icocon: $('div.ico_c'),
outTime:100,
inTime: 200
});
});
</script>
常用的 js焦点图 用js做漂浮广告 用做二级导航 滑动门 Tab菜单 弹出窗口 等
学JS前首先确认你有CSS基础,因为JS很多时候会通过控制CSS来达到效果。开始学JS不能急于求成,你看到别人写出超炫的JS特效,自己也想立刻写一个,那是不可能的,那是深厚的功底结晶。所以刚开始学,要注重基础的东西,JS很灵活,但它也很讲究规则,你没仔细研究过的话,就短短几句代码也会出错,说到基础,一般来说是JS的基本语法,常用的对象,函数,字符串,数组,DOM基本模型等等。可以去W3C学校网站看看,我刚开始就在这个网站学的,百度输入w3cshool就 可以搜到了。
当你有一定的基础后,就可以多看看JS高手写的特效代码了,看下他的写法,自己模仿下。同一个特效,不同的人会写出不同的代码,但高手的代码可读性强,兼容性强。
接下来的时间就是不断练习,不断巩固基础,不断发现问题,不断解决问题。可以跟别人多交流,别人的思想很可能就对你有启发。
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=gb2312 />
<title>无标题文档</title>
</head>
<body>
<script>
var txtArray = new Array (red,green,blue);//文字颜色
function mOver()
{//鼠标移上文字变化
var num = Math.floor(Math.random() * 3);
document.getElementById(textBox).style.color= txtArray[num];
}
function mOut()
{//鼠标离开文字变化
document.getElementById(textBox).style.color=#000000;
}
var imgArray = new Array (1.gif,2.gif,3.gif);//图片地址
function butOnclick()
{
var num = Math.floor(Math.random() * 3);//随即一个图片
document.getElementById(imgBox).src = imgArray[num];
}
</script>
<div id=textBox onmouseout=javaseript:mOut(); onmouseover=javaseript:mOver(); >
<p>这是一点文字</p>
</div>
<input type=button name=button value=点击 onclick=javascript:butOnclick();/>
<img src=1.gif id=imgBox/>
</body>
</html>
保存为网页测试下,(其实这样写麻烦,建议用jquery写那样要引用类库文件)
你测试的时候一定要给你网页所在目录3张图片分别是1.gif,2.gif,3.gif,我不能给你放网络上的图片,因为百度会屏蔽我的回答的。