مشاعر احساسى غريب Admin
البلد : شلونك اليوم : mms : الجنس : عدد المساهمات : 779
| موضوع: كود بوابة زرقاء + مثال 25/8/2012, 03:13 | |
| السلام عليكم اقدم لكم اليوم مثال حي على البوابة http://www.loverfog.net/كودالبوابة المحتوى مخفى ضع رد اولا - الكود:
-
<!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"> <meta name="keywords" content=":شبكة ابداع نت:,مشاعر,صادقة,منتديات,جبال,الحشر,مدونة,lover,fog,desgin,tools,art,تصميم,وفوتوشوب,سويش,ماكس"> <meta name="description" content="هنا سيكون ,, للإبتسامة تعبير || آخر || ,, ::"> <title>ملتقى الابداع والتميز </title> <link rel="shortcut icon" href="http://www.loverfog.net/favicon.ico"> <script type="text/javascript" src="http://www.loverfog.net/jquery.js"></script> <style type="text/css">img {border: 0;} .container { width: 790px; padding: 0; margin: 0 auto; } .folio_block { position: absolute; left: 50%; top: 50%; margin: -140px 0 0 -395px; }
/*--Main Container--*/ .main_view { float: left; position: relative; } /*--Window/Masking Styles--*/ .window { height:250px; width: 600px; overflow: hidden; position: relative; } .image_reel { position: absolute; top: 0; left: 0; } .image_reel img {float: left;}
/*--Paging Styles--*/ .paging { position: absolute; bottom: 40px; right: -7px; width: 178px; height:47px; z-index: 100; /*--Assures the paging stays on the top layer--*/ text-align: center; line-height: 40px; background: url(http://i47.servimg.com/u/f47/15/47/68/39/417.png) no-repeat; display: none; /*--Hidden by default, will be later shown with jQuery--*/ } .paging a { padding: 5px; text-decoration: none; color: #fff; } .paging a.active { font-weight: bold; background: #920000; border: 1px solid #610000; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; } .paging a:hover {font-weight: bold;} </style> </head><body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" background="http://i47.servimg.com/u/f47/15/47/68/39/415.png" marginheight="0" marginwidth="0"> <div style="position: absolute; width: 100px; height: 100px; z-index: 5; left: -648px; top: -106px;" id="layer3">
<img src="http://i47.servimg.com/u/f47/15/47/68/39/422.png" width="411" border="0" height="46"></div><div style="z-index: 10; position: absolute; top: 194px; left: -10px;" id="s"> <script language="JavaScript">
<!--
var itv = 50;
var step = 10;
var start = 0;
var end = 0;
var currentOpac;
//change the opacity for different browsers
function changeOpac(obj, opacity) {
var object = obj.style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
function BeginOpacity(obj, s, e)
{
start = s;
end = e;
currentOpac = s;
theobject=obj;
changing=setInterval("opacityit(theobject)",itv);
}
function EndOpacity(obj, end){
clearInterval(changing);
changeOpac(obj, end);
}
function opacityit(obj){
if(start > end) {
if (currentOpac>end){
currentOpac = currentOpac - step;
changeOpac(obj,currentOpac);
}
else if (window.highlighting)
clearInterval(highlighting);
} else if(start < end) {
if (currentOpac<end){
currentOpac = currentOpac + step;
changeOpac(obj,currentOpac);
}
else if (window.changing)
clearInterval(changing);
}
}
//-->
</script> <a href="http://www.ebda3net.com/forum"> <img style="opacity: 0.4;" onmouseover="BeginOpacity(this,40,100)" onmouseout="EndOpacity(this,40)" src="http://i47.servimg.com/u/f47/15/47/68/39/210.gif" longdesc="منتديات ابداع نت" alt="منتديات " border="0"></a> </div><div style="z-index: 12; position: absolute; top: 346px; left: -10px;" id="vb"> <script language="JavaScript">
<!--
var itv = 50;
var step = 10;
var start = 0;
var end = 0;
var currentOpac;
//change the opacity for different browsers
function changeOpac(obj, opacity) {
var object = obj.style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
function BeginOpacity(obj, s, e)
{
start = s;
end = e;
currentOpac = s;
theobject=obj;
changing=setInterval("opacityit(theobject)",itv);
}
function EndOpacity(obj, end){
clearInterval(changing);
changeOpac(obj, end);
}
function opacityit(obj){
if(start > end) {
if (currentOpac>end){
currentOpac = currentOpac - step;
changeOpac(obj,currentOpac);
}
else if (window.highlighting)
clearInterval(highlighting);
} else if(start < end) {
if (currentOpac<end){
currentOpac = currentOpac + step;
changeOpac(obj,currentOpac);
}
else if (window.changing)
clearInterval(changing);
}
}
//-->
</script> <a href="http://www.ibhathar.com/up/"> <img style="opacity: 0.4;" onmouseover="BeginOpacity(this,40,100)" onmouseout="EndOpacity(this,40)" src="http://i47.servimg.com/u/f47/15/47/68/39/212.gif" longdesc="مركز الرفع الخاص بالأعضاء" alt="مركز الرفع الخاص بالأعضاء" border="0"></a>
</div><div style="z-index: 11; position: absolute; top: 270px; left: -10px;" id="s0"> <script language="JavaScript">
<!--
var itv = 50;
var step = 10;
var start = 0;
var end = 0;
var currentOpac;
//change the opacity for different browsers
function changeOpac(obj, opacity) {
var object = obj.style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
function BeginOpacity(obj, s, e)
{
start = s;
end = e;
currentOpac = s;
theobject=obj;
changing=setInterval("opacityit(theobject)",itv);
}
function EndOpacity(obj, end){
clearInterval(changing);
changeOpac(obj, end);
}
function opacityit(obj){
if(start > end) {
if (currentOpac>end){
currentOpac = currentOpac - step;
changeOpac(obj,currentOpac);
}
else if (window.highlighting)
clearInterval(highlighting);
} else if(start < end) {
if (currentOpac<end){
currentOpac = currentOpac + step;
changeOpac(obj,currentOpac);
}
else if (window.changing)
clearInterval(changing);
}
}
//-->
</script> <a href="http://www.ebda3net.com/"> <img style="opacity: 0.4;" onmouseover="BeginOpacity(this,40,100)" onmouseout="EndOpacity(this,40)" src="http://i47.servimg.com/u/f47/15/47/68/39/211.gif" longdesc="قريباً" alt="عالمي هنا" border="0"></a> </div><div style="position: absolute; width: 52px; height: 100px; z-index: 104; left: 930px; top: 175px;" id="layer6"> <img src="http://i47.servimg.com/u/f47/15/47/68/39/416.png" width="51" border="0" height="250"></div><div align="center"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <td valign="top" width="246" align="left"><map name="FPMap0">
<area href="http://www.mozilla.com/ar/" shape="rect" coords="83, 11, 112, 36"> <area href="http://www.google.com/chrome?hl=ar" shape="rect" coords="8, 9, 36, 37"> <area href="http://www.opera.com/" shape="rect" coords="45, 8, 73, 41"> </map> <img src="http://i47.servimg.com/u/f47/15/47/68/39/413.png" usemap="#FPMap0" width="246" border="0" height="379"></td> <td> <div style="position: absolute; width: 100px; height: 100px; z-index: 105; left: 200px; top: 20px;" id="layer7"> <img src="رابط صورة منتداك" width="241" border="0" height="155"></div> </td>
<td valign="top" width="608" align="right"><map name="FPMap1"> <area href="http://pushme.to/" shape="rect" coords="434, 5, 472, 42"> <area href="http://www.facebook.com/" shape="rect" coords="379, 5, 418, 44"> <area href="https://twitter.com/" shape="circle" coords="319, 59, 41"> </map> <img src="http://i47.servimg.com/u/f47/15/47/68/39/414.png" usemap="#FPMap1" width="608" border="0" height="379"></td> </tr> <tr> <td width="246"> </td>
<td> </td> <td width="608"><!--****************************--> <!--loverfog - ����� ��� �������--> <!--****************************-->
<!-- �������� jquery ����� ��� --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script> $(document).ready(function() { $(".paging").show(); $(".paging a:first").addClass("active"); var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; $(".image_reel").css({'width' : imageReelWidth}); rotate = function(){ var triggerID = $active.attr("rel") - 1; var image_reelPosition = triggerID * imageWidth; $(".paging a").removeClass('active'); $active.addClass('active'); $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; rotateSwitch = function(){ play = setInterval(function(){ $active = $('.paging a.active').next(); if ( $active.length === 0) { $active = $('.paging a:first'); } rotate(); }, 4000); //��� ���� ����� ��� ������� �������� 4 ����� }; rotateSwitch();
$(".image_reel a").hover(function() { clearInterval(play); }, function() { rotateSwitch(); }); $(".paging a").click(function() { $active = $(this); clearInterval(play); rotate(); rotateSwitch(); return false; }); }); </script>
<!-- �������� jquery ����� ��� --> <!-- �������� style ����� ����� --> <style type="text/css"> *{outline: none;} img {border: 0;} .container { width: 790px; padding: 0; margin: 0 auto; } .folio_block { position: absolute; left: 50%; top: 50%; margin: -140px 0 0 -395px; } .main_view { float: left; position: relative; } .window { /*--������� ���� �����--*/ height:250px; width: 600px; /*--����� ������� ���� �����--*/ overflow: hidden; position: relative; } .image_reel { position: absolute; top: 0; left: 0; } .image_reel img {float: left;} .paging { position: absolute; bottom: 40px; right: -7px; width: 178px; height:47px; z-index: 100; text-align: center; line-height: 40px; background: url(http://i47.servimg.com/u/f47/15/47/68/39/bg10.png) no-repeat; display: none; } .paging a { padding: 5px; text-decoration: none; color: #fff; } .paging a.active { font-weight: bold; background: #920000; border: 1px solid #610000; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; } .paging a:hover {font-weight: bold;} </style>
<!-- �������� style ����� ��� -->
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<!--����� ����� ����� -->
<div style="position: absolute; width: 221px; height: 100px; z-index: 103; left: 304px; top: 184px" id="a" align="center"> <div class="main_view"> <div class="window"> <div class="image_reel" style="position: absolute; left: 1px; top: 31px; height:966px" id="c"> <a href="http://www.ebda3net.com/">
<img src="http://www.computernewsme.com/wp-content/uploads/2011/09/Coming-soon.gif" alt="" width="600" height="221" /></a> <a href="http://www.ebda3net.com/">
<img src="http://www.computernewsme.com/wp-content/uploads/2011/09/Coming-soon.gif" alt="" width="600" height="221" /></a> <a href="http://www.ebda3net.com/"> <img src="http://www.computernewsme.com/wp-content/uploads/2011/09/Coming-soon.gif" alt="" width="600" height="221" /></a> <a href="http://www.ebda3net.com/"> <img src="http://www.computernewsme.com/wp-content/uploads/2011/09/Coming-soon.gif" alt="" width="600" height="221" /></a> </div> </div>
<div class="paging" style="position: absolute; left: 422px; bottom: 204px" id="b"> <a href="#" rel="1">1</a> <a href="#" rel="2">2</a>
<a href="#" rel="3">3</a> <a href="#" rel="4">4</a> </div> </div> </div>
<!--����� ��� ����� �����--> <!--****************************--> <!--loverfog - ����� ��� �������--> <!--****************************--> </td> </tr> <tr> <td valign="bottom" width="246" align="left"> هنا height="126"></td> <td> </td> <td width="608"> </td>
</tr> </tbody></table> </div> <script> $(document).ready(function() { //Show the paging and activate its first link $(".paging").show(); $(".paging a:first").addClass("active");
//Get size of the image, how many images there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //Paging and Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 );
};
//Rotation and Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds $active = $('.paging a.active').next(); //Move to the next paging if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //go back to first } rotate(); //Trigger the paging and slider function }, 4000); //Timer speed in milliseconds (7 seconds) };
rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation timer });
//On Click $(".paging a").click(function() { $active = $(this); //Activate the clicked paging //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation timer return false; //Prevent browser jump to link anchor }); }); </script>
</body></html> <a href="http://www.ahlamontada.com" target="_blank"></a>
|
|
شبح المنتديات عضو مشارك
من اين عرفت المنتدى : جوجل البلد : شلونك اليوم : mms : الجنس : عدد المساهمات : 128
| موضوع: رد: كود بوابة زرقاء + مثال 26/8/2012, 14:38 | |
| |
|