javascript如何实现动态效果

JavaScript012

javascript如何实现动态效果,第1张

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

首先准备以下的东西:

1、图片若干,并规范化图片名字。从1开始。

2、在存放图片的文档中新建一个txt。

3、在txt中输入内容。

4、txt后缀改为html,完成

txt的内容:

<script>

var i

function pre()

{

if(i==1)return

i--

document.getElementById("pic").innerHTML="<img src="+i+".jpg></img>"

}

function next()

{

i++

document.getElementById("pic").innerHTML="<img src="+i+".jpg></img>"

}

</script>

<body>

<div onclick="pre()"><</div>

<div id="pic" ><</div>

<div onclick="next()">></div>

</body>