js动画效果代码方法

JavaScript0166

js动画效果代码方法,第1张

1.toggle():

toggle()方法除了模拟鼠标连续单击事件之外,同时会动态的隐藏改变当前元素的高度,宽度和不透明度,最终切换当前元素的可见状态。如果元素可见,则切换隐藏状态,如元素隐藏,切换可见状态

2.fadeln()与fadeOut()

这两个方法,实现了淡入和淡出的一个动画效果,fadeln()渐显效果,fadeout()渐隐效果,两者结合使用,可把元素隐藏在按钮中,在通过点击事件显示,两方法只改变元素的透明度,不修改其他属性

3.fadeToggle()

此方法会动态的改变当前元素的透明度,最终却换当前元素的可见状态。如果元素是可见的,则通过淡出效果切换隐藏;如果元素是隐藏的,则通过淡入效果切换可见状态,不设置参数时,默认0.4秒内发生淡入与淡出的动画效果

4.fadeTo()

fadeln()与fadeOut()方法都是渐隐渐显,透明度从1到0,从0到1实现一个渐隐渐显效果,而fadeToggle()方法则是可以控制1-0的透明度,为更好展示透明度的效果,可在页面中创造一个下拉框,用于保存透明度值,操作下拉框去控制图片透明度值

5.slideDown()与 slideUp()

slideDown()可改变元素高度,呈现一个滑动效果,由上往下滑动,直到显示最终的当前元素,slideUp()相反,由下往上滑动,直到隐藏最终的当前元素

6.slideToggle()

slideToggle()方法跟slideDown()与 slideUp() 两个方法有异曲同工之妙,同样可改变元素的高度,不同于slideDown()与 slideUp() 的效果, 这个方法是通过点击事情控制元素的隐藏和显示

7.animate()

这个方法是自定义动画效果的方法,高度,宽度,透明度,运行速度都是可通过自定义给属性,这个方法只能改变可以取数字值的css属性,如:大小,边框,内外边距,定位,字体,文本,背景,透明度。

8.stop()

停止动画,stop()方法能结束当前的动画,并立即进入到下一个动画。

JS动态效果,参考如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=UTF-8">

<title>浮动图片</title>

<script type="text/javascript">

var step = 1 // 移动的像素

var y = -1 // 垂直移动的方向,-1表示向上,1表示向下

var x = 1 // 水平移动的方向,-1表示向左,1表示向右

function myFloat()

{

var img = document.getElementById("myImg")

// 获取图片和当前浏览器窗口上边距,由于img.style.top获取的值带px单位

var top = img.style.top.replace("px", "")

// top = top - 100

// img.style.top = top + "px"

// 获取图片和当前浏览器窗口左边距

var left = img.style.left.replace("px", "")

// left = left - 100

// img.style.left = left + "px"

// 上下移动

if(top <= 0)

{

y = 1

}

if(top >= document.body.clientHeight)

{

y = -1

}

top = (top*1) + (step * y)

img.style.top = top + "px"

// 左右移动

if(left <= 0)

{

x = 1

}

// alert(img.clientWidth)

if(left >= (document.body.clientWidth - img.clientWidth))

{

x = -1

}

left = (left*1) + (step * x)

img.style.left = left + "px"

setTimeout("myFloat()", 20)

}

</script>

</head>

<body onload="myFloat()" style="height: 400px">

<img id="myImg" src="IP.gif"

style="position: absolute left: 500px top: 400px border: solid 1px black" />

</body>

</html>

1.概述

循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片。

2.技术要点

主要应用setTimeout()方法实现图片的循环滚动效果。setTimeout()方法的语法格式如下:

setTimeout(function,milliseconds,[arguments])

参数说明:

a.

function:要调用的JavaScript自定义函数名称。

b.

Milliseconds:设置超时时间(以毫秒为单位)。

功能:经过超时时间后,调用函数。此值可以用clearTimeout()函数清除。

3.具体实现

(1)在页面的合适位置添加一个id属性为demo的<div>标记,并在该标记中添加表格及要要滚动显示的图片。关键代码如下:

<div

id="demo"

style="

overflow:

hidden

width:

455px

height:

166px">

<table

border="0"

cellspacing="0"

cellpadding="0">

<tr>

<td

valign="top"

id="marquePic1">

<!--

要循环滚动的图片

-->

<table

width="455"

border="0"

align="center"

cellpadding="0"

cellspacing="0"

>

<tr

align="center">

<%for(int

i=1i<8i++){%>

<td>

<img

src="Images/<%=i%>.jpg"

width="118"

height="166"

border="1">

</td>

<%}%>

</tr>

</table>

</td>

<td

id="marquePic2"

width="1"></td>

</tr>

</table>

</div>

(2)编写自定义的JavaScript函数move(),用于实现无间断的图片循环滚动效果。speed数值越大图片滚动的越快,具体代码如下:

<script

language="javascript">

var

speed=30

//设置间隔时间

marquePic2.innerHTML=marquePic1.innerHTML

var

demo=document.getElementById("demo")

//获取demo对象

function

Marquee(n){

//实现图片循环滚动的方法

if(marquePic1.offsetWidth-demo.scrollLeft<=0){

demo.scrollLeft=0

}

else{

demo.scrollLeft=demo.scrollLeft+n

}

}

var

MyMar=setInterval("Marquee(5)",speed)

demo.onmouseover=function()

{

//停止滚动

clearInterval(MyMar)

}

demo.onmouseout=function()

{

//继续滚动

MyMar=setInterval("Marquee(5)",speed)

}

</script>

以上所述是小编给大家介绍的JavaScript代码实现图片循环滚动效果的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!