鼠标移到缩略图上会显示该图的大图,并且大图跟随鼠标移动;或是移动到提示文字上,也可以显示图片。并且含有方向判别功能,具体来说就是如果缩略图在页面的左半部分,则大图显示在鼠标的右侧,如果缩略图在页面的右半部分,则预览的大图在鼠标的左侧显示。


思路分析

html结构


<a href="xx.jpg">缩略图</a>

当鼠标覆盖到<a></a>时获取预览图地址 

预览图结构

<p id='preview'><p>

<img src='"+$(this).attr('href')+"' />

<p>"+$(this).attr('title')+"</p></p></p>

添加到body,使用绝对定位 

- 插件开发 

因为想试下插件开发的模式,所以这样写了


$.fn.preview=function(){

    ......

}

jQuery.fn = jQuery.prototype.对prototype 

每一个jq对象都可以用

源码

<style>.imgbox{    margin-top: 150px;    text-align: center;}.imgbox img {    display: inline-block;    width: 250px;    height: 144px;}</style><script>

    $(function(){

        $("a.preview").preview();   //页面加载完后执行

    });</script><body>

    <p class="page">

        <p class="imgbox">

            <a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple"><img src="./img/cool_couple_dark.jpg" alt="cool couple"></a>

            <a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple"><img src="./img/cool_couple_dark.jpg" alt="cool couple"></a>

            <a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple"><img src="./img/cool_couple_dark.jpg" alt="cool couple"></a>

            <a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple"><img src="./img/cool_couple_dark.jpg" alt="cool couple"></a>

            <a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple">查看</a>

        </p>

    </p></body>


jquery-imgpreview.js

(function($){

    $.fn.preview=function () {

        $(this).each(function () {

            var xOffset = 10;

            var yOffset = 20;

            var screenW =$(window).width();

            $(this).hover(function (e) {

                var imgsrc= $(this).attr("href")

                if(/.png$|.gif$|.jpg$|.bmp$/.test(imgsrc)){

                    $('body').append("<p id='preview'><p><img src='"+imgsrc+"' /><p>"+$(this).attr('title')+"</p></p></p>");

                    $('#preview').css({

                        width:'325px',

                        position:'absolute',

                        left:e.pageX+xOffset+'px',

                        top:e.pageY+yOffset+'px',

                        backgroundColor:"#eeeeee",

                        padding:"4px",

                        border:"1px solid #f3f3f3",

                        zIndex:1000

                    }),

                    $('#preview > p > img').css({

                        width:'100%',

                        height:'100%'

                    })

                }

            },function () {

                $('#preview').remove();

            }).mousemove(function(e){

                $("#preview").css("top",e.pageY+ "px")

                if(e.pageX < screenW/2){

                    $("#preview").css("left",(e.pageX + xOffset) + "px").css("right","auto");

                }else{

                    $("#preview").css("right",(screenW - e.pageX + xOffset) + "px").css("left","auto");

                }

            });

        })

    }})(jQuery)

TAG: jQuery

如果你觉得本文还不错,记得分享哦^-^^-^

相关内容:


精彩推荐

上网导航

热门点击

你可能喜欢




渝ICP备15000999-1号

重庆共享汽车使用网    reg博客    小十博客    草根赚钱创业    Deng's Blog    王杭个人博客    逐梦博客    李洁博客    破晓博客    雨巷博客    起点终点    lisa小站    网讯it资讯    互联网运营