收藏
批改狀態(tài)：合格
老師批語(yǔ)：
jQurey attr與CSS方法實(shí)例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.pos{
width: 1000px;
height: 100%;
text-align: center;
margin:50px auto;
}
</style>
</head>
<body>
<div class="pox">
<button class="but1">點(diǎn)擊更換圖片</button>
<button class="but2">點(diǎn)擊修改尺寸</button><br>
<img src="http://pic1.nipic.com/2008-10-20/2008102011212258_2.jpg" title="細(xì)水長(zhǎng)流" id="imar" >
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('.pox').addClass('pos')
//傳入2參數(shù)后改變?cè)鷮傩缘闹?
$('#imar').attr('title','交友魅力，隨心所欲')
$('#imar').attr('alt','不是你的，你看不見')
$('.but1').click(function(){
$('#imar').attr('src','http://pic11.photophoto.cn/20090528/0010023912902949_b.jpg')
})
$('.but2').click(function(){
$('#imar').width('200px')
$('#imar').height('200px')
})
// 按鈕的寬度
$('.but1').width(80).height(35)
$('.but2').width(80).height(35)
$('#imar').css({
'width':'300',
'height':'400',
'border':'1px solid #808080',
'border-radius':'50%',
'box-shadow':'5px 5px 5px #888',
'margin-top':'30px'
})
$('#imar').offset().left
alert('圖片與左側(cè)的距離是：'+$('#imar').offset().left +'px')
$('#imar').offset().top
alert('圖片與頂部的距離：'+$('#imar').offset().top +'px')
$('#imar').position().left
alert('左側(cè)偏移量是：'+$('#imar').position().left +'px')
$('#imar').position().top
alert('頂部偏移量是：'+$('#imar').position().top +'px')
</script>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
運(yùn)行后效果預(yù)覽圖：
當(dāng)你點(diǎn)擊相應(yīng)的按鈕后，就會(huì)發(fā)生變化，運(yùn)行一下試試吧。
手抄作業(yè)：
微信掃碼
關(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)