|
|
|
| Нужен скрипт для плавного увеличения картинок. Т.е. есть более маленькая картинка и при нажатии на неё она плавно становиться больше, при повторном нажатии(но уже на большую картнку) она плавно приходит в исходное состояние(уменьшается).
Очень нужно, кто делал подобное поделитесь пожалуйста. | |
|
|
|
|
|
|
|
для: AxelX
(09.06.2008 в 02:20)
| |
<html>
<head>
</head>
<style>
img{width:100px;}
</style>
<script src="jquery.js"></script>
<script>
function Photo(id,_w,_h){
this.field = $('#'+id);
this.w = _w;
this.h = _h;
this.old_w = 0;
this.old_h = 0;
this.open = false;
this.init();
}
Photo.prototype= {
init : function(){
var oThis = this;
this.field.click(function(){oThis.Resize(this)})
},
Resize : function(sThis){
if(this.open){
$(sThis).animate({width: this.old_w, height: this.old_h},'slow');
this.open = false;
}else{
this.open = true;
this.old_w = $(sThis).width();
this.old_h = $(sThis).height();
$(sThis).animate({width: this.w, height: this.h},'slow');
}
}
}
</script>
<body>
<img src="125.jpg" id="photo" />
</body>
<script>
var pht = new Photo('photo',600,450);
</script>
</html>
|
| |
|
|
|
|
|
|
|
для: ONYX
(09.06.2008 в 03:58)
| | Спасибо! | |
|
|
|
|
|
|
|
для: ONYX
(09.06.2008 в 03:58)
| | подскажите написание jquery.js для указанной формы! | |
|
|
|
|
|
|
|
для: ONYX
(09.06.2008 в 03:58)
| | А как сделать что бы изображение увеличивалось по навидению на изображение? | |
|
|
|
|
|
|
|
для: AxelX
(09.06.2008 в 02:20)
| | Или вот, без всяких jquery.
Подгружаем в страницу js файл:
// Configuration
var speed = 10; // Fewer - quickier
var softness = 20; // Fewer - softer
var title = "Уменьшить изображение"; // Title for closing
document.onclick = remove
function zoom(param1, param2, param3) {
imgOld = param1;
rwidth = param2;
rheight = param3;
img = document.createElement("img");
img.src = imgOld.src;
img.width = imgOld.width;
img.height = imgOld.height;
img.title = title;
img.style.cursor = "pointer";
document.body.appendChild(img);
img.setAttribute("zoomed", "1");
img.style.position = "absolute";
zooming();
}
function zooming() {
var width = img.width;
var height = img.height;
if (img.width < rwidth - softness + 1 || img.height < rheight - softness + 1) {
if (img.width < rwidth - softness + 1) img.width = parseInt(width) + softness;
if (img.height < rheight - softness + 1) img.height = parseInt(height) + softness;
img.style.left = imgOld.offsetLeft + imgOld.offsetWidth / 2 - img.offsetWidth / 2;
img.style.top = imgOld.offsetTop + imgOld.offsetHeight / 2 - img.offsetHeight / 2;
if (parseInt(img.style.left) < 0) img.style.left = 0;
if (parseInt(img.style.top) < 0) img.style.top = 0;
setTimeout(zooming, speed);
} else {
img.width = rwidth;
img.height = rheight;
}
}
function remove(event) {
evt = window.event || event;
target = evt.srcElement || evt.target;
if (target.hasAttribute("zoomed")) {
document.body.removeChild(target)
}
}
|
И в самой странице добавляем:
<img src="1.jpg" width=60 height=40 onclick="zoom(this, 510, 375)">
|
| |
|
|
|
|
|
|
|
для: 3D-GRAF
(01.08.2008 в 02:30)
| | Спасибо, но мне тот больше подходит, хотя нехочется тоскать за собой jquery. | |
|
|
|
|
|
|
|
для: AxelX
(15.08.2008 в 01:45)
| | Вот еще есть хорошенький скриптик, но почему-то отказывается в FF работать. Может кто поправит?
function bigger(img, width, height) {
var j=1;
for (i=0; i<=10; i++) {
var w=(width*(10+i))/20+'px';
var h=(height*(10+i))/20+'px';
var m=(-i)+'px 0 0 '+(-width*i/40)+'px';
f_1(img, w, h, m, i, 20*(i-j));
}
}
function smaller(img, width, height) {
var j=parseInt(img.style.zIndex);
for (i=j-1; i>=0; i--) {
var w=(width*(10+i))/20+'px';
var h=(height*(10+i))/20+'px';
var m=(-i)+'px 0 0 '+(-width*i/40)+'px';
f_1(img, w, h, m, i, 20*(j-i));
}
}
function f_1(img, width, height, margin, zIndex, delay) {
setTimeout(function() {
img.style.width=width;
img.style.height=height;
img.style.margin=margin;
img.style.zIndex=zIndex;
img.parentNode.parentNode.style.zIndex=zIndex;
}, delay);
}
|
| |
|
|
|
|
|
|
|
для: Николай2357
(15.08.2008 в 05:36)
| | подскажите написание jquery.js для указанной формы! | |
|
|
|
|
|
|
|
для: AxelX
(15.08.2008 в 01:45)
| | Вот мой маленький простой скрипт плавного увеличения у меньшения картинки работает в FF3 и в IE
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>
Наведите мышь
<IMG ID="uv1" SRC= "img1.jpg" WIDTH="150" onmouseover="uvelihenie(150)" onmouseout="umen(300)">
<script language="JavaScript">
ssr=300;
ssd=150;
function uvelihenie(Position)
{
if (ssr > Position)
{
step=20;
Position=Position+step;
}
else
{
return;
}
uv1.width=Position;
setTimeout('uvelihenie('+Position+')',1);
}
function umen(Position)
{
if (ssd < Position)
{
step=20;
Position=Position-step;
}
else
{
return;
}
uv1.width=Position;
setTimeout('umen('+Position+')',1);
}
</script>
</BODY>
</HTML>
|
| |
|
|
|