| |
|
|
| | Есть контейнер в котором показаны 6 фото, по бокам стоят кнопки "вперед", "назад".
Как сделать, чтобы при нажатии на кнопку - картинки плавно смещались на одну позицию, причем эти картинки подгружаются динамически. Без стандартного скролинга.
Если у кого есть код, плавной прокрутки, или вы уже видели это на других сайтах, подскажите пожалуйста. | |
| |
|
|
|
| |
|
|
| |
для: elenaki
(12.02.2007 в 10:03)
| | | По ссылке нечего не работает, просто выводится список превью | |
| |
|
|
| |
|
|
| |
для: школьник
(12.02.2007 в 13:56)
| | | у меня работает, даже в кривом FF. по viewsource что говорит?
<html>
<head>
<title></title>
<!-- HEAD START HERE -->
<style type="text/css">
#divMenu a {color:silver; text-decoration:underline;}
#divMenu a:hover {color:white; text-decoration:underline;}
#divBg {position:absolute; z-index:10; left:5px; right: 5px; width:1090px; height:62px; clip:rect(0px 10px 10px 0px); visibility:hidden;}
#divMenu {position:absolute; z-index:11; left:18px; top:0px; color:#333333; font-size:13px; font-family:verdana,arial,helvetica,sans-serif; visibility:inherit; width: 1090px; height: 58px;}
#divArrowLeft {position:absolute; z-index:12; width:18px; height:60px; left:0px; top:0px; visibility:inherit;}
#divArrowRight {position:absolute; z-index:12; width:18px; height:60px; top:0px; visibility:inherit;}
</style>
<script language="JavaScript" type="text/javascript">
/**********************************************************************************
SideScrollMenu
* Copyright (C) 2001 Thomas Brattli
* This script was released at WOscripts.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()
/**************************************************************************
Variables to set.
***************************************************************************/
sLeft = 0 //The left placement of the menu
sTop = 0 //The top placement of the menu
sMenuheight = 61 //The height of the menu
sArrowwidth = 18 //Width of the arrows
sScrollspeed = 20 //Scroll speed: (in milliseconds, change this one and the next variable to change the speed)
sScrollPx = 8 //Pixels to scroll per timeout.
sScrollExtra = 15 //Extra speed to scroll onmousedown (pixels)
/**************************************************************************
Scrolling functions
***************************************************************************/
var tim = 0
var noScroll = true
function mLeft(){
if (!noScroll && oMenu.x<sArrowwidth){
oMenu.moveBy(sScrollPx,0)
tim = setTimeout("mLeft()",sScrollspeed)
}
}
function mRight(){
if (!noScroll && oMenu.x>-(oMenu.scrollWidth-(pageWidth))-sArrowwidth){
oMenu.moveBy(-sScrollPx,0)
tim = setTimeout("mRight()",sScrollspeed)
}
}
function noMove(){
clearTimeout(tim);
noScroll = true;
sScrollPx = sScrollPxOriginal;
}
/**************************************************************************
Object part
***************************************************************************/
function makeObj(obj,nest,menu){
nest = (!nest) ? "":'document.'+nest+'.';
this.elm = bw.ns4?eval(nest+"document.layers." +obj):bw.ie4?document.all[obj]:document.getElementById(obj);
this.css = bw.ns4?this.elm:this.elm.style;
this.scrollWidth = bw.ns4?this.css.document.width:this.elm.offsetWidth;
this.x = bw.ns4?this.css.left:this.elm.offsetLeft;
this.y = bw.ns4?this.css.top:this.elm.offsetTop;
this.moveBy = b_moveBy;
this.moveIt = b_moveIt;
this.clipTo = b_clipTo;
return this;
}
var px = bw.ns4||window.opera?"":"px";
function b_moveIt(x,y){
if (x!=null){this.x=x; this.css.left=this.x+px;}
if (y!=null){this.y=y; this.css.top=this.y+px;}
}
function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x+px; this.css.top=this.y+px;}
function b_clipTo(t,r,b,l){
if(bw.ns4){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l;}
else this.css.clip="rect("+t+"px "+r+"px "+b+"px "+l+"px)";
}
/**************************************************************************
Object part end
***************************************************************************/
/**************************************************************************
Init function. Set the placements of the objects here.
***************************************************************************/
var sScrollPxOriginal = sScrollPx;
function sideInit(){
//Width of the menu, Currently set to the width of the document.
//If you want the menu to be 500px wide for instance, just
//set the pageWidth=500 in stead.
pageWidth = (bw.ns4 || bw.ns6 || window.opera)?innerWidth:document.body.clientWidth;
//Making the objects...
oBg = new makeObj('divBg')
oMenu = new makeObj('divMenu','divBg',1)
oArrowRight = new makeObj('divArrowRight','divBg')
//Placing the menucontainer, the layer with links, and the right arrow.
oBg.moveIt(sLeft,sTop) //Main div, holds all the other divs.
oMenu.moveIt(sArrowwidth,null)
oArrowRight.css.width = sArrowwidth;
oArrowRight.moveIt(pageWidth-sArrowwidth,null)
//Setting the width and the visible area of the links.
if (!bw.ns4) oBg.css.overflow = "hidden";
if (bw.ns6) oMenu.css.position = "relative";
oBg.css.width = pageWidth+px;
oBg.clipTo(0,pageWidth,sMenuheight,0)
oBg.css.visibility = "visible";
}
//executing the init function on pageload if the browser is ok.
if (bw.bw) onload = sideInit;
</script>
<!-- HEAD END HERE -->
</head>
<body bgcolor="ffffff" text="#000000" link="#999999" topmargin="0" leftmargin="5" marginwidth="5">
<div id="divBg">
<div id=divMenu><nobr>
<a href="pic.php?id=15" target=pic onClick="window.descr.replace('descr.php?id=15');"><img src="photos/s_1.jpg" height=60 border=0></a>
<a href="pic.php?id=16" target=pic onClick="window.descr.replace('descr.php?id=16');"><img src="photos/s_2.jpg" height=60 border=0></a>
<a href="pic.php?id=17" target=pic onClick="window.descr.replace('descr.php?id=17');"><img src="photos/s_3.jpg" height=60 border=0></a>
<a href="pic.php?id=18" target=pic onClick="window.descr.replace('descr.php?id=18');"><img src="photos/s_4.jpg" height=60 border=0></a>
<a href="pic.php?id=19" target=pic onClick="window.descr.replace('descr.php?id=19');"><img src="photos/s_5.jpg" height=60 border=0></a>
<a href="pic.php?id=20" target=pic onClick="window.descr.replace('descr.php?id=20');"><img src="photos/s_6.jpg" height=60 border=0></a>
<a href="pic.php?id=21" target=pic onClick="window.descr.replace('descr.php?id=21');"><img src="photos/s_7.jpg" height=60 border=0></a>
<a href="pic.php?id=22" target=pic onClick="window.descr.replace('descr.php?id=22');"><img src="photos/s_8.jpg" height=60 border=0></a>
<a href="pic.php?id=24" target=pic onClick="window.descr.replace('descr.php?id=24');"><img src="photos/s_10.jpg" height=60 border=0></a>
<a href="pic.php?id=25" target=pic onClick="window.descr.replace('descr.php?id=25');"><img src="photos/s_11.jpg" height=60 border=0></a>
<a href="pic.php?id=26" target=pic onClick="window.descr.replace('descr.php?id=26');"><img src="photos/s_12.jpg" height=60 border=0></a>
<a href="pic.php?id=27" target=pic onClick="window.descr.replace('descr.php?id=27');"><img src="photos/s_13.jpg" height=60 border=0></a>
</nobr></div>
<div id=divArrowLeft><a href=# onmouseover='noScroll=false; mLeft()' onmouseout='noMove()' onclick='sScrollPx-=sScrollExtra; return false' onfocus='if(this.blur)this.blur()' onmousedown='sScrollPx+=sScrollExtra'><img src="images/s_arr_left.gif" width=18 height=60 border=0></a></div>
<div id=divArrowRight><a href=# onmouseover='noScroll=false; mRight()' onmouseout='noMove()' onclick='sScrollPx-=sScrollExtra; return false' onfocus='if(this.blur)this.blur()' onmousedown='sScrollPx+=sScrollExtra'><img src="images/s_arr_right.gif" width=18 height=60 border=0></a></div>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: elenaki
(12.02.2007 в 14:10)
| | | Я понял, у меня просто 1280х1024. Там картинок не хватает на мою прокрутку, сделал экран по меньше, обновил и увидел. Но, у меня немного другая ситуация, я делаю так:
var nav = 1; // Navigation
function mLeft(){
nav--;
for (i = 7; i > 1; i--) {
document.getElementById('tdModelPreview' + i).innerHTML = document.getElementById('tdModelPreview' + (i - 1)).innerHTML;
}
document.getElementById('tdModelPreview' + 1).innerHTML = getFirstImage(nav);
}
function mRight(){
nav++;
for(i = 1; i < 7; i++){
document.getElementById('tdModelPreview' + i).innerHTML = document.getElementById('tdModelPreview' + (i + 1)).innerHTML;
}
document.getElementById('tdModelPreview' + 7).innerHTML = getLastImage(nav);
}
|
где getLastImage(nav); и getFirstImage(nav); возвращают первую и последнюю картинку с помощью (Ajax). При таком раскладе картинки меняются в мгновенно, а мне интересно сделать, чтобы они прокручивались но одну, плавненько -), подскажите как это сделать. | |
| |
|
|
