jQuery在悬停时更改图像(然后返回到初始图像)
jquery change image on hover (and then come back to initial image)
我有一个照片库,我真的很想用另一张图片更改悬停时的每一张图片。我从数据库中动态获取图像(它实际上是图像的向量)
现在,我使用jquery插件,但它不起作用。 它工作的唯一方法是,如果我静态放置 ID(始终相同),但它只会更改具有单个特定图像的任何图像。 我能做什么?我有代码:
<? foreach ($paginated_products as $product):?>
<? $image = $product->images->limit(2)->find_all(); ?>
<script>
$('img#nav<?php echo $image[1]; ?>').hover(function() {
$(this).attr("src","<?php echo $image[0]->url; ?>");
}, function() {
$(this).attr("src","<?php echo $image[1]->url; ?>");
});</script>
//this way doesn;t work at all. if i put simply img#nav , it only changes me with a single image.
<img src="<?= $image[1]->url; ?>" id ="nav<?php echo $image[1]; ?>"></img>
你不应该把你的脚本分成两部分吗?
你是 $(...hover() 函数无法工作,因为 jquery 尚未初始化。
PS:你能显示生成的html的一部分吗?
第一个应该像:
<script>
$(document).ready(function() {
<? foreach ($paginated_products as $product):?>
<? $image = $product->images->limit(2)->find_all(); ?>
$('img#nav<?php echo $image[1]; ?>').hover(function() {
$(this).attr("src","<?php echo $image[0]->url; ?>");
}, function() {
$(this).attr("src","<?php echo $image[1]->url; ?>");
});
<?php endforeach; ?>
});
</script>
然后你的身体会有第二部分(图片应该去的地方)
<?php foreach ($paginated_products as $product):?>
<?php $image = $product->images->limit(2)->find_all(); ?>
<img src="<?= $image[1]->url; ?>" id ="nav<?php echo $image[1]; ?>" />
<?php endforeach; ?>
您最好为替代方案提供一个键/值对象。
<script>
var altImages = {
<?php
$images = array();
foreach ($paginated_products as $product) {
$cImage = $product->images->limit(2)->find_all();
?>
"<?php echo $image[1]->url; ?>": "<?php echo $image[0]->url; ?>",
<?php
$images[] = $cImage;
}
?>
};
$(document).ready(function() {
$('.switch-img').hover(function() {
$(this).data('old-src', $(this).attr('src'));
$(this).attr('src', altImages[$(this).attr('src')]);
}, function() {
$(this).attr('src', $(this).data('old-src'));
});
});
</script>
<?php
foreach ($images as $cImage) {
?>
<img src="<?php echo $cImage[1]->url; ?>" class="switch-img" />
<?php
}
?>
评论,某处似乎存在不匹配$image[1]
这是一个整数,但根据您的代码,它是一个对象。
如果它是一个对象,nav<?php echo $image[1]; ?>
会给你留下很多相同的id,这解释了你遇到的问题。
很可能(我还没有看到你的类......)id存储在对象的某个地方,所以你必须使用类似$image[1]->id
而不是$image[1]
的东西。
如果每个图像都有链接,则可以为每个图像指定一个类,并在悬停时循环访问它们。 下面是如何使用 3 张图像执行此操作的示例:
http://jsfiddle.net/briguy37/QSQ62/
更新
另外,这里有一个示例,您可以在其中直接使用 JQuery 更改背景图像,这样您就不必编写一堆 CSS 类定义。 您必须修改此设置以调用相应的图像 URL 以从数据库加载它们:
http://jsfiddle.net/briguy37/QSQ62/3/
如果您使用精灵而不是单独的图像,图像更改会更快,因为浏览器会同时加载所有图像,因此您可以使用 jquery 更改背景位置。
jQuery(document).ready(function($) {
$('<img src="//replace with php src call" id="//replace with php id call" onMouseOver="hoverImg()" onMouseOut="resetImg()"/>').insertAfter('//the element that the image will be place after in the HTML');
});
function hoverImg() {
var name_element = $('//replace with image id from above');
name_element.src = "//replace with hover image source";
}
function resetImg() {
var name_element = $('//replace with image id from above');
name_element.src = "//replace with original image source";
}
这是一种方法(除非你不想通过jQuery添加<img>
元素)
- Imgur API图像搜索未返回数据
- instafeed.js返回的居中图像
- 使用纯JavaScript返回并嵌入图像,如php
- html5 canvas toDataURL 返回空白图像
- 如何使用 HTML 图像请求将数据发送到服务器,或返回数据作为响应
- 从 JavaScript 中的图像中读取像素数据会返回半透明像素的意外结果
- 使用从readAsDataURL()返回的图像数据
- 有没有一种方法可以判断图像src是否在javascript内部返回null
- 提交输入类型=“;图像“;到另一个servlet时,未能返回任何参数
- jquery裁剪图像selction未返回结果
- ajax 返回带有循环的图像长度,检查最后一个循环
- dojo/使用NodeJS请求一个png图像数组缓冲区,并将图像返回给客户端
- 当用户不进行交互时,如何使图像返回到屏幕顶部
- 图像返回到原始源OnClick
- 无法通过异步ajax调用呈现base64图像返回
- 使用Ajax预览图像:返回一个损坏的图像图标
- Blob图像返回空白图像
- javascript getImageData未从png图像返回正确的像素颜色
- 如何在单击时将图像返回到网站上的另一个位置
- 图像返回值“;空”;