1，单纯显示文本内容：
html代码：
<!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>
<script src="jquery-2.2.3.min.js"></script>
<script src="style.js" type="text/javascript"></script>
</head>
<body>
<div class="a"> 鼠标移到A上 </div>
<div class="b" style="display:none;"> A 显示出来 </div>
</body>
</html>
JS代码：
var isHover = false;
$(function() {
$(".a").hover(function() {
isHover = true;
$(".b").show();
}, function() {
isHover = false;
setTimeout(function() {
if (!isHover) {
$(".b").fadeOut();
}
}, 10);
});
$(".b").hover(function() {
isHover = true;
}, function() {
isHover = false;
$(".b").fadeOut();
});
});
2，带图片变化
效果图：
HTML代码：
<div class="buy_car fl">
<img src="images/shopcar.png" class="buy_car_img fr"/>
<div class="buy_car_spec">
<p></p>
</div>
</div>
JS代码：
$(function() {
//购物车切换图片
var isHover = false
var timer1 = null;
$(".buy_car_img").hover(function() {
isHover = true;
$(".buy_car_img").attr("src", "images/shopcarhover.png");
$(".buy_car_spec").animate({
height: 100
}, 200, function() {
$(".buy_car p").html("购物车中还没有商品，赶紧选购吧！");
});
}, function() {
isHover = false;
$(this).stop(timer1);
timer1 = setTimeout(function() {
if (!isHover) {
$(".buy_car_spec").animate({
height: 0
}, 200, function() {
$(".buy_car p").html("");
});
$(".buy_car_img").attr("src", "images/shopcar.png");
}
}, 200);
});
$(".buy_car_spec").hover(function() {
isHover = true;
$(".buy_car_img").attr("src", "images/shopcarhover.png");
$(".buy_car_spec").animate({
height: 100
}, 200, function() {
$(".buy_car p").html("购物车中还没有商品，赶紧选购吧！");
});
}, function() {
isHover = false;
$(this).stop(timer1);
timer1 = setTimeout(function() {
if (!isHover) {
$(".buy_car_spec").animate({
height: 0
}, 200, function() {
$(".buy_car p").html("");
});
$(".buy_car_img").attr("src", "images/shopcar.png");
}
}, 200);
});
时间： 2024-11-01 00:05:34