ظاهر شدن متن بر روی عکس با رفتن موس روی آن

در این پست از یک لرن با عنوان ظاهر شدن متن بر روی عکس با رفتن موس روی آن شما میتوانید کدی واقعا جالب را دریافت کنید که با این کد شما میتوانید روی عکس های خود توضیحات مربوطه را بنویسید بسیار کاربردی برای وبمسترهایی که برای تصاویر خود توضیحاتی را میخواهند ارائه کنند .

پیش نمایش
 

کد زیر را بدون کوچیک ترین تغییر قبل از </head>در ویرایش قالب خود قرار دهید .
<script type="text/javascript"src="http://dl.1learn.ir/admin/1learn/1learn.js"></script>
<link href='http://www.font-api.ir/css/B Yekan={font-api.ir}.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://dl.1learn.ir/admin/posts/contentoverly/jquery.min_2.js"></script>
 
<script type="text/javascript">
jQuery.noConflict();
 
jQuery.extend(jQuery.easing, {easeOutExpo:function (x, t, b, c, d) { 
        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
    }
});
 
(function($){
  $.fn.overlaycontent=function(options) {  
    var setting={id:'', dir:'up', speed:200, opacity:1}
    return this.each(function(){
      $.extend(setting, options, (this.getAttribute('data-overlayid'))? {id:this.getAttribute('data-overlayid')} : {})
            var $target=$(this).css({position:'relative', overflow:'hidden'})
            var $overlay=$('#'+(setting.id)) 
            var startpoint={}
            if (setting.dir=="up" || setting.dir=="down"){
                startpoint={top:$target.outerHeight()* (setting.dir=="down"? -1 : 1)}
            }
            else{
                startpoint={left:$target.outerWidth()* (setting.dir=="right"? -1 : 1)}
            }
            var overlaydimenions={w:$target.outerWidth()-($overlay.outerWidth()-$overlay.width()), h:$target.outerHeight()-($overlay.outerHeight()-$overlay.height())}
            $overlay.css($.extend({position:'absolute', zIndex:'1000', width:overlaydimenions.w, height:overlaydimenions.h, left:0, top:0, visibility:'visible'}, startpoint)).appendTo($target)
            if (setting.opacity<1)
                $overlay.css({opacity:setting.opacity})
            $target.hover(
                function(){
                    $overlay.dequeue().animate((setting.dir=="up" || setting.dir=="down")? {top:0} : {left:0}, setting.speed, 'easeOutExpo')
                },
                function(){
                    $overlay.dequeue().animate(startpoint, setting.speed)
                }
            ) 
      })
  }
})(jQuery);
</script>
 
<script>
jQuery(function($){ 
    $('#info').overlaycontent({ 
        speed:500,
        dir:'up'
    })
 
    $('div.imagecontainers').overlaycontent({ 
        speed:300,
        dir:'right',
        opacity:0.8 
    })
})
</script>
 
<style type="text/css">
div#img-info{
background:white;
padding:40px;
}
</style>
سپس این کد را در محل مورد نظر خود (پست ها و …) بریزید و به نکات زیر دقت کنید
1- آدرس تصویر مورد نظر خود را در خط سوم یه جای آدرس عکس فعلی قرار دهید
2- ابعاد تصویر خود را در خط دوم وارد کنید این کار ضروری است ابتدا مقدار width را پیدا کنید و عدد مقابل آن را پاک کرده و طول تصویر خود را بنویسید و سپس در همان خط height را پیدا کرده و عدد مقابل ان را پاک کرده و سپس ارتفاع با عرض تصویر خود را وارد کنید .
3- در خط هفتم توضیحات خود را بنویسید
<!-- 1learn.ir -->
<div class="imagecontainers" data-overlayid="img-info" style="display:block-inline;width:500px;height:357px">
<img src="http://dl.1learn.ir/admin/posts/contentoverly/chalk.jpg">
</div>
 
<div id="img-info" dir="rtl" style="font-family: B Yekan,'B Yekan',tahoma;">
توضیحات این تصویر
</div>
<!-- 1learn.ir -->

فرادرس

برچسب ها : ، ، ، ، ، ،