Jquery实例效果—加载条和自动轮播图
摘要： 前端开发写代码之前的准备 编写高质量代码 web前端开发修炼之道 wep前端开发代码 html 代码片段 <!DOCTYPE html> <html> <head> <meta charset=”utf-8̸……
| 前端开发写代码之前的准备 |
| 编写高质量代码 web前端开发修炼之道 |
| wep前端开发代码 |
html 代码片段
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title></title>
<script
language=”javascript”
></script>
<script language=”javascript”>
$(function () {
var start = 0;
var loadDom = $(“.load>.loadLine”);
var loadWdth = loadDom.css(“width”);
var info = setInterval(num, 20);
loadDom.animate({ width: “100%” }, 2000, function () {
$(“.content”).slideDown(1000);
var info1 = setInterval(autoImg, 1500);
});
function num() {
start = start + 1;
loadDom.text(“loading” + (start) + “%”);
console.log(start);
if (start == 100) {
clearInterval(info);
}
}
function autoImg() {
var ulDom = $(“#ulDom”);
var leftNum = parseInt(ulDom.css(“left”));
ulDom.animate({ left: leftNum – 148 + “px” }, 500, function () {
var li = ulDom.children()[0];
li.remove();
ulDom.append(li);
ulDom.css(“left”, “0px”);
});
}
}) < br />
</script>
<style type=”text/css”>
html,
body {
padding: 0px;
margin: 0px;
background: #c3c6c9;
font-family: ‘微软雅黑’;
}
.boxDom {
width: 600px;
height: auto;
margin: 100px auto;
padding: 20px;
background: #e4e6e7;
box-shadow: 0px 0px 6px #666;
}
h2 {
margin-top: 0px;
text-align: center;
}
.load {
border: 1px solid #999;
background: -webkit-linear-gradient(top, #ccc, #eee, #fff);
box-shadow: 0px 2px 4px #999;
width: 560px;
height: 30px;
border-radius: 60px;
margin: 20px auto;
}
.loadLine {
background: #8fd95b;
width: 0px;
height: 30px;
border-radius: 60px;
line-height: 1.8em;
text-align: center;
}
.content {
display: none;
overflow: hidden;
position: relative;
height: 140px;
}
.content ul {
position: absolute;
left: 0px;
padding: 0px;
margin: 0px;
width: 1192px;
height: 140px;
list-style: none;
}
.content ul li {
float: left;
margin-left: 8px;
}
.content ul li img {
width: 140px;
}
</style>
</head>
<body>
<div class=”boxDom”>
<h2>Loading…</h2>
<div class=”load”><div class=”loadLine”></div></div>
<div class=”content”>
<ul id=”ulDom”>
<li>
<img
src=”http://img.hoop8.com/attachments/1602/5342062172999.jpg”
alt=”1″
/>
</li>
<li>
<img
src=”http://img.hoop8.com/attachments/1602/5312062172999.jpg”
alt=”2″
/>
</li>
<li>
<img
src=”http://img.hoop8.com/attachments/1602/5262062172999.jpg”
alt=”3″
/>
</li>
<li>
<img
src=”http://img.hoop8.com/attachments/1602/5222062172999.jpg”
alt=”4″
/>
</li>
<li>
<img
src=”http://img.hoop8.com/attachments/1602/5172062172999.jpg”
alt=”5″
/>
</li>
<li>
<img
src=”http://img.hoop8.com/attachments/1602/5122062172999.jpg”
alt=”6″
/>
</li>
<li>
<img
src=”http://img.hoop8.com/attachments/1602/5052062172999.jpg”
alt=”7″
/>
</li>
<li>
<img
src=”http://img.hoop8.com/attachments/1602/4592062172999.jpg”
alt=”8″
/>
</li>
</ul>
</div>
</div>
</body>
</html>
| web前端开发的代码编辑器 |
| 前端代码开发规范 |
| 前端代码能开发吗 |
» 本文来自：前端开发者 » 《Jquery实例效果—加载条和自动轮播图》
» 本文链接地址：https://www.rokub.com/6396.html
» 您也可以订阅本站：https://www.rokub.com
近期评论