js特效代码简单的(js最简单的几个特效)
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代码吗……效果是当鼠标移动到哪张图片时就显示哪张图片
img src="imgs/products/content_upside1_pic.gif"d="pic" /
改
img src="imgs/products/content_upside1_pic.gif" id="pic" /
这个路径有木有错？"imgs/products/content_upside1_pic.gif"
js+css实现文字散开重组动画特效代码分享
文字散开重组动画这款特效我们可以在输入框中指定任意文字，点击确定按钮后，就会将原先的文字爆炸散去，新的文字以像素点的形式组合起来，看起来非常棒。
运行效果图：
这是输入HAPPY后安按钮后效果，当然可以随便输文字
好酷的特效，连中文都支持，看如下图：
为大家分享的文字散开重组动画特效代码如下
head
meta
charset="UTF-8"
title文字散开重组动画特效/title
link
rel="stylesheet"
href="css/style.css"
media="screen"
type="text/css"
/
/head
body
canvas
id="text"
width="500"
height="100"/canvas
canvas
id="stage"
width="500"
height="100"/canvas
form
id="form"
input
type="text"
id="inputText"
value="脚本之家"
/
input
type="submit"
value="TRY
IT"
/
/form
script
src='js/EasePack.min.js'/script
script
src='js/TweenLite.min.js'/script
script
src='js/easeljs-0.7.1.min.js'/script
script
src='js/requestAnimationFrame.js'/script
script
src="js/index.js"/script
/body
/html
以上就是为大家分享的js+css实现文字散开重组动画特效代码，希望大家可以喜欢。
关于Javascript 特效代码
script language="JavaScript"
!-- Hide the script from old browsers --
function compute(obj) //定义一个函数 名字叫compute 他接收了一个参数 obj
{obj.expr.value = eval(obj.expr.value)} //当前的参数的值和下文参数值所用的方法相同
var one = '1' //定义一个字符型的1
var two = '2' //定义一个字符型的2
var three = '3' //定义一个字符型的3
var four = '4' //定义一个字符型的4
var five = '5' //定义一个字符型的5
var six = '6' //定义一个字符型的6
var seven = '7' //定义一个字符型的7
var eight = '8' //定义一个字符型的8
var nine = '9' //定义一个字符型的9
var zero = '0' //定义一个字符型的0
var plus = '+' //定义一个字符型的+
var minus = '-' //定义一个字符型的*
var multiply = '*' //定义一个字符型的*
var divide = '/' //定义一个字符型的/
var decimal = '.' //定义一个字符型的.
function enter(obj, string) //定义一个函数 名字叫enter 他接收了一个参数 obj
{obj.expr.value += string} //让 obj的值加上 '+'后面的值
function clear(obj) //定义一个函数 名字叫clear 他接收了一个参数 obj
{obj.expr.value = ''} //让obj的值等于空
// --End Hiding Here --
/script
form name="calc"
table border=1
td colspan=4input type="text" name="expr" size=30 action="compute(this.form)" tr
!--提交表单--
tdinput type="button" value=" 7 " onClick="enter(this.form, seven)"!--当鼠标点击
按钮的时候提交给函数按钮中的值--
tdinput type="button" value=" 8 " onClick="enter(this.form, eight)"!--当鼠标点击
按钮的时候提交给函数按钮中的值--
tdinput type="button" value=" 9 " onClick="enter(this.form, nine)"!--当鼠标点击
按钮的时候提交给函数按钮中的值--
tdinput type="button" value=" / " onClick="enter(this.form, divide)"!--当鼠标点
击按钮的时候提交给函数按钮中的值--
trtdinput type="button" value=" 4 " onClick="enter(this.form, four)"!--当鼠标
点击按钮的时候提交给函数按钮中的值--
tdinput type="button" value=" 5 " onClick="enter(this.form, five)"!--当鼠标点击
按钮的时候提交给函数按钮中的值--
tdinput type="button" value=" 6 " onClick="enter(this.form, six)"!--当鼠标点击按
钮的时候提交给函数按钮中的值--
tdinput type="button" value=" * " onClick="enter(this.form, multiply)"!--当鼠标
点击按钮的时候提交给函数按钮中的值--
trtdinput type="button" value=" 1 " onClick="enter(this.form, one)"!--当鼠标点
击按钮的时候提交给函数按钮中的值--
tdinput type="button" value=" 2 " onClick="enter(this.form, two)"!--当鼠标点击按
钮的时候提交给函数按钮中的值--
tdinput type="button" value=" 3 " onClick="enter(this.form, three)"!--当鼠标点击
按钮的时候提交给函数按钮中的值--
tdinput type="button" value=" - " onClick="enter(this.form, minus)"!--当鼠标点
击按钮的时候提交给函数按钮中的值--
trtd colspan=2input type="button" value=" 0 " onClick="enter
(this.form, zero)"!--当鼠标点击按钮的时候提交给函数按钮中的值--
tdinput type="button" value=" . " onClick="enter(this.form, decimal)"!--当鼠标
点击按钮的时候提交给函数按钮中的值--
tdinput type="button" value=" + " onClick="enter(this.form, plus)"!--当鼠标点击
按钮的时候提交给函数按钮中的值--
trtd colspan=2input type="button" value=" = " onClick="compute(this.form)"!
--提交表单在javascript中进行运算--
td colspan=2input type="button" value="AC" size= 3 onClick="clear(this.form)" !--
点击此按钮调用此函数--
/table
/form
简单的js切换div效果代码
写绑定事件，例如点击不同的按钮，有不同的样式，把样式绑定在按钮点击事件上即可，不知道会不会出现样式重叠的问题，如果出现了你可以写先清除原先的样式代码添加在每个绑定事件最前面