javascript - tree div use one jquery -
i have 3 different names in div class. can run 1 class name jquery. can not run tree class name jquery. can me. in study can use such p_img. p_img, p_img2 , tree_img these 3 classes. how can use in single javascript. jsfiddle demo
this javascript code image crop 1 div ( p_img )
$('.p_img img').each(function() { var image = $(this), height = image.height(), width = image.width(); if (width > height) { image.addclass('height'); var middle = 0 - (image.width() - image.closest('.p_img').width()) / 2; image.css('margin-left', middle + 'px'); } else { var middle = 0 - (image.height() - image.closest('.p_img').height()) / 2; image.css('margin-top', middle + 'px'); } }); html code:
<div class="profile_cover_container"> <div class="cover_container"> <div class="cover_img"> <div class="p_img"> <a href="#"> <img src="http://scontent-b-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/1780641_780166082011699_1924260798_n.jpg" width="198" height="198" padding="0" /> </a> </div> <div class="p_img"> <a href="#"> <img src="http://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t31.0-8/964870_679724332055875_989825665_o.jpg" width="198" height="auto" padding="0" /> </a> </div> </div> <div class="cover_img_big"> <div class="p_img2"> <a href="#"> <img src="http://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t31.0-8/964870_679724332055875_989825665_o.jpg" width="400" height="400" padding="0" /> </a> </div> </div> <div class="cover_tree_img"> <div class="tree_img"><a hre0f="#"><img src="" width="381" height="133" ></a></div> <div class="tree_img"><a hre0f="#"><img src="" width="381" height="133" ></a></div> <div class="tree_img"><a hre0f="#"><img src="" width="381" height="133" ></a></div> </div> </div> </div> and css code:
.profile_cover_container{ position:relative; width:981px; height:400px; margin-left:auto; margin-right:auto; overflow:hidden; border:1px solid #d8dbdf; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; margin-top:3px; } .cover_container { width:981px; height:400px; float:left; } .cover_img { float:left; width:200px; height:400px; background-color:#000; } .p_img { float:left; width:198px; height:198px; margin:1px; overflow: hidden; } .p_img img { width: 100%; } .p_img img.height { width: auto; height:100%; } .cover_img_big { float:left; width:400px; height:400px; background-color:black; } .p_imb2 { float:left; width:400px; height:400px; margin:1px; overflow: hidden; } .p_imb2 img { width: 100%; } .p_imb2 img.height { width: auto; height:100%; } .cover_tree_img { float:left; width:381px; height:400px; background-color:black; } .tree_img { float:left; width:381px; height:133px; overflow:hidden; }
you can add multiple classes selector in css:
$('.p_img img, .p_img, .p_img2').each(function(){ ... });
Comments
Post a Comment