您的位置：首页 > Web前端 > CSS

js练习之事件切换图片和控制css样式以及指定页面滚动位置

2014-06-05 16:52 1046 查看

<!DOCTYPE html>
<html style="overflow: auto;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>LoseWight</title>
<script type="text/javascript">
<!--
var n = 1;
function Change (event){

var myImg = document.getElementById("myImg");
var spanId = document.getElementById("spanID");

if(event.value == "上一个动作")
{
n--;
if(n == 0)n = 8;
myImg.src = n + ".gif";
spanId.innerText = "文件标题：" + n + ".gif";
}
else if(event.value == "下一个动作")
{
n++;
if(n == 9) n = 1;
myImg.src = n + ".gif";
spanId.innerText = "文件标题：" + n + ".gif";
}
window.scrollTo(0,46);
}

//-->
</script>

</head>
<body >
<img id = "my" src="9.jpg" style="float:left; width:750px" />
<div align = "center" style = "float:right; margin-top:50px;">
<span id = "spanID" style = "font-size:40px; color:blue; font-family:华文新魏">文件标题:   1.gif</span><br/>
<img id = "myImg" style = "width:500px ;" src="1.gif"/><br/>
<input style = "font-size:30px" type="button" value="上一个动作" onclick="Change(this)"/>
<input style = "font-size:30px" type="button" value="下一个动作" onclick="Change(this)"/>
</div>
</body>
</html>

demo1

链接: http://pan.baidu.com/s/1sj6TFeH 密码: g3qi

demo2

链接: http://pan.baidu.com/s/1dDovsOh 密码: hwk4

innerText 方法firefox不支持。。。

demo3

链接: http://pan.baidu.com/s/1mgLrcAs 密码: vanl（chrome ie支持）

减肥吧少年～～

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航