js实现效果代码及讲解（js能实现什么效果）

本篇文章给大家谈谈js实现效果代码及讲解，以及js能实现什么效果对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、js如何实现数字滚动效果
• 2、JS代码解释[CSS+JS选项卡效果]
• 3、八行代码js实现吸顶效果
• 4、js如何实现惯性滑动效果

js如何实现数字滚动效果

jquery实现立体式数字滚动条增加效果，代码分为两部分，一部分位html结构另一部分属于js代码段，需要的朋友参考下吧！

1、html结构

div class="numberRun1"/div

2、js

script type="text/javascript" src="js/digital_over.js" /script//引用 //这是自定义函数（需要在页面中进行调用） script //数字滚动 function digitalScroll(obj,n){ var numRun = $(obj).numberAnimate({num:n, speed:2000, symbol:","}); var nums = n; setInterval(function(){ numRun.resetData(nums); },3000); var numWidth= $(obj).width(); $(obj).find('.mt-number-animate').css('width',numWidth); $(obj).css('width','100%'); $(obj).find('.mt-number-animate').css('margin','0 auto'); } window.indexdigitalScroll=function(){ digitalScroll($('.numberRun1'),1160518); } /script !--这是在页面中调用的方法-- script $(function(){ indexdigitalScroll(); }); /script

3、图片案例

JS代码解释[CSS+JS选项卡效果]

转载自：

script language=javascript

//一个JS自定义函数

function secBoard(n)

{

//secTable是表格的ID.也就是说那个表格元素的集合.cells是表格行或整个表格中所有单元格的集合.cells.length是这个集合的长度.

//下面这两语句的作用就是表格内所有的单元格的CSS样式名改为"SEC1"

for(i=0;isecTable.cells.length;i++)

secTable.cells[i].className="sec1";

//下面这语句的作用就是表格内被单击的单元格的样式名改为"SEC2"

secTable.cells[n].className="sec2";

//下面三句与上面换样式名的相似..作用是显示或隐藏所对应单元格的内容

for(i=0;imainTable.tBodies.length;i++)

mainTable.tBodies[i].style.display="none";

mainTable.tBodies[n].style.display="block";

}

/script

八行代码js实现吸顶效果

上次使用了css实现吸顶的方法，这次使用原生js来实现这个效果

做这个效果的前提：掌握offset系列 ,掌握scroll系列

offsetWidth:元素的内容宽+左右padding+左右border

offsetHeight:元素的内容高+上下padding +上下border

offsetTop :当前元素的顶部，到定位父元素的距离，如果没有定位父元素，指的就是元素到body的距离 -----用于获取当前元素在页面中的位置

offsetLeft: 当前元素的左边，到定位父元素的距离，如果没有定位父元素，指的就是元素到body的距离

onscroll:滚动条触发的事件，只要滚动条滚动就会触发，滚动条在谁身上就给谁加滚动条

这是屏幕的滚动距离

document.documentElement.scrollTop || document.body.scrollTop

给屏幕添加滚动事件

window.onscroll=function(){

//获取滚动距离，提前给body设置高度

var top=document.documentElement.scrollTop || document.body.scrollTop

}

实现效果

向下滚动的时候：

到达一定高度的时候，红色的div会固定在顶部

js如何实现惯性滑动效果

主要思路是：鼠标当前点到下一点直接间隔计算出速度。这样就实现了惯性滑动效果。

下面是简单的js代码实现：仅供参考：

style    

#div1{ width:100px; height:100px; background:red; position:absolute; left:0px; top:0;}    

/style    

script    

window.onload=function(){    

var oDiv=document.getElementById('div1');    

var iSpeedX=0;    

var iSpeedY=0;     

var lastX=0;    

var lastY=0;    

var timer=null;     

oDiv.onmousedown=function(ev){    //div的鼠标按下事件，主要计算鼠标当前位置，和移动位置。这样可以计算出鼠标移动速度。

var oEvent=ev || event;    

var disX=oEvent.clientX-oDiv.offsetLeft;    

var disY=oEvent.clientY-oDiv.offsetTop;      

clearInterval(timer);      

document.onmousemove=function(ev){   //鼠标拖动事件。 

var oEvent=ev || event;     

oDiv.style.left=oEvent.clientX-disX+'px';    

oDiv.style.top=oEvent.clientY-disY+'px';    

iSpeedX=oEvent.clientX-lastX;    

iSpeedY=oEvent.clientY-lastY;     

lastX=oEvent.clientX;    

lastY=oEvent.clientY;

}    

document.onmouseup=function(){    //当鼠标抬起后，清掉移动事件。

document.onmousemove=null;    

document.onmouseup=null;

oDiv.releaseCapture  oDiv.releaseCapture();      

startMove();    

}    

oDiv.setCapture  oDiv.setCapture();    

return false;

}         

function startMove(){    //移动函数，主要操作是计算鼠标移动速度和移动方向。

clearInterval(timer);    

timer=setInterval(function(){    

iSpeedY+=3;    

var t=oDiv.offsetTop+iSpeedY;    

var l=oDiv.offsetLeft+iSpeedX;    

if(tdocument.documentElement.clientHeight-oDiv.offsetHeight){    

t=document.documentElement.clientHeight-oDiv.offsetHeight;    

iSpeedY*=-0.8;    

iSpeedX*=0.8;

}     

if(t0){    

t=0;    

iSpeedY*=-0.8;    

iSpeedX*=0.8;

}    

if(ldocument.documentElement.clientWidth-oDiv.offsetWidth){    

l=document.documentElement.clientWidth-oDiv.offsetWidth;

iSpeedX*=-0.8;    

iSpeedY*=0.8;    

}    

if(l0){    

l=0;    

iSpeedX*=-0.8;    

iSpeedY*=0.8;

}    

oDiv.style.left=l+'px';    

oDiv.style.top=t+'px';    

if(Math.abs(iSpeedX)1)iSpeedX=0;    

if(Math.abs(iSpeedY)1)iSpeedY=0;    

if(iSpeedX==0  iSpeedY==0  t==document.documentElement.clientHeight-oDiv.offsetHeight){    

clearInterval(timer);    

}    

document.title=i++;    

},30);

}    

};    

/script    

/head    

body    

div id="div1"/div    

/body

关于js实现效果代码及讲解和js能实现什么效果的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。