Hình dư trong sự kiện hover

Mình có tham khảo đoạn slide ảnh trên mạng. Mình đã thêm sự kiện hover vào ảnh nhưng khi rê chuột vào thì xuất hiện 01 hình dư kèm theo.
Bên cạnh đó mình muốn khi ảnh phóng to thì nó sẽ phóng đều bên trên và bên dưới vị trí nó đứng nhưng không thành công.
Các bạn xem hộ và giúp mình với. Dưới đây là link hình ảnh và code của mình.
địa chỉ hình:
mediafire.com/view/xptz1epvc3zbcgh/hinh_du.JPG

Code Scroll.js
$(function () {
// var left = 10;
// var top = 20;
// $('.chon').each(function () {
//
// $(this).animate({ "left": left + "px" });
// left += 500;
// $(this).animate({ "top": top + "px" });
// top += 500;

// });
$('.chon').hover(function () {
$(this).css({ 'width': '200px', 'height': '200px' })
// ,function () {
// $(this).css({ 'width': '10px', 'height': '10px' })
}, function () {
$(this).css({ 'width': '150px', 'height': '150px' })
})

});
Code trong website:
<html xmlns="w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


<script type="text/javascript" src="Scroll.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var $wrapper = $('#thumbs-wrapper');
var $container = $('#thumbs-container');
// Đếm số img
var $totalimg = $('#thumbs-container img').size();
// Lấy chiều rộng của img
var $imgwidth = $('#thumbs-container img:first-child').outerWidth();
//console.log($imgwidth);
// Đặt chiều rộng cho thumbs-container
var containerwidth = $totalimg * $imgwidth;
$container.width(containerwidth + 'px');

makeScroll($wrapper, $container);

});
//Hàm thực hiện việc scroll
function makeScroll($wrapper, $container) {
//Lấy chiều rộng của wrapper
var divWidth = $wrapper.width();
//Tìm ảnh cuối cùng trong container
var lastIMG = $container.find('img:last-child');
var conWidth = lastIMG[0].offsetLeft + lastIMG.outerWidth();
$wrapper.scrollLeft(0);

//Khi có sự kiện chuyển động chuột ở trong wrapper
$wrapper.unbind('mousemove').bind('mousemove', function (e) {
//Tính toán vị trí bên trái chuột để scroll
var left = (e.pageX - $wrapper.offset().left) * (conWidth - divWidth) / divWidth;
$wrapper.scrollLeft(left);
});
}

</script>
<style type="text/css">
* {margin: 0; padding: 0}
body {background: #000}

.wrap {width: 980px; margin: 200px auto 0;position:relative}
#thumbs-wrapper {background: #000; height: 200px; overflow: hidden; width: 980px;;position:absolute}
#thumbs-container {background: #000; height: 200px; overflow: hidden; width: 980px}
#thumbs-container img {margin: 0; padding: 0; border: none; float: left; padding: 0 1px}
.chon{border:10px solid black; }
.wrap {width: 980px; margin: 200px auto 0}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="wrap">
<div id="thumbs-wrapper">
<div id="thumbs-container">
<img class="chon" src="images/1.jpg" width="150" alt="voiture dans un champ" />
<img class="chon" src="images/2.jpg" width="150" alt="voiture dans un champ" />
<img class="chon" src="images/3.jpg" width="150" alt="voiture dans un champ" />
<img class="chon" src="images/4.jpg" width="150" alt="voiture dans un champ" />
<img class="chon" src="images/5.jpg" width="150" alt="voiture dans un champ" />
<img class="chon" src="images/6.jpg" width="150" alt="voiture dans un champ" />
<img class="chon" src="images/7.jpg" width="150" alt="voiture dans un champ" />
<img class="chon" src="images/8.jpg" width="150" alt="voiture dans un champ" />
<img class="chon" src="images/1.jpg" width="150" alt="voiture dans un champ" />
<img class="chon" src="images/2.jpg" width="150" alt="voiture dans un champ" />
<img class="chon" src="images/3.jpg" width="150" alt="voiture dans un champ" />
<img class="chon" src="images/4.jpg" width="150" alt="voiture dans un champ" />
<img class="chon" src="images/5.jpg" width="150" alt="voiture dans un champ" />
<img class="chon" src="images/6.jpg" width="150" alt="voiture dans un champ" />
<img class="chon" src="images/7.jpg" width="150" alt="voiture dans un champ" />
<img class="chon" src="images/8.jpg" width="150" alt="voiture dans un champ" />
</div>
</div>
</div>
</form>
</body>
</html>
 
  • Chủ đề
    sự kiện hover
  • Top