ورود

View Full Version : سوال: راهنمایی


mohammad2232
چهارشنبه 12 فروردین 1394, 19:55 عصر
سلام دوستان عزیز
من میخواستم از شما راهنمایی بگیرم چطور میتونم کدی داشته باشم که وقتی موس روی یک عکس میره اون عکس کنار بیاد و یک نوشته (نه عکس نوشته که توی گوگل هم ایندکس بشه) رو نمایش بده و با کلیک به سایتی بره ولی وقتی موس رو بر میداریم دوباره همون عکس بشه ؟
خیلی ممنونم
<?php?>
پنج شنبه 13 فروردین 1394, 08:23 صبح
سلام . 13 بدرتون بخیر .
ببینید این به کارتون میاد ::



<!doctype html>
<html lang="fa">
<head>
<title>مثال</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="index,follow">
<meta name="copyright" content="">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
*{
direction:rtl;
padding:0;
margin:0;
}
body{
background-color:#f7f7f7;
}
#main{
margin-right:500px;
margin-top:100px;

}
.img{
transition-property: margin-top;
transition-duration: 2s;
transition-delay: 0.5s;
margin-top:-50px;
margin-left:15px;

}
.text-background{
height:50px;
width:400px;
background-color:#ffffff;

}
.text{
padding-right:5px;
font-size:15pt;
color:#929292;
text-decoration:none;
}
</style>
</head>
<body>
<div id="main">
<div class="text-background"><a class="text" href="">سلام من یک عنوان پست هستم</a></div>
<img class="img" alt="عکس" src="http://upload7.ir/uploads//3387371684dc20fdbf4d0862de2aa4cef3f27d4c.jpg">

<!-- jquery -->
<script>
$(document).ready(function(){
$("img").hover(function(){
$(".img").css("margin-top", "0px");
});
});

</script>
<!-- -->
</div>
</body>
</html>

موفق باشید
mohammad2232
پنج شنبه 13 فروردین 1394, 09:20 صبح
ممنون از شما
ولی مشکلی که هست اینه که وقتی موس روی عکس میره مزلب را نمایش میده ولی وقتی موس کنار میره عکس دوباره به حالت اول قرار نمیگیره ؟
2-امکانه اینکه کدی باشه که توی صفحات لمسی مثل موبایل هم کار کند وجود دارد؟
3-میشه متن کنار عکس باز شود (سمت راست یا چپ)؟
باز هم ممنون ، سیزده شما هم خوش بگذره :)
<?php?>
جمعه 14 فروردین 1394, 17:10 عصر
<!doctype html>
<html lang="fa">
<head>
<title>مثال</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="index,follow">
<meta name="copyright" content="">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
*{
direction:rtl;
padding:0;
margin:0;
}
body{
background-color:#f7f7f7;
}
a{
text-decoration:none;
color:white;
}
.img{

position:absolute;
right:500px;
top:100px;
}
.text-box{
transition-property: margin-right;
transition-duration: 2s;
transition-delay: 0.5s;
position:absolute;
background-color:#289b3b;
height:300px;
width:100px;
right:500px;
top:100px;
}
.text{
font-size:16px;

}
</style>
</head>
<body>
<div class="text-box"><span class="text"><a href="">سلام من یک پست مهمان هستم</a></span></div>
<img class="img" alt="عکس" src="http://upload7.ir/uploads//3387371684dc20fdbf4d0862de2aa4cef3f27d4c.jpg">
<!-- -->
<script>
$(document).ready(function(){
$(".img").hover(function(){
$(".text-box").css("margin-right", "-100px");},
function(){$(".text-box").css("margin-right", "100px");
});
});
</script>
<!-- -->
</body>
</html>


اینم تغییراتی که گفته بودید .
خب برای دیوایس های موبایل فکر کنم باید Hover با لمستون اجرا بشه . اگرم نشد باید از خاصیت @media screen در css استفاده بکنید و برای دیوایس ها با صفحه نمایش های گوناگون تنظیمش کنید .

اینم چنتا منابع برای یادگیری بیشتر ::

http://weblogina.com/article/css-transitions/
http://css3.bradshawenterprises.com/transitions/
http://www.w3schools.com/jquery/event_hover.asp

موفق باشید
mohammad2232
جمعه 14 فروردین 1394, 19:06 عصر
با تشکر از شما
لطفا این کد رو ببینید مشکلش چیه تا میخوام روی متن کلیک کنم میر و همینطور اینطرف اونطرف میره




<!doctype html>
<html lang="fa">
<head>
<title>مثال</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="index,follow">
<meta name="copyright" content="">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
*{
direction:rtl;
padding:0;
margin:0;
}
body{
background-color:#f7f7f7;
}
a{
text-decoration:none;
color:white;
}
.img{

position:absolute;
right:500px;
top:100px;
}
.text-box{
transition-property: margin-right;
transition-duration: 2s;
transition-delay: 0.5s;
position:absolute;
height:300px;
width:100px;
right:500px;
top:100px;
}
.text{
font-size:16px;

}
</style>
</head>
<body>
<div class="text-box"><span class="text" style="color: #000000;"><a href="http://barnamenevis.org"><span style="color: #000000;">تست</span></a></span></div>
<img class="img" alt="عکس" src="http://upload7.ir/uploads//b5d4e9c420e567f19d98d561aa7a3f1f9bb562c5.png">
<!-- -->
<script>
$(document).ready(function(){
$(".img").hover(function(){
$(".text-box").css("margin-right", "-100px");},
function(){$(".text-box").css("margin-right", "100px");
});
});
</script>
<!-- -->
</body>
</html>
<?php?>
جمعه 14 فروردین 1394, 23:11 عصر
برای همین کد اول رو براتون دادم . ولی شما گفتید که میخواید عکس برگشت کنه . معمولا این کارو با جاوا اسکریپت و کتابخانه معروفش جی کوئری انجام میدن .
mohammad2232
جمعه 14 فروردین 1394, 23:55 عصر
بله ، حقیقتا من آشمایی چندانی ندارم به همین دلیل این تاپیک رو ایجاد کردم
من میخوام 3 تا لوگو (البته الآن فقط یکی هست) در کنار هم داشته باشم توی قسمت فوتر سایتم و وقتی موس روی هر کدام از لوگو ها که میره از سمت راست اون متنی که میخوام به همراه لینک اون نمایش داده بشه و بشه روش کلیک کرد و باز که موس دور شد مثل اول فقط سه لوگو باشند در اصل مطلب با بردن موس پدیدار بشه و در عین حال اون مطلب در گوگل ایندکس بشه نمیدونم میتونم منظورم رو بگم یانه ؟
میشه در این مورد منو راهنمایی کنید پله پله از کجا شروع کنم ؟ اگر با جاوا اسکریپ هست آموزش فارسی و کاملی وجود دارد؟ چون در حال حاضر قصد یادگیری php رو دارم و قصد دارم بسته فیلم آموزشیhttp://packages.ncis.ir/php رو که یکی از دوستان گفتند بهترنی هست رو تهیه کنم حالا لطفا راهنمایی کامل بفرمایید
با تشکر فراوان
<?php?>
شنبه 15 فروردین 1394, 21:49 عصر
بخشید دیر پاسخ دادم . راستش من تا همین اندازه فعلا با jquery آشنایی دارم . از دوستان اگر کسی اشنایی کامل داره لطفا به دوستمون پاسخ بدید . تشکر .
موفق باشید .
khanlo.javid
سه شنبه 18 فروردین 1394, 15:26 عصر
با سلام

دوست عزیز اگه یه سرچ بزنید تو نت از این نوع اسکریپت ها فراوون یافت میشه ، این یه سایت بزرگه اسکریپته تو همین بخش بگردید ایشالا بتونید چیزی که میخواییدو پیدا کنید.


http://www.htmldrive.net/categorys/show/4/Image-Effects



موفق باشید.
Mandana Ms
پنج شنبه 20 فروردین 1394, 14:31 عصر
سلام اینکارو هم میشه با سی اس اس انجام داد هم جی کوئری ، چون شما گفتید آشنایی با جی کوئری ندارید من به جای جی کوئری یه کد سرعتی با سی اس اس براتون زدم احتمالا به دردتون بخوره توجه داشته باشید عددهایی که دادم فقط برای این طراحی بوده شما روش رو یاد بگیرید کافیه. اون وقت هرجور دلتون بخواد طراحی میکنید و عددهارو عوض میکنید.
کد html:



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Index</title>
<link rel="stylesheet" href="">
<style type="text/css">
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.l-footer
{
width:100%;
height:auto;
background-color:#ddd;
}
.l-footer *
{
display:inline-block;
vertical-align: middle;
}
.l-footer .icons
{
float:right;
}
.l-footer .icons li
{
margin: 0 10px;
position:relative;
width:92px;
height:92px;
cursor:pointer;
}
.l-footer .icons li:hover .overlay
{
transform: translateX(-94px);
-webkit-transform:translateX(-94px);
-moz-transform:translateX(-94px);
-o-transform:translateX(-94px);
-ms-transform:translateX(-94px);
}
.l-footer .icons li:hover .text
{
opacity:1;
}
.l-footer .icons li .text
{
position:absolute;
top:0;
width:100%;
height:100%;
background-color:#000;
color:#fff;
line-height:1.3;
text-align:center;
opacity:0;
-moz-transition: cubic-bezier(0.61, 0.2, 0.45, 1) 0.8s;
-o-transition: cubic-bezier(0.61, 0.2, 0.45, 1) 0.8s;
-webkit-transition: cubic-bezier(0.61, 0.2, 0.45, 1) 0.8s;
transition: cubic-bezier(0.61, 0.2, 0.45, 1) 0.8s;
}
.l-footer .icons li .text a
{
color:#fff;
text-decoration:none;
font-size:1.5em;
}
.l-footer .icons li .overlay
{
position:absolute;
top:0;
width:100%;
height:100%;
background-color:#fff;
transform: translateX(0px);
-webkit-transform:translateX(0px);
-moz-transform:translateX(0px);
-o-transform:translateX(0px);
-ms-transform:translateX(0px);
-moz-transition: cubic-bezier(0.61, 0.2, 0.45, 1) 0.8s;
-o-transition: cubic-bezier(0.61, 0.2, 0.45, 1) 0.8s;
-webkit-transition: cubic-bezier(0.61, 0.2, 0.45, 1) 0.8s;
transition: cubic-bezier(0.61, 0.2, 0.45, 1) 0.8s;
}
.l-footer .icons li .overlay img
{
max-width:100%;
height:auto;
display:block;
margin:22px auto;
}
</style>
</head>
<body>
<footer class="l-footer clearfix">
<p class="copyright">This is Copyright</p>
<ul class="icons">
<li>
<span class="text"><a href="#">this is a sample text</a></span>
<div class="overlay">
<img src="http://upload7.ir/uploads//b5d4e9c420e567f19d98d561aa7a3f1f9bb562c5.png" alt="" class="logo-icons">
</div>
</li>
<li>
<span class="text"><a href="#">this is a sample text</a></span>
<div class="overlay">
<img src="http://upload7.ir/uploads//b5d4e9c420e567f19d98d561aa7a3f1f9bb562c5.png" alt="" class="logo-icons">
</div>
</li>
<li>
<span class="text"><a href="#">this is a sample text</a></span>
<div class="overlay">
<img src="http://upload7.ir/uploads//b5d4e9c420e567f19d98d561aa7a3f1f9bb562c5.png" alt="" class="logo-icons">
</div>
</li>
</ul>
</footer>
</body>
</html>
Mandana Ms
پنج شنبه 20 فروردین 1394, 14:33 عصر
اگر هم نتونستید از کد استفاده کنید حتما تو نت یه سرچ بزنید
این مورد هم بد نیست ولی هرچقدر خودتون بتونید کد رو بنویسید بهتر از استفاده از پلاگینه:
http://buildinternet.com/project/mosaic/