VIP会员
购物车
私信
发表新帖
立即签到
关注
回复
支持(
反对(
首页上一页 1 下一页尾页 1 条记录 1/1页
javascript从入门到精通
发表在Java图书答疑
2012-12-01
是否精华
是
否
版块置顶:
是
否
为什么光盘内的案例在各个浏览器都显示不出js效果呀？例如<!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 type="text/javascript" src="JS/jquery-1.6.1.min.js"></script>
<style type="text/css">
a img {
border: 0; /*无边框*/
}
#container {
position: relative; /*设置相对布局*/
background: #E0F0FB; /*设置背景颜色*/
width: 240px; /*设置宽度*/
height: 70px; /*设置高度*/
margin: 1px auto; /*设置外边距*/
padding: 0; /*设置内边距*/
border:1px solid #A1D6FE; /*设置边框*/
z-index: 2; /*设置层叠次序*/
}
#container .box {
position: relative; /*设置相对布局*/
width: 480px;
z-index: 3; /*设置层叠次序*/
}
#container a {
float: left; /*设置浮动在左边*/
margin: 5px 0px 5px 5px; /*设置外边距*/
height: 58px;
}
#container .control {
position: absolute; /*设置绝对布局*/
z-index: 3; /*设置层叠次序*/
left: 0; /*设置左边距*/
top: 0; /*设置顶边距*/
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var spacing = 90; //定义保存间距的变量
function createControl(src) { //定义创建控制图片的函数
return $('<img/>')
.attr('src', src) //设置图片的来源
.attr("width",80)
.attr("height",60)
.addClass('control')
.css('opacity', 0.6) //设置透明度
.css('display', 'none'); //默认为不显示
}
var $leftRollover = createControl('images/left.gif'); //创建向左移动的控制图片
var $rightRollover = createControl('images/right.gif'); //创建向左移动的控制图片
$('#container').css({ //改变图像传送带容器的CSS样式
'width': spacing * 3,
'height': '70px',
'overflow': 'hidden' //溢出时隐藏
}).find('.box a').css({
'float': 'none',
'position': 'absolute', //设置为绝对布局
'left': 1000 //将左边距设置为1000，目的是不显示
});
var setUpbox = function() {
var $box = $('#container .box a');
$box.unbind('click mouseenter mouseleave'); //移除绑定的事件
/******************************左边的图片*************************************/
$box.eq(0)
.css('left', 0)
.click(function(event) {
$box.eq(0).animate({'left': spacing}, 'fast'); //为第一张图片添加动画
$box.eq(1).animate({'left': spacing * 2}, 'fast'); //为第二张图片添加动画
$box.eq(2).animate({'left': spacing * 3}, 'fast'); //为第3张图片添加动画
$box.eq($box.length - 1)
.css('left', -spacing) //设置左边距
.animate({'left': 0}, 'fast', function() {
$(this).prependTo('#container .box');
setUpbox();
}); //添加动画
event.preventDefault(); //取消事件的默认动作
}).hover(function() { //设置鼠标的悬停事件
$leftRollover.appendTo(this).fadeIn(200); //显示向左移动的控制图片
}, function() {
$leftRollover.fadeOut(200); //隐藏向左移动的控制图片
});
/******************************右边的图片**************************************/
$box.eq(2)
.css('left', spacing * 2) //设置左边距
.click(function(event) { //绑定单击事件
$box.eq(0) //获取左边的图片，也就是第一张图片
.animate({'left': -spacing}, 'fast', function() {
$(this).appendTo('#container .box');
setUpbox();
}); //添加动画
$box.eq(1).animate({'left': 0}, 'fast');//添加动画
$box.eq(2).animate({'left': spacing}, 'fast');//添加动画
$box.eq(3)
.css('left', spacing * 3) //设置左边距
.animate({'left': spacing * 2}, 'fast'); //添加动画
event.preventDefault(); //取消事件的默认动作
}).hover(function() { //设置鼠标的悬停事件
$rightRollover.appendTo(this).fadeIn(200); //显示向右移动的控制图片
}, function() {
$rightRollover.fadeOut(200); //隐藏向右移动的控制图片
});
/************************中间的图片*****************************************/
$box.eq(1).css('left', spacing); //设置中间图片的左边距
};
setUpbox();
$("a").attr("target","_blank"); //查看原图时，在新的窗口中打开
});
</script>
</head>
<body>
<div id="container">
<div class="box">
<a href="images/01.jpg"><img height=60 src="images/01.jpg" width=80></a>
<a href="images/02.jpg"><img height=60 src="images/02.jpg" width=80></a>
<a href="images/03.jpg"><img height=60 src="images/03.jpg" width=80></a>
<a href="images/04.jpg"><img height=60 src="images/04.jpg" width=80></a>
<a href="images/05.jpg"><img height=60 src="images/05.jpg" width=80></a>
<a href="images/06.jpg"><img height=60 src="images/03.jpg" width=80></a>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现图像传送带</title>
<script type="text/javascript" src="JS/jquery-1.6.1.min.js"></script>
<style type="text/css">
a img {
border: 0; /*无边框*/
}
#container {
position: relative; /*设置相对布局*/
background: #E0F0FB; /*设置背景颜色*/
width: 240px; /*设置宽度*/
height: 70px; /*设置高度*/
margin: 1px auto; /*设置外边距*/
padding: 0; /*设置内边距*/
border:1px solid #A1D6FE; /*设置边框*/
z-index: 2; /*设置层叠次序*/
}
#container .box {
position: relative; /*设置相对布局*/
width: 480px;
z-index: 3; /*设置层叠次序*/
}
#container a {
float: left; /*设置浮动在左边*/
margin: 5px 0px 5px 5px; /*设置外边距*/
height: 58px;
}
#container .control {
position: absolute; /*设置绝对布局*/
z-index: 3; /*设置层叠次序*/
left: 0; /*设置左边距*/
top: 0; /*设置顶边距*/
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var spacing = 90; //定义保存间距的变量
function createControl(src) { //定义创建控制图片的函数
return $('<img/>')
.attr('src', src) //设置图片的来源
.attr("width",80)
.attr("height",60)
.addClass('control')
.css('opacity', 0.6) //设置透明度
.css('display', 'none'); //默认为不显示
}
var $leftRollover = createControl('images/left.gif'); //创建向左移动的控制图片
var $rightRollover = createControl('images/right.gif'); //创建向左移动的控制图片
$('#container').css({ //改变图像传送带容器的CSS样式
'width': spacing * 3,
'height': '70px',
'overflow': 'hidden' //溢出时隐藏
}).find('.box a').css({
'float': 'none',
'position': 'absolute', //设置为绝对布局
'left': 1000 //将左边距设置为1000，目的是不显示
});
var setUpbox = function() {
var $box = $('#container .box a');
$box.unbind('click mouseenter mouseleave'); //移除绑定的事件
/******************************左边的图片*************************************/
$box.eq(0)
.css('left', 0)
.click(function(event) {
$box.eq(0).animate({'left': spacing}, 'fast'); //为第一张图片添加动画
$box.eq(1).animate({'left': spacing * 2}, 'fast'); //为第二张图片添加动画
$box.eq(2).animate({'left': spacing * 3}, 'fast'); //为第3张图片添加动画
$box.eq($box.length - 1)
.css('left', -spacing) //设置左边距
.animate({'left': 0}, 'fast', function() {
$(this).prependTo('#container .box');
setUpbox();
}); //添加动画
event.preventDefault(); //取消事件的默认动作
}).hover(function() { //设置鼠标的悬停事件
$leftRollover.appendTo(this).fadeIn(200); //显示向左移动的控制图片
}, function() {
$leftRollover.fadeOut(200); //隐藏向左移动的控制图片
});
/******************************右边的图片**************************************/
$box.eq(2)
.css('left', spacing * 2) //设置左边距
.click(function(event) { //绑定单击事件
$box.eq(0) //获取左边的图片，也就是第一张图片
.animate({'left': -spacing}, 'fast', function() {
$(this).appendTo('#container .box');
setUpbox();
}); //添加动画
$box.eq(1).animate({'left': 0}, 'fast');//添加动画
$box.eq(2).animate({'left': spacing}, 'fast');//添加动画
$box.eq(3)
.css('left', spacing * 3) //设置左边距
.animate({'left': spacing * 2}, 'fast'); //添加动画
event.preventDefault(); //取消事件的默认动作
}).hover(function() { //设置鼠标的悬停事件
$rightRollover.appendTo(this).fadeIn(200); //显示向右移动的控制图片
}, function() {
$rightRollover.fadeOut(200); //隐藏向右移动的控制图片
});
/************************中间的图片*****************************************/
$box.eq(1).css('left', spacing); //设置中间图片的左边距
};
setUpbox();
$("a").attr("target","_blank"); //查看原图时，在新的窗口中打开
});
</script>
</head>
<body>
<div id="container">
<div class="box">
<a href="images/01.jpg"><img height=60 src="images/01.jpg" width=80></a>
<a href="images/02.jpg"><img height=60 src="images/02.jpg" width=80></a>
<a href="images/03.jpg"><img height=60 src="images/03.jpg" width=80></a>
<a href="images/04.jpg"><img height=60 src="images/04.jpg" width=80></a>
<a href="images/05.jpg"><img height=60 src="images/05.jpg" width=80></a>
<a href="images/06.jpg"><img height=60 src="images/03.jpg" width=80></a>
</div>
</div>
</body>
</html>
分享到：
