放大单击的图像,而不考虑其他图像的位置
Enlarge clicked image irrespective to position of other images
我想放大点击的图像,我正在通过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)');
}
$('#img-wrap')
选择一个名为img包装的id
$('.img-wrap')
选择类
我会说:
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函数中。此外,您的图像都具有相同的ID,这是无效的。每个ID都必须是唯一的。
相关文章:
- 防止“;jQuery(html)"防止触发浏览器请求图像和其他参考内容
- Ajax调用,发送图像和其他数据
- 将href中的图像替换为其他元素中的图像
- 以编程方式将fabric-js-canvas的图像替换为hq图像,并重新计算其他对象的坐标和大小
- 在其他图像下使用javascript将图像插入html
- 如何使用幻灯片显示其他图像
- 防止图像拖动,但其他任何内容
- 当使用MouseEvent将图像更改为其他图像时,如何避免闪烁
- 运行fancybox thumb时隐藏其他图像
- 根据其他调整大小的html元素定位背景图像
- 动态加载的缩略图显示其他缩略图的全尺寸图像,而不是自己的缩略图(使用javascript悬停效果)
- 添加/到URL的末尾将用户带到随机页面,并在其他页面上剥离图像
- 使用javascript中的if和else语句来显示图像(如果图像不存在,则显示其他图像)
- 如果当前图像加载缓慢,如何加载其他图像
- 如何使用xmlhttprequest将图像和其他数据一起发送
- 如何从其他网页获取图像并在我的网站上显示
- Javascript:图像对象的oneror事件有哪些参数?如何获取与图像相关的错误的其他详细信息
- Fancybox图像点击可以独立工作,但不能与我的其他代码一起工作
- 在jsson图像滑块之间切换(显示一个,隐藏其他)
- 用图像和其他内容替换动态内容