JS | jquery img hover
Khi di chuột vào đối tượng thì một đối tượng khác sẽ xuất hiện bên cạnh con trỏ.
Với CSS giải quyết vấn đề này chỉ cần 2 dòng css.
.thao{position: relative;}
.thao .layer1{display: none; position: absolute;}
.thao:hover .layer1{display: block;z-index:1; padding:10px;left: 5px; top:5px;width:755px; opacity: 1;background:#E4F1F1;box-shadow:5px 5px 20px 2px #999999;}
DEMO di chuột vào đây nào!
bạn viết tất cả những html,css,javascript mà bạn muốn vào đây ...
Cụ thể với trường hợp phóng to ảnh củng chỉ cần 2 dòng css
.zoom-img img{width: 55px; height: 55px; border:0;margin: 10px; -webkit-transition:-webkit-transform 0.3s ease-in; -o-transition:-o-transform 0.3s ease-in; }
.zoom-img img:hover{-moz-transform:scale(2.5); -webkit-transform:scale(2.5);-o-transform:scale(2.5);}
Với js có vẻ khá cồng kềnh nhưng dù sao cũng cóp thể có bạn cần với thư viện jquery.
Lang thang qua các trang mạng nước ngoài chợt thấy có hiệu ứng hiện ảnh, view source chắp vá code lại được một đoạn, chia sẽ lại cho các bạn tham khảo
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.js'></script>
<script>
jQuery(document).ready(function() {
var $thumb = jQuery('a.themeitem');
$thumb.mouseover(function(e) {
jQuery("body").append("<img class='gallery-hover' src='"+jQuery(this).attr("rel")+"' alt='' />");
jQuery("img.gallery-hover").css({display:"none", visibility:"visible"}).fadeIn(350);
}).mousemove(function(e) {
jQuery("img.gallery-hover").css({left:e.pageX+20, top:e.pageY-10});
}).mouseout(function() {
jQuery("img.gallery-hover").remove();
});
});
</script>
<a class="themeitem" rel="https://lh5.googleusercontent.com/-Ext6sWxNkCs/Ud5u6T59uHI/AAAAAAAAAow/VH4JIOStJEE/s500/Japan_Digital_Landscape__03.jpg" href="#" > di chuột vào đây xem !</a>
<style>
.gallery-hover { z-index: 99; position: absolute; background: #f1f1f1; padding: 8px; -webkit-border-radius: 8px; -webkit-box-shadow: 3px 3px 7px #ccc; -moz-border-radius: 8px; -moz-box-shadow: 3px 3px 7px #ccc; border: none; visibility: hidden; }
</style>
di chuột vào đây xem demo jquery img hover !
tttj
sưu tầm jquery từ internet
Code Sưu tầm *.js từ 20h21 ngày 13/02/2004 :
