这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 js 实现无缝滚动特效,结合已学知识进行扩展性练习,感兴趣的朋友可以参考一下
本文实例为大家介绍了 js 实现无缝滚动特效需要做到的功能,以及关键性 js 代码,分享给大家供大家参考,具体内容如下
运行效果图:
结合下学了的知识,做个模拟的综合性扩展练习~~ 大致功能如下:
具体代码:
- window.onload = function(){
- //声明部分( 现在的习惯是要写什么声明什么, 一起写容易搞忘了。。也不知道好不好这样)
- var oDiv = document.getElementById('box');
- var oUl = oDiv.getElementsByTagName('ul');
- var oLi = oUl.getElementsByTagName('li');
- var speed = 2;
- var timer = null;
- //让ul的内容增一倍,从而实现无缝滚动
- oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
- oUl.style.width = oLi[1].offsetWidth * oLi.length + 'px';
- //move函数
- function move(){
- oUl.style.left = oUl.offsetLeft + speed + 'px';
- //控制左
- if(oUl.offsetLeft < -oUl.offsetWidth/2){
- oUl.style.left = 0;
- }
- //控制右
- if(oUl.offsetLeft > 0){
- oUl.style.left = -oUl.offsetWidth/2 + 'px';
- }
- }
- //图标点击~ 控制移动方向
- var oLeft = document.getElementById('jt_left');
- var oRight= document.getElementById('jt_right');
- oLeft.onclick = function(){
- speed = -2;
- }
- oRight.onclick = function(){
- speed = 2;
- }
- //鼠标移入移出效果
- oDiv.onmouseover = function(){
- clearInterval(timer);
- }
- oDiv.onmouseout = function(){
- timer = setInterval(move,20);
- }
- timer = setInterval(move,20);
- //点击获取大图
- var aA = oDiv.getElementsByTagName('a');
- for(var i=0;i<aA.length;i++){
- aA[i].onclick = function(){
- showPic(this);
- return false;
- }
- }
- function showPic(whichpic){
- var source = whichpic.href;
- var placeholder = document.getElementById('placeholder');
- placeholder.src = source;
- }
- }
最后文字的替换效果 ,本想用图片的方式,让文本框对应的数字跟着变~~ 结果未能成功,不知原因,这方面还需待提高,希望大家能提供一些好的建议,不过 js 实现无缝滚动还是正常实现了,希望对大家也能有所帮助。
来源: http://www.phperz.com/article/17/0624/267994.html