hrs192
چهارشنبه 13 شهریور 1392, 03:10 صبح
سلام دوستان
اینم چیزی که مدت ها طراح ها منتظرش بودن
http://modernizr.com/
توضیحات موثری در خود سایت هست
ولی خودم که یه آماتورم نتونستم استفاده کنم هنوز ..
نمیدونم کجا باید با چه کدی فایل modernizr را استفاده کنم ..
<!doctype html>
<html>
<header>
<style type="text/css">.highlight { background: #FFFF40; }</style>
<script type="text/javascript" src="highlight.js"></script>
</header>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 15">
<meta name=Originator content="Microsoft Word 15">
<link rel=File-List href="kefaie1_files/filelist.xml">
<link rel=Preview href="kefaie1_files/preview.wmf">
<title>کفایه المسائل جلد اول - المقدمه</title>
<script language="javascript">
function zoom()
{
document.body.style.zoom = "1.6";
}
function dezoom()
{
document.body.style.zoom = "1";
}
</script>
<script src="data/jquery-latest.js"></script>
<script>
$(document).ready(function(){
i_link=0;
function mhmkLinks(){
$('.mhmk-tabz a:eq('+i_link+')').stop().animate({right:'-10px'},100).animate({right:'-50px'},100).animate({right:'30px'},100);
i_link=i_link+1;
if (i_link!=$('.mhmk-tabz a').length+1){
setTimeout(mhmkLinks,100);
}
}
mhmkLinks();
$('.mhmk-tabz a').hover(function(){
$(this).animate({right:'-10px'},100).animate({right:'-80%'},100).animate({right:'-70%'},100).animate({right:'-50%'},100);
},function(){
$(this).animate({right:'-40px'},100).animate({right:'30px'},100);
});
});
</script>
<style>
.mhmk-tabz{
position:fixed;
right:100%;
direction:ltr;
z-index:9999999999999999;
}
.mhmk-tabz a{
text-align:right;
background-position:right center;
border:1px #ccc solid;
border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-khtml-border-radius:5px;
position:relative;
padding:10px;
margin:10px;
padding-right:20px;
background-color:rgba(200,200,200,0.5);
text-decoration:none;
background-position:140px center;
background-repeat:no-repeat;
background-size:32px 32px;
color:#333;
display:block;
direction:rtl;
font:11px tahoma;
padding-right:50px;
width:100%;
}
</style>
</head>
<body lang=EN-US style='tab-interval:36.0pt'>
<body background="data/a.jpg" bgproperties="fixed">
<div class="mhmk-tabz">
<a href="home.html"
style="background-image:url(data/home.png)">صفحه اصلی</a>
<a href="search.html"
style="background-image:url(data/search.png);">جستجو</a>
<a onclick="zoom()"
style="background-image:url(data/big.png);">پزرگ نمایی</a>
<a onclick="dezoom()"
style="background-image:url(data/tin.png);">کوچک کردن</a>
</div>
<div class=WordSection1>
test
</div>
<script type="text/javascript">highlight();</script>
</body>
</html>
اینم چیزی که مدت ها طراح ها منتظرش بودن
http://modernizr.com/
توضیحات موثری در خود سایت هست
ولی خودم که یه آماتورم نتونستم استفاده کنم هنوز ..
نمیدونم کجا باید با چه کدی فایل modernizr را استفاده کنم ..
<!doctype html>
<html>
<header>
<style type="text/css">.highlight { background: #FFFF40; }</style>
<script type="text/javascript" src="highlight.js"></script>
</header>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 15">
<meta name=Originator content="Microsoft Word 15">
<link rel=File-List href="kefaie1_files/filelist.xml">
<link rel=Preview href="kefaie1_files/preview.wmf">
<title>کفایه المسائل جلد اول - المقدمه</title>
<script language="javascript">
function zoom()
{
document.body.style.zoom = "1.6";
}
function dezoom()
{
document.body.style.zoom = "1";
}
</script>
<script src="data/jquery-latest.js"></script>
<script>
$(document).ready(function(){
i_link=0;
function mhmkLinks(){
$('.mhmk-tabz a:eq('+i_link+')').stop().animate({right:'-10px'},100).animate({right:'-50px'},100).animate({right:'30px'},100);
i_link=i_link+1;
if (i_link!=$('.mhmk-tabz a').length+1){
setTimeout(mhmkLinks,100);
}
}
mhmkLinks();
$('.mhmk-tabz a').hover(function(){
$(this).animate({right:'-10px'},100).animate({right:'-80%'},100).animate({right:'-70%'},100).animate({right:'-50%'},100);
},function(){
$(this).animate({right:'-40px'},100).animate({right:'30px'},100);
});
});
</script>
<style>
.mhmk-tabz{
position:fixed;
right:100%;
direction:ltr;
z-index:9999999999999999;
}
.mhmk-tabz a{
text-align:right;
background-position:right center;
border:1px #ccc solid;
border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-khtml-border-radius:5px;
position:relative;
padding:10px;
margin:10px;
padding-right:20px;
background-color:rgba(200,200,200,0.5);
text-decoration:none;
background-position:140px center;
background-repeat:no-repeat;
background-size:32px 32px;
color:#333;
display:block;
direction:rtl;
font:11px tahoma;
padding-right:50px;
width:100%;
}
</style>
</head>
<body lang=EN-US style='tab-interval:36.0pt'>
<body background="data/a.jpg" bgproperties="fixed">
<div class="mhmk-tabz">
<a href="home.html"
style="background-image:url(data/home.png)">صفحه اصلی</a>
<a href="search.html"
style="background-image:url(data/search.png);">جستجو</a>
<a onclick="zoom()"
style="background-image:url(data/big.png);">پزرگ نمایی</a>
<a onclick="dezoom()"
style="background-image:url(data/tin.png);">کوچک کردن</a>
</div>
<div class=WordSection1>
test
</div>
<script type="text/javascript">highlight();</script>
</body>
</html>