无论其他图像的位置如何,都放大点击的图像

时间:2013-08-11 16:32:04

标签: php javascript jquery html css

我想放大点击的图像,我正在通过AJAX获取图像。

我尝试在JavaScript中使用类img-wrap

$('.img-wrap').css('transform','scale(40,20)');

但是这会放大所有图像,我的页面上有大约20张图像。

AJAX页面:

<?php
        sleep(1);
        $c=mysql_connect("localhost", "abc", "xyz");
        mysql_select_db("root");

        $sql = "select * from image2 ";
        $qc = mysql_query( $sql ) or die( mysql_error() );              
        $count = 0;
        while( $ans = mysql_fetch_array( $qc ) ) {
            $title=ucwords($ans['EVENT']);
            print " 
               <div class='img-wrap' id='$count' onclick='big(this.id)'>
                <img id='display_img' src='slider_images/$ans[img]' draggable='false'>
               </div>";
            $count++;
        }
?>

JAVASCRIPT:

function big( z ) {
    $(this.id).css('transform','scale(40,20)');
    $(this.id).css('-webkit-transform','scale(40,20)');
    $(this.id).css('-moz-transform','scale(40,20)');
    $(this.id).css('-ms-transform','scale(40,20)');
} 

2 个答案:

答案 0 :(得分:0)

$('#img-wrap')

选择一个名为img-wrap

的id
$('.img-wrap')

选择班级

答案 1 :(得分:0)

我会说:

function big(z) {
    $(z).find('img').({
        'transform','scale(40,20)',
        '-webkit-transform','scale(40,20)',
        '-moz-transform','scale(40,20)',
        '-ms-transform','scale(40,20)'
    });
}

(您可以通过将CSS属性设为对象({})来在CSS函数中放置多个CSS属性。 此外,您的图片都具有相同的ID无效。每个ID都必须是唯一的。