<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.imgBorder{
border:100px solid #093;}
</style>
<script src="../js/jquery-1.7.2.min.js"></script>
</head>
<script>
$(document).ready(function(){ //就绪函数
//$("img").attr({src:"../练习素材/1、改变图片/images/grape.jpg"}).attr({alt:"ssssss"}).css("border","10px solid red").addClass("imgBorder");
$("div img").mouseover(function(){
$(document.getElementById("myImg")).attr("src","../练习素材/1、改变图片/images/grape.jpg");
//$(this).attr("src","../练习素材/1、改变图片/images/grape.jpg");
});
$("div img").mouseout(function(){
$(this).attr("src","../练习素材/1、改变图片/images/fruit.jpg");
});
$("button").click(function(){
var txt = $(this).html();
if(txt == "隐藏"){
$("img").hide("slow",function(){
alert("隐藏完成");
});
$(this).html("显示");
}
if(txt == "显示"){
$("img").show(500);
$(this).html("隐藏");
}
})
});
/* $(function(){ 简写
})
*/
</script>
<body>
<div>
<img src="../练习素材/1、改变图片/images/fruit.jpg" alt="tupian" id="myImg"/><br />
<button>隐藏</button>
</div>
</body>
</html>
蜗牛—JQuery学习之图片隐藏与鼠标划过
最新推荐文章于 2021-03-26 13:00:45 发布