PDA

View Full Version : تعین اندازه با رزلوشنهای مختلف



DR.HTML
سه شنبه 08 مرداد 1392, 11:31 صبح
سلام دوستان
من یه اسکرول رو ادیت کردم اما مشکلم اینه که سایزش با رزلوشنهای مختلف نمیخونه و میخوام اندازش با همه رزلوشنها یکی باشه میدونم اینکارو میشه با % انجام داد اما متاسفانه هرکاریش ککردم نشد چون اندازه ها توی فایل Css تعریف نشده و توی jquery و متاسفانه به شکلی نوشته شدده به راحتی نمیشه فهمید کدوم قسمت فایله که مربوط به اندازست اگر میشه کمک کنید و بگید کجاست
این فایل js


(function(a){
a.fn.amazon_scroller=function(p){
var p=p||{};

var g=p&&p.scroller_time_interval?p.scroller_time_interval:"3000";
var h=p&&p.scroller_title_show?p.scroller_title_show:"enable";
var i=p&&p.scroller_window_background_color?p.scroller_wind ow_background_color:"white";
var j=p&&p.scroller_window_padding?p.scroller_window_paddin g:"5";
var k=p&&p.scroller_border_size?p.scroller_border_size:"1";
var l=p&&p.scroller_border_color?p.scroller_border_color:"black";
var m=p&&p.scroller_images_width?p.scroller_images_width:"50";
var n=p&&p.scroller_images_height?p.scroller_images_height:"70";
var o=p&&p.scroller_title_size?p.scroller_title_size:"12";
var q=p&&p.scroller_title_color?p.scroller_title_color:"blue";
var r=p&&p.scroller_show_count?p.scroller_show_count:"8";
var d=p&&p.directory?p.directory:"images";
j += "px";
k += "px";
m += "px";
n += "px";
o += "px";
var dom=a(this);
var s;
var t=0;
var u;
var v;
var w=dom.find("ul:first").children("li").length;
var x=Math.ceil(w/r);
if(dom.find("ul").length==0||dom.find("li").length==0){
dom.append("Require content");
return null
}
dom.find("ul:first").children("li").children("a").children("img").css("width",m).css("height",n);
if(h=='enable'){
dom.find("ul:first").children("li").children("a").each(function(){
$(this).append('<br/>'+$(this).attr("title"))
})
}
s_s_ul(dom,j,k,l,i);
s_s_nav(dom.find(".amazon_scroller_nav"),d);
m=parseInt(m);
dom.find("ul:first").children("li").css("width",m+"px");
dom.find("ul:first").children("li").children("a").css("color",q);
dom.find("ul:first").children("li").children("a").css("font-size",o);
begin();
play();
dom.find(".amazon_scroller_nav").children("li").hover(
function(){
if($(this).parent().children().index($(this))==0){
$(this).css("background-position","left -25px");
}else if($(this).parent().children().index($(this))==1){
$(this).css("background-position","right -25px");
}
},
function(){
if($(this).parent().children().index($(this))==0){
$(this).css("background-position","left top");
}else if($(this).parent().children().index($(this))==1){
$(this).css("background-position","right top");
}
}
);
dom.find(".amazon_scroller_nav").children("li").click(function(){
if($(this).parent().children().index($(this))==0){
previous()
}else if($(this).parent().children().index($(this))==1){
next()
}
});
function begin(){
var a=dom.find("ul:first").children("li").outerWidth(true)*w;
dom.find("ul:first").children("li").hide();
dom.find("ul:first").children("li").slice(0,r).show();
u=dom.find("ul:first").outerWidth();
v=dom.find("ul:first").outerHeight();
dom.find("ul:first").width(a);
dom.width(u+60);
dom.height(v);
dom.children(".amazon_scroller_mask").width(u);
dom.children(".amazon_scroller_mask").height(v);
dom.find("ul:first").children("li").show();
dom.css("position","relative");
dom.find("ul:first").css("position","absolute");
dom.children(".amazon_scroller_mask").width(u);
dom.children(".amazon_scroller_mask").height(v);
dom.find(".amazon_scroller_nav").css('top',(v-50)/2+parseInt(j)+"px");
dom.find(".amazon_scroller_nav").width(u+60)
}
function previous(){

play()
}
function next(){
play()
}
function play(){
clearTimeout(s);
dom.find("ul:first").animate({
left:-(t/3*u)
},1000);
t++;
if(t>=x){
t=0
}
s=setTimeout(play,g)
}
function s_s_ul(a,b,c,d,e){
b=parseInt(b);
c=parseInt(c);
var f="border: "+d+" solid "+" "+c+"px; padding:"+b+"px; background-color:"+e;
a.attr("style",f)
}
function s_s_nav(a,d){
var b=a.children("li:first");
var c=a.children("li:last");
a.children("li").css("width","25px");
a.children("li").css("height","50px");
a.children("li").css('background-image','url("'+d+'/arrow.gif")');
c.css('background-position','right top');
a.children("li").css('background-repeat','no-repeat');
c.css('right','0px')
}
}
})(jQuery);

این html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/amazon_scroller.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/amazon_scroller.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">

$(function() {

$("#amazon_scroller2").amazon_scroller({
scroller_title_show: 'disable',
scroller_time_interval: '3000',
scroller_window_background_color: "none",

scroller_border_size: '0',
scroller_border_color: '#CCC',
scroller_images_width: '207',
scroller_images_height: '204',
scroller_title_size: '12',
scroller_title_color: 'black',
scroller_show_count: '3',
directory: 'images'
});

});
</script>

<div id="amazon_scroller2" class="amazon_scroller" >
<div class="amazon_scroller_mask">
<ul>
<li><a href="link1" title="title1"><img src="images/1.png" alt="title"/></a></li>
<li><a href="link1" title="title1"><img src="images/1.png" alt="title"/></a></li>
<li><a href="link1" title="title1"><img src="images/1.png" alt="title"/></a></li>
<li><a href="link1" title="title1"><img src="images/1.png" alt="title"/></a></li>
<li><a href="link1" title="title1"><img src="images/1.png" alt="title"/></a></li>
<li><a href="link1" title="title1"><img src="images/1.png" alt="title"/></a></li>
<li><a href="link1" title="title1"><img src="images/1.png" alt="title"/></a></li>
<li><a href="link1" title="title1"><img src="images/1.png" alt="title"/></a></li>
<li><a href="link1" title="title1"><img src="images/1.png" alt="title"/></a></li>
<li><a href="link1" title="title1"><img src="images/1.png" alt="title"/></a></li>

</ul>
</div>

<div style="clear: both"></div>
</div>

</body>
</html>




اینم Css

.amazon_scroller{
margin: 0px;
}
.amazon_scroller .amazon_scroller_nav{
position: absolute;
}
.amazon_scroller .amazon_scroller_nav li{
cursor: pointer;
position: absolute;
}
.amazon_scroller .amazon_scroller_mask{
position: absolute;

overflow: hidden;
float:right;
}
.amazon_scroller ul{
padding: 0px;
margin: 0px;
overflow:hidden;
float:right;
text-align:center;
}
.amazon_scroller ul li{
padding: 0px;
margin: 0px;
margin-left: 130px;
margin-right: 130px;
list-style: none;
text-align: center;
display:inline;
}
.amazon_scroller ul li a{
text-decoration: none;
}
.amazon_scroller ul li a:hover{
text-decoration: underline;
}
.amazon_scroller ul li a img{
border: none;
}


ممنون میشم جواب بدید

vb8334
چهارشنبه 09 مرداد 1392, 17:40 عصر
سلام

دوست عزیز لطفآ برای قرار دادن کد از jsfiddle استفاده کن

DR.HTML
پنج شنبه 10 مرداد 1392, 17:21 عصر
اگر منظورتون bbcode از همون استفاده کردم

DR.HTML
شنبه 19 مرداد 1392, 20:02 عصر
کسی نبود جواب بده ؟