收藏
實(shí)例
<!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>
<!-- 內(nèi)容 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="國(guó)內(nèi)">國(guó)內(nèi)</a></li>
<li><a href="國(guó)外">國(guó)外</a></li>
<li><a href="科技">科技</a></li>
<li><a href="生活">生活</a></li>
</ul>
</div>
<!-- 頭部 end -->
<!-- 內(nèi)容 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>
<!-- 內(nèi)容 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>
<!-- 內(nèi)容 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');
//通過標(biāo)簽名獲取元素
// $('li').css('border','solid 2px blue');
//逗號(hào)方式
// $('#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');
// //匹配包含文本內(nèi)容的
// $('li:contains("國(guó)")').css('border','solid 2px purple');
// //匹配屬性名稱包含了哪些關(guān)鍵字的
// $('li[name=y][class=cur]').css('border','dashed 2px purple');
// //匹配下標(biāo)為偶數(shù)的
// $('#images li:even').css('border','dashed 2px purple');
// //匹配下標(biāo)為奇數(shù)的
// $('#images li:odd').css('border','dashed 2px purple');
// //匹配大于或小于
// $('#images li:gt(3)').css('border','dashed 2px blue');
// //獲取父級(jí)里面的所有子元素
// var lis = $('#images').children();
// var lis = $('#images li:nth-child(4)');
//獲取元素集合中的第一個(gè)元素
// 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');
//該元素的上一個(gè)節(jié)點(diǎn)
// $('#one').prev().css('border','solid 2px purple');
//所有的父節(jié)點(diǎn)
// $('#one').parents().css('border','solid 2px purple');
// 獲得匹配集合中每個(gè)元素的同胞
// $('#one').siblings().css('border','solid 2px purple');
var imgs = $('#images').find('img');
console.log(imgs);
</script>
</html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)