Страница 1 из 1
[JavaScript] эффект прокурутки каринок при наведении мышки
Добавлено: 2009-12-28 21:09:50
ProFTP
сабж
как такое сделать, эффект прокурутки каринок при наведении мышки
т.е. есть картинка, например, кликабельная, наводим на ее мышкой и видем все остальные картинки, которые крутутся через 2 сек.... (например, это превиюшки видео клипа) как анимированный gif
никто не видел?
Re: [JavaScript] эффект прокурутки каринок при наведении мышки
Добавлено: 2009-12-28 23:56:12
ProFTP
1) нашел
http://www.zavodskieokna.ru/content/main/okna_160.html
слева
Код: Выделить всё
<td width="250" valign="top">
<div class="face"><img id="ban" alt="" src="/uploads/rotator/face_1.jpg" style="filter: blendTrans(duration=0.5);"></div>
<!--div class="o_face" id=DIV1">Мы</div-->
</td>
<script language="JavaScript" type="text/JavaScript">
<!--
function SetBan (id, gn, gi)
{
this.id=id;
this.gn=gn;
this.gi=gi;
}
var ban_x = 0;
function chBan ()
{
var ban = document.getElementById('ban');
ban.src="/uploads/rotator/" + eval("ban"+ban_x).gi;
if (ban_x<7)
{
ban_x = ban_x + 1;
}
else
{
ban_x=0;
}
}
ban0 = new SetBan ('', '', 'face_15.jpg');
ban1 = new SetBan ('', '', 'face_13.jpg');
ban2 = new SetBan ('', '', 'face_14.jpg');
ban3 = new SetBan ('', '', 'face_2.jpg');
ban4 = new SetBan ('', '', 'face_16.jpg');
ban5 = new SetBan ('', '', 'face_12.jpg');
ban6 = new SetBan ('', '', 'face_3.jpg');
ban7 = new SetBan ('', '', 'face_11.jpg');
function getSecs()
{
chBan ();
window.setTimeout('getSecs()',5000);
}
//-->
</script>
2) _http://js.youporn.com/r/20090813.4/script/thumbchange-r5.js
Код: Выделить всё
YAHOO.namespace("youporn.thumbchange");
YAHOO.youporn.thumbchange = function () {
var yue = YAHOO.util.Event;
var yud = YAHOO.util.Dom;
function Changer(el) {
this.el = el;
this.origsrc = el.src;
this.running = false;
this.runnable = true;
this.images = new Array();
this.num_ss = this.el.getAttribute('num');
this.multiple_thumbnail_url = this.el.getAttribute('multiple_thumbnail_url');
if (this.multiple_thumbnail_url) {
this.prepend_url = this.el.getAttribute('multiple_thumbnail_url');
}
else {
var result = el.src.match(/screenshot\/(\d+)_(large|extra_large)\.jpg$/);
if (result) {
this.video_id = result[1];
this.size = result[2];
this.prepend_url = el.src.substr(0, el.src.search(/screenshot\/(\d+)_(large|extra_large)\.jpg$/));
} else {
this.runnable = false;
}
}
}
Changer.prototype.start = function () {
yud.addClass(this.el, 'highlight-on');
if (this.runnable) {
this.running = true;
this.preload();
this.animate(1);
}
}
Changer.prototype.stop = function () {
yud.removeClass(this.el, 'highlight-on');
if (this.runnable) {
this.el.src = this.origsrc;
this.running = false;
}
}
Changer.prototype.preload = function () {
for (var i=1; i<=this.num_ss; i++) {
this.images[i] = new Image();
}
this.load(1);
for (var i=2; i<=this.num_ss; i++) {
setTimeout((function(obj, j) {
return function() { obj.load(j); }
})(this, i), i*100);
}
}
Changer.prototype.load = function (num) {
if (this.running) {
if (this.multiple_thumbnail_url) {
this.images[num].src = this.prepend_url + '/' + num + '.jpg?cb=1';
}
else {
this.images[num].src = this.prepend_url + 'screenshot_multiple/' + this.video_id + '/' + this.video_id + '_multiple_' + num + '_' + this.size + '.jpg';
}
}
}
Changer.prototype.animate = function (num) {
if (this.running) {
if (this.images[num].complete) {
this.el.src = this.images[num].src;
var next = (num == this.num_ss) ? 1 : num + 1;
setTimeout((function(obj, i) {
return function() { obj.animate(i); }
})(this, next), 625);
} else {
setTimeout((function(obj, i) {
return function() { obj.animate(i); }
})(this, num), 25);
}
}
}
return {
register: function (n, prefix) {
if (!prefix) {
prefix = 'thumb';
}
for (var i=1; i<=n; i++) {
yue.onContentReady(prefix + i, this.hookEvents, this);
}
},
hookEvents: function () {
el = this;
if (el.getAttribute('num') == 0) {
var tt = new YAHOO.widget.Tooltip("tt_" + el.id, { context:el, text: "No preview available" });
} else {
var changer = new Changer(el);
yue.addListener(el, 'mouseover', changer.start, changer, true);
yue.addListener(el, 'mouseout', changer.stop, changer, true);
}
}
};
}();
Re: [JavaScript] эффект прокурутки каринок при наведении мышки
Добавлено: 2009-12-29 5:10:04
ADRE
можно еще классами jquery типа меньше кода писать )