点击图片放大的效果可以使用jQuery的插件来实现，我的jQuery也是刚刚开始学习，如果下面答案有出现错误的话，希望题主或者接下来的答主纠正！
比较简单的一款是：imgbox 这款插件很小，才6kb，而且参数设置简单，我很是喜欢。
这款插件我登陆了它的官网，发现网站已经不存在了，所以在百度上搜索了一些例子：

imgbox Dome Page

html部分的一小撮代码讲解：

<a id="example1-3" title="Maecenas eros massa, pulvinar et sagittis adipiscing, &lt;br /&gt; molestie et arcu" href="http://farm3.static.flickr.com/2642/4003912116_389c3891cf.jpg"><img alt="" src="http://farm3.static.flickr.com/2642/4003912116_389c3891cf_m.jpg" /></a>

其中主要要注意的是代码仲 href 后面接的是放大后的图片，src后接的是缩小时的图片。

使用主要是在页头把jQuery插件导入，该例子的主要参数如下代码：

    <script type="text/javascript">
        $(document).ready(function() {
            $("#example1-1").imgbox();

            $("#example1-2").imgbox({
                'zoomOpacity'    : true,
                'alignment'        : 'center'
            });

            $("#example1-3").imgbox({
                'speedIn'        : 0,
                'speedOut'        : 0,
            });

            $("#example2-1, #example2-2").imgbox({
                'speedIn'        : 0,
                'speedOut'        : 0,
                'alignment'        : 'center',
                'overlayShow'    : true,
                'allowMultiple'    : false
            });
        });
    </script>

其中最主要的是
speedIn 动画小变大的时间间隔，以毫秒为单位
speedOut 动画大变小的时间间隔，以毫秒为单位
alignment 动画变大后所处的位置

更多类似的优秀插件：
fancybox
lighterbox

写好一个放大图的容器,css设置position:fixed,全屏大小,display:none
中间放大图img,右上角放X

<p id="fullscreen-container">
    <p class="fullscreen-close" onclick="closePreview()"></p>
    <!--下面放大图-->
    <img id="fullscreen-img" class="fullscreen-img" src="">
</p>

<!--这里是小图们-->
<img src="img1.jpg" width="100" height="100" onclick="openPreview(this.src)">
<img src="img2.jpg" width="100" height="100" onclick="openPreview(this.src)">
<img src="img3.jpg" width="100" height="100" onclick="openPreview(this.src)">
<img src="img4.jpg" width="100" height="100" onclick="openPreview(this.src)">

js

function openPreview(url){
    document.getElementbyId('fullscreen-img').src = url;
    document.getElementbyId('fullscreen-container').style.display = "block";
}
function closePreview(){
    document.getElementbyId('fullscreen-container').style.display = "none";
}

至于鼠标的放大镜效果,可以在小图的css上加 cursor: zoom-in,鼠标移过去就会变成放大镜

全屏容器和大图的css大概是:(尺寸具体自己定)

.fullscreen-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}
.fullscreen-img{
    position: absolute;
    width: 1200px;
    height: 600px;
    top: 50%;
    left: 50%;
    margin-left: -600px;
    margin-top: -300px;
}