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();

http://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>

Nhấn để mở rộng...