[A] 放大镜练习
准备工作：一张 960 * 600 的图片，并命名为 timg.jpg
示例代码：
1. style样式
<style>
*{ margin: 0px; padding: 0px;}
#small{ width: 480px; height: 300px; border: solid black 1px;position: absolute;
left: 100px;top: 100px;}
#small img{ width: 100%; height: 100%;}
#magnify{ width: 100px; height: 100px; background-color: gray; border: solid black 1px;
opacity: 0.3; position: absolute; display: none; cursor: pointer;}
#large{ width: 400px; height: 400px; border: solid black 1px; position: absolute;
left: 700px; top: 100px; overflow: hidden;}
#large img{ width: 1920px; height: 1200px; position: absolute;}
</style>
2. js行为
<script src="jquery1102/jquery-1.10.2.min.js"></script>
<script>
$(function(){
$("#small").mouseover(function(ev){
$("#magnify").show();
$(document).mousemove(function(ev){
var oL = ev.clientX - $("#small").offset().left;
var oT = ev.clientY - $("#small").offset().top;
oL = oL < 50 ? 50 : oL;
oL = oL > 430 ? 430 : oL;
oT = oT < 50 ? 50 : oT;
oT = oT > 250 ? 250 : oT;
$("#magnify").css({
left: oL - 50,
top: oT - 50
});
$("#disp").css({
left: -4 * $("#magnify").position().left,
top: -4 * $("#magnify").position().top
})
})
})
$("#small").mouseout(function(){
$("#magnify").hide();
})
})
</script>
3. html布局
<body>
<div id="small">
<img src="timg.jpg">
<div id="magnify"></div>
</div>
<div id="large">
<img src="timg.jpg" id="disp">
</div>
</body>
[B] banner图练习
准备工作：准备五张图片，大小可自定，但是要求五张图片尺寸相同，分别命名为111.jpg，222.jpg，333.jpg，444.jpg，555.jpg。
示例代码：
1. css样式
<style>
*{ margin: 0px; padding: 0px;}
#container{ width: 1000px; height: 400px; border: solid black 1px; margin-top: 100px;
margin-left: 300px; position: relative; overflow: hidden;}
#container ol{ list-style: none;position: absolute; left: 700px; top:350px; z-index: 10;}
#container ol li{ width: 25px; height: 25px; float: left; margin-right: 30px; text-align: center;
line-height: 25px; border: solid gainsboro 1px; cursor: pointer;}
.active{ background-color: moccasin;}
#box{ position: absolute;}
#box img{ vertical-align: bottom;}
</style>
2. js行为
<script src="jquery1102/jquery-1.10.2.min.js"></script>
<script>
$(function(){
var flag = 0;
var timer = null;
function slider(user){
$("ol li").eq(flag).attr("class", "active").siblings().attr("class", "");
$("#box").animate({
top: flag * -400
}, 500, function(){
if(flag == 5 & user == null){
$("#box").css("top", 0);
$("ol li").eq(0).attr("class", "active").siblings().attr("class", "");
flag = 0;
}
})
}
timer = setInterval(() => {
flag++;
flag = flag % 6;
slider();
}, 1000);
$("#box").mouseenter(function(){
clearInterval(timer);
}).mouseleave(function(){
timer = setInterval(() => {
flag++;
flag = flag % 6;
slider();
}, 1000);
})
$("ol li").mouseover(function(){
clearInterval(timer);
flag = $(this).index();
slider("yes");
})
})
</script>
3. html布局
<body>
<div id="container">
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<div id="box">
<a href="#"><img src="111.jpg"></a>
<a href="#"><img src="222.jpg"></a>
<a href="#"><img src="333.jpg"></a>
<a href="#"><img src="444.jpg"></a>
<a href="#"><img src="555.jpg"></a>
<a href="#"><img src="111.jpg"></a>
</div>
</div>
</body>
[C] 购物车练习
。。