Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Tạo hiệu ứng rê chuột phóng to hình ảnh trong Blogspot với jQuery

Chủ đề thuộc danh mục 'Hướng dẫn/Thủ thuật Blogspot tại đây' được đăng bởi Người Chia Sẻ, 11/11/14.

Lượt xem: 4,940

  1. Người Chia Sẻ Share to be shared!

    Hiệu ứng phóng to ảnh khá bắt mắt,sử dụng jquery, rất phù hợp cho các bộ sưu tập ảnh. Bạn có thể chèn nó vào Blog qua tiện íchHTML/javascript một cách rất dễ dàng.Để chèn trực tiếp vào mã nguồn cũng chỉ cần 5 bước đơn giản sau:

    YepQZG1.jpg
    Hiệu ứng chuyển động rất đẹp và chuyên nghiệp, bạn có thể áp dụng và thấy được điều bất ngờ nhé!

    Bước 1. Đăng nhập Blogger --> Chỉnh sửa mẫu --> HTML
    Bước 2. Tìm đến ]]></b:-skin> rồi chèn đoạn CSS sau lên trước nó.
    Code:
    /* 
    	
    Blogger Zoom Gallery  */
    ul.thumb {
    float: left;
    list-style: none;
    margin: 0; padding: 10px;
    width: 360px;
    }
    ul.thumb li {
    margin: 0; padding: 5px;
    float: left;
    position: relative;  /* Set the absolute positioning base coordinate */
    width: 110px;
    height: 110px;
    }
    ul.thumb li img {
    width: 100px; height: 100px; /* Set the small thumbnail size */
    -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
    border: 1px solid #ddd;
    padding: 5px;
    background: #f0f0f0;
    position: absolute;
    left: 0; top: 0;
    }
    ul.thumb li img.hover {
    background:url(https://4.bp.
    	
    blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center;  /* Image used as background on hover effect
    border: none; /* Get rid of border on hover */
    }
    Thay đổi các giá trị cho phù hợp với Blog của bạn:

    Bước 3. Tìm đến dòng </head> rồi chèn đoạn script sau lên trước nó:

    Code:
    <script src='http://code.
    	
    jquery.com/jquery-latest.js'
    type='text/javascript'/>
    <script type='text/javascript'>
    $(document).ready(function(){
    
    //Larger thumbnail preview
    
    $(&quot;ul.thumb li&quot;).hover(function() {
    $(this).css({&#39;z-index&#39; : &#39;10&#39;});
    $(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
    .animate({
    marginTop: &#39;-110px&#39;,
    marginLeft: &#39;-110px&#39;,
    top: &#39;50%&#39;,
    left: &#39;50%&#39;,
    width: &#39;174px&#39;,
    height: &#39;174px&#39;,
    padding: &#39;20px&#39;
    }, 200);
    
    } , function() {
    $(this).css({&#39;z-index&#39; : &#39;0&#39;});
    $(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
    .animate({
    marginTop: &#39;0&#39;,
    marginLeft: &#39;0&#39;,
    top: &#39;0&#39;,
    left: &#39;0&#39;,
    width: &#39;100px&#39;,
    height: &#39;100px&#39;,
    padding: &#39;5px&#39;
    }, 400);
    });
    
    //Swap Image on Click
    $(&quot;ul.thumb li a&quot;).click(function() {
    
    var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
    $(&quot;#main_view img&quot;).attr({ src: mainImage });
    return false;
    });
    
    });
    </script>
    Bước 4. Lưu mẫu lại.
    Bước 5. Tìm vị trí Bạn muốn đặt những bức ảnh của mình rồi chèn vào đó đoạn mã HTML sau:
    HTML:
    <ul class="thumb">
    <li><a href="#"><img src="picture Link" alt="" /></a></li>
    <li><a href="#"><img src="picture Link" alt="" /></a></li>
    <li><a href="#"><img src="picture Link" alt="" /></a></li>
    <li><a href="#"><img src="picture Link" alt="" /></a></li>
    </ul>
    Thay thế # với liên kết của bạn.
    Thay thế picture Link với link hình ảnh bạn muốn hiển thị với hiệu ứng trên.

    Tác giả: Văn Khương

    quangnguyen111 thích bài viết này

Ủng hộ diễn đàn