004 JQuery (010 - 016)
[A] 放大镜练习
准备工作:一张 960 * 600 的图片,并命名为 timg.jpg
示例代码:
1. style样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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行为
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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布局
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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行为
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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布局
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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] 购物车练习
。。