你把滑鼠滑到图片就会产生类似模糊的效果了<!DOCTYPE html>
<html>
<head>
<style>
#container {
    position : relative;
    width    : 240px;
    height   : 240px;
    overflow : hidden;
}
#container img {
    position : relative;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $('img').on('mouseenter', function () {
    
    var $theClone = $(this).clone().css({ opacity : 0.5, position : 'absolute', top : 0 });
    
    $(this).parent().append($theClone);
    
    $theClone.animate({ left : 10 }, 500).on('mouseleave', function () {
        $(this).stop().fadeOut(250, function () {
            $(this).remove();
        });
    });      
});
});
</script>
</head>
<body>
<div id="container">
    <img src="https://googledrive.com/host/0B0B7AkwEayfnM3VLVkNhYUgzR1U/cmn_header_logo.png" />
</div>
</body>
</html>
而如果要产生透明的效果 可以加上 opacity 属性 就有这种效果
如果要产生不间断移动的话 可以使用 setTimeout 下去制作
不过这整个写完是在网页上很浩效能的 建议用gif 做吧~