每个子div的Jquery MouseOver

时间:2012-10-15 21:26:43

标签: php jquery mouseover

这是我的jquery代码的一部分:

jQuery(document).ready(function() {
var timer, imgsrc, cnt = 1;
$('.post-image img').bind('mouseover', function() {
// if there is no timer
if (!timer) {
var $t = $(this);
var site = $(this).next('.sourcesite').val(); //$(this)>("sourcesite").html();
var dd = $(this).children('div.dd'); //$(this)>("dd"); 
// get the image src
imgsrc = $t.attr('src') //;.replace('default.jpg',''); 
imgReverse = imgsrc.split("").reverse().join(""); // get the image src
// var site="al";
if (site == 'al') {
imgSlash = imgReverse.indexOf('/');
imgDot = imgReverse.indexOf('.');
imgID1 = imgReverse.substr(imgDot + 1, imgSlash - imgDot - 1);
imgID = imgID1.split("").reverse().join("");
} /*getting image name finished for "al"*/
if (site == 'bg') {
imgSplitDot = imgReverse.split('.');
imgID = imgSplitDot[1];
}
dd.html(site);
// get the image src
imgsrc = $t.attr('src').replace(imgID + '.jpg', '');
// start a new timer
timer = setInterval(function() {
// periodically change the src
$t.attr('src', imgsrc + cnt + ".jpg");
// and adjust the counter
cnt = (cnt + 1); //% 3; // 0, 1, 2
if (cnt == 21) {
cnt = 1;
}
}, 700); // <- 1000ms = 1s
}
}).bind('mouseout', function() {
// stop rotation
if (timer) {
clearInterval(timer);
timer = null;
cnt = 0;
}
// set the default img
$(this).attr('src', imgsrc + imgID + '.jpg');
});
});​

这是我的HTML:

<div class="post-image">
<a class="" href="index2.php?vid=php_id&name=name" title="php_name">
<img width="180" height="135" src="php_imgsource" class="attachment" alt="" title=""/>
</a>
<div class="sourcesite">php_sourcesite</div>
<div class="dd">0</div>
</div>

鼠标悬停在div上时,图像会逐一变化。示例:http://jsfiddle.net/YkuXt/1/

但是我的页面中有不同的图像srcs,所以我在这个jquery代码中使用了一个if。我是<div class="sourcesite"></div>中的php代码的源类型名称,我希望通过jquery获取sourcesite值,并在示例中使用if like。如果它是“al”某些代码部分将起作用,但如果它是“bg”,则其他部分将起作用。因为图像源不同。还有一些图像来源样本:

我需要获取图像名称,例如:“1”和“5”。在我找到1之后,我将通过计时器逐个递增1,并且鼠标悬停时图像将被更改。

谢谢,全部。

0 个答案:

没有答案