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

<!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="上一个动作" οnclick="Change(this)"/>
		<input style = "font-size:30px" type="button" value="下一个动作" οnclick="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支持)

减肥吧 少年~~


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值