您的位置：首页 > 其它

点击按钮对数据进行操作(2)

2017-10-13 19:37 281 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.1.12.4.js"></script>
<script>
$(function(){
$("#out").click(function(){
$("#t").slideUp();
});
$("#in").click(function(){
$("#t").slideDown(2020);
});
$("#in_out").click(function(){$("#t").slideToggle()});

$("#myShow").click(function () {
$("#topImg").show();
});

$("#myHide").click(function () {
$("#topImg").hide();
});
$("#myShowOrHide").click(function(){$("#topImg").toggle()});

$("#moveright100px").click(function(){$("#topImg").animate({"left":"100px"},3000)});

$("#moveleft100px").click(function(){$("#topImg").animate({"left":"0"},2000);});

});
</script>
</head>
<body>

<button id="out">淡出</button>
<br/>
<button id="in">淡入</button>
<br/>
<button id="in_out">点击我，如果隐藏就滑入|否则滑出</button>
<br/>
<button id="myShow">点击我，显示</button>
<br/>
<button id="myHide">点击我，隐藏</button>
<br/>
<button id="myShowOrHide">点击我，如果显示就隐藏|如果隐藏就显示</button>
<br/>
<button id="moveright100px">点击我，图片向右移动100px</button>
<button id="moveleft100px">点击我，图片向左移动100px</button>
<br/>
<br/>

<div id="t" style="font-size: 32px">八维学院</div>
<img src="dou.jpg" id="topImg" style="position: absolute">
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航