实例
实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
/*padding:0px;
margin:0px;*/
list-style:none;
text-decoration:none;
font-family:microsoft yahei;
}
#all{
padding:10px;
width:800px;
height:auto;
border:solid 1px #333;
margin:0 auto;
}
#menu a{font-size:14px;}
#header{width:97%;height:80px;border:solid 1px #444;margin:10px;}
#section{width:97%;height:auto;border:solid 1px #444;margin:10px;}
#footer{width:97%;height:50px;border:solid 1px #444;margin:10px;}
#header ul{height:auto;overflow:hidden;padding-left:100px;}
#header ul li{width:60px;height:30px;float:left;border:solid 1px #456;text-align:center;line-height:30px;}
#logo{width:200px;height:auto;float:left;position:relative;}
#logo img{margin-top:-40px;}
#section ul{height:auto;overflow:hidden;padding:20px;}
#section li{width:200px;height:150px;float:left;border:solid 2px pink;padding:10px;margin-right:21px;margin-bottom:21px;}
#img{width:100px;float:left;}
#copy{height:auto;overflow:hidden;padding-left:100px;line-height:50px;}
#move{width:120px;height:40px;background:pink;position:fixed;right:0px;top:100px;cursor:pointer;font-family:courier;line-height:40px;text-align:center;}
#allmove{width:120px;height:40px;background:pink;position:fixed;right:0px;top:200px;cursor:pointer;font-family:courier;line-height:40px;text-align:center;}
#recovery{width:120px;height:40px;background:pink;position:fixed;right:0px;top:300px;cursor:pointer;font-family:courier;line-height:40px;text-align:center;}
</style>
</head>
<body>
<!-- 内容 start -->
<div id="all">
<!-- 头部 start -->
<div id="header">
<div id="logo"><img src="./sunli/logo.png" alt="" width="100%"></div>
<ul id="menu">
<li><a href="国内">国内</a></li>
<li><a href="国外">国外</a></li>
<li><a href="科技">科技</a></li>
<li><a href="生活">生活</a></li>
</ul>
</div>
<!-- 头部 end -->
<!-- 内容 start -->
<div id="section">
<ul id="images">
<li class="w"><a href=""><img src="./sunli/1.jpg" alt="" width="100%"></a></li>
<li class="w"><a href=""><img src="./sunli/2.jpg" alt="" width="100%"></a></li>
<li class="w"><a href=""><img src="./sunli/3.jpg" alt="" width="100%"></a></li>
<li id='one'><a href=""><img src="./sunli/4.jpg" alt="" width="100%"></a></li>
<li><a href=""><img src="./sunli/5.jpg" alt="" width="100%"></a></li>
<li><a href=""><img src="./sunli/6.jpg" alt="" width="100%"></a></li>
<li name="y"><a href=""><img src="./sunli/7.jpg" alt="" width="100%"></a></li>
<li name="y"><a href=""><img src="./sunli/8.jpg" alt="" width="100%"></a></li>
<li name="y" class='cur'><a href=""><img src="./sunli/9.jpg" alt="" width="100%"></a></li>
</ul>
</div>
<!-- 内容 end -->
<!-- 底部 start -->
<div id="footer">
<div id="img"><img src="./sunli/logo.png" alt="" width="100%" height='50px'></div>
<div id="copy">© Copyright 2014. All Rights Reserved.Beijing</div>
</div>
<!-- 底部 end -->
</div>
<!-- 内容 end -->
<div id="move">Image</div>
<div id="allmove">Body</div>
<div id="recovery">Recovery</div>
</body>
<script type="text/javascript">
window.onload = function(){
var lis = images.getElementsByTagName('li');//获取所有的li
move.onclick = function(){
for(var i=0;i<lis.length;i++){
lis[i].style.transform = 'rotate('+(Math.ceil(Math.random()*90)-45)+'deg)';
}
return false;
}
allmove.onclick = function(){
var d = 0;
var inte = setInterval(function(){
document.body.style.transform = 'rotate('+d+'deg)';
d+=10;
if(d > 360){
clearInterval(inte);
}
},10)
}
recovery.onclick = function(){
for(var i=0;i<lis.length;i++){
lis[i].style.transform = 'rotate(0deg)';
}
return false;
}
}
</script>
<!--jquery部分-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//通过id获取元素
// var re = document.getElementById('move');
// re.style.background = 'blue';
//另一种方式
// var res = $('#move');
// res.css('background','red');
//第二种jq方式
// $('#move').css('background','yellow');
//通过类名来获取元素
// $('.w').css('background','blue');
//通过标签名获取元素
// $('li').css('border','solid 2px blue');
//逗号方式
// $('#logo,.w').css('border','solid 1px red');
//空格方式
// $('#menu li').css('border','solid 2px cyan');
//过滤获取
// $('li:last-child').css('border','solid 2px blue');
// $('#images li:first').css('border','solid 2px blue');
// $('#images li:eq(2)').css('border','solid 2px yellow');
// $('#images li').eq(2).css('border','solid 2px purple');
// //匹配包含文本内容的
// $('li:contains("国")').css('border','solid 2px purple');
// //匹配属性名称包含了哪些关键字的
// $('li[name=y][class=cur]').css('border','dashed 2px purple');
// //匹配下标为偶数的
// $('#images li:even').css('border','dashed 2px purple');
// //匹配下标为奇数的
// $('#images li:odd').css('border','dashed 2px purple');
// //匹配大于或小于
// $('#images li:gt(3)').css('border','dashed 2px blue');
// //获取父级里面的所有子元素
// var lis = $('#images').children();
// var lis = $('#images li:nth-child(4)');
//获取元素集合中的第一个元素
// var lis = $('#images li:first-child');
//获取父元素中的指定元素
// var lis = $('#images li:nth-child(4)');
//获取该元素下子元素的指定位置元素
// var lis = $('#images li:nth-child(4)').css('border','solid 2px purple');
//该元素的上一个节点
// $('#one').prev().css('border','solid 2px purple');
//所有的父节点
// $('#one').parents().css('border','solid 2px purple');
// 获得匹配集合中每个元素的同胞
// $('#one').siblings().css('border','solid 2px purple');
var imgs = $('#images').find('img');
console.log(imgs);
</script>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例运行实例 »
点击 "运行实例" 按钮查看在线实例
