图片放大镜特效

单图

css部分：

<style>
    #div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; }
    #div1 .small_pic { width: 200px; height: 200px; background: #eee; position: relative;}
    #div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
    #div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;}
    #div1 .big_pic { position: absolute; top: -1px; left: 215px; width:300px; height:300px; overflow:hidden; border:2px solid #CCC; display:none; }
    #div1 .big_pic img { position:absolute; top: -30px; left: -80px; }

</style>

html部分：

<div id="div1">
    <div class="small_pic" style=" width: 200px; height: 200px;">
        <span class="mark"></span>
        <span class="float_layer"></span>
        <img src="../../../img/gotop.png"/>
    </div>
    <div class="big_pic" style="width:300px; height:300px;">
        <img src="../../../img/gotop.png"/>
    </div>
</div>

js部分：（此处需要引入jquery.js）

<script>

    function getByClass(oParent,sClass){
        var aBle=oParent.getElementsByTagName(‘*‘);
        var aTmp=[];
        var i=0;
        for(i=0;i<aBle.length;i++){
            if(aBle[i].className==sClass){
                aTmp.push(aBle[i])
            }
        }
        return aTmp;
    }

    window.onload=function(){
        var oDiv=document.getElementById(‘div1‘);
        var oMark=getByClass(oDiv,‘mark‘)[0];
        var oFloat=getByClass(oDiv,‘float_layer‘)[0];
        var oBig=getByClass(oDiv,‘big_pic‘)[0];
        var oSmall=getByClass(oDiv,‘small_pic‘)[0];
        var oImg=oBig.getElementsByTagName(‘img‘)[0];
        oMark.onmouseover=function(){
            oFloat.style.display=‘block‘;
            oBig.style.display=‘block‘;
        }
        oMark.onmouseout=function(){
            oFloat.style.display=‘none‘;
            oBig.style.display=‘none‘;

        }
        oMark.onmousemove=function(ev){
            var oEvent=ev||event;
            var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
            var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;
            if(l<1){
                l=1;
            }else if(l>oMark.offsetWidth-oFloat.offsetWidth){
                l=oMark.offsetWidth-oFloat.offsetWidth;
            }
            if(t<1){
                t=1;
            }else if(t>oMark.offsetHeight-oFloat.offsetHeight){
                t=oMark.offsetHeight-oFloat.offsetHeight;
            }
            oFloat.style.left=l+‘px‘;
            oFloat.style.top=t+‘px‘;
            var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth);
            var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight);
            oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+‘px‘;
            oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+‘px‘;

        }
    }
</script>

多图

css部分：

<style type="text/css">
    /* reset */
    ul,ol,li,dl{list-style-type:none;}
    em,i,dfn,cite,strong,small{font-style:normal;}
    img{border:0;}
    fieldset,button,input,select,option{vertical-align:middle;font:12px/18px "宋体",arial,sans-serif;}
    table{border-collapse:collapse;border-spacing:0}
    textarea{resize:none}

    /* color */
    a:link,a:visited{color:#575757;text-decoration:none;}
    a:hover{color:#ef4165;text-decoration:none;}
    a:active{color:#1d7400;}

    /* clearfix */
    .clearfix:after{ visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
    *html .clearfix{ zoom:1;}

    .preview{width:400px; height:465px; margin:50px 0px 0px 150px;}
    /* smallImg */
    .smallImg{position:relative; height:52px; margin-top:1px; background-color:#F1F0F0; padding:6px 5px; width:390px; overflow:hidden;float:left;}
    .scrollbutton{width:14px; height:50px; overflow:hidden; position:relative; float:left; cursor:pointer; }
    .scrollbutton.smallImgUp , .scrollbutton.smallImgUp.disabled{background:url(img/1.jpg) no-repeat;}
    .scrollbutton.smallImgDown , .scrollbutton.smallImgDown.disabled{background:url(img/2.jpg) no-repeat; margin-left:375px; margin-top:-50px;}

    #imageMenu {height:50px; width:360px; overflow:hidden; margin-left:0; float:left;}
    #imageMenu li {height:50px; width:60px; overflow:hidden; float:left; text-align:center;}
    #imageMenu li img{width:50px; height:50px;cursor:pointer;}
    #imageMenu li#onlickImg img, #imageMenu li:hover img{ width:44px; height:44px; border:3px solid #959595;}
    /* bigImg */
    .bigImg{position:relative; float:left; width:400px; height:400px; overflow:hidden;}
    .bigImg #midimg{width:400px; height:400px;}
    .bigImg #winSelector{width:235px; height:210px;}
    #winSelector{position:absolute; cursor:crosshair; filter:alpha(opacity=15); -moz-opacity:0.15; opacity:0.15; background-color:#000; border:1px solid #fff;}
    /* bigView */
    #bigView{position:absolute;border: 1px solid #959595; overflow: hidden; z-index:999;}
    #bigView img{position:absolute;}
</style>

html部分：

<div class="preview">

    <div id="vertical" class="bigImg">
        <img src="mid/05.jpg" width="400" height="400" alt="" id="midimg">
        <div style="display: none;" id="winSelector"></div>
    </div><!--bigImg end-->

    <div class="smallImg">
        <div class="scrollbutton smallImgUp disabled"></div>
        <div id="imageMenu">
            <ul>
                <li id="onlickImg"><img src="../../../../img/1.jpg" width="68" height="68" alt="洋妞"></li>
                <li><img src="../../../../img/2.jpg" width="68" height="68" alt="洋妞"></li>
                <li><img src="../../../../img/3.jpg" width="68" height="68" alt="洋妞"></li>
                <li><img src="../../../../img/1.jpg" width="68" height="68" alt="洋妞"></li>
                <li><img src="../../../../img/2.jpg" width="68" height="68" alt="洋妞"></li>
                <li><img src="../../../../img/3.jpg" width="68" height="68" alt="洋妞"></li>
                <li><img src="../../../../img/1.jpg" width="68" height="68" alt="洋妞"></li>
            </ul>
        </div>
        <div class="scrollbutton smallImgDown"></div>
    </div><!--smallImg end-->

    <div id="bigView" style="display:none;"><img width="800" height="800" alt="" src="../../../../img/1.jpg"></div>

</div>

js部分：（此处需要引入jquery.js）

<script type="text/javascript">
    $(document).ready(function(){
        // 图片上下滚动
        var count = $("#imageMenu li").length - 5; /* 显示 6 个 li标签内容 */
        var interval = $("#imageMenu li:first").width();
        var curIndex = 0;

        $(‘.scrollbutton‘).click(function(){
            if( $(this).hasClass(‘disabled‘) ) return false;

            if ($(this).hasClass(‘smallImgUp‘)) --curIndex;
            else ++curIndex;

            $(‘.scrollbutton‘).removeClass(‘disabled‘);
            if (curIndex == 0) $(‘.smallImgUp‘).addClass(‘disabled‘);
            if (curIndex == count-1) $(‘.smallImgDown‘).addClass(‘disabled‘);

            $("#imageMenu ul").stop(false, true).animate({"marginLeft" : -curIndex*interval + "px"}, 600);
        });

        // 解决 ie6 select框 问题
        $.fn.decorateIframe = function(options) {
            if ($.browser.msie && $.browser.version < 7) {
                var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
                $(this).each(function() {
                    var $myThis = $(this);
                    //创建一个IFRAME
                    var divIframe = $("<iframe />");
                    divIframe.attr("id", opts.iframeId);
                    divIframe.css("position", "absolute");
                    divIframe.css("display", "none");
                    divIframe.css("display", "block");
                    divIframe.css("z-index", opts.iframeZIndex);
                    divIframe.css("border");
                    divIframe.css("top", "0");
                    divIframe.css("left", "0");
                    if (opts.width == 0) {
                        divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 + "px");
                    }
                    if (opts.height == 0) {
                        divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) * 2 + "px");
                    }
                    divIframe.css("filter", "mask(color=#fff)");
                    $myThis.append(divIframe);
                });
            }
        }
        $.fn.decorateIframe.defaults = {
            iframeId: "decorateIframe1",
            iframeZIndex: -1,
            width: 0,
            height: 0
        }
        //放大镜视窗
        $("#bigView").decorateIframe();

        //点击到中图
        var midChangeHandler = null;

        $("#imageMenu li img").bind("click", function(){
            if ($(this).attr("id") != "onlickImg") {
                midChange($(this).attr("src").replace("small", "mid"));
                $("#imageMenu li").removeAttr("id");
                $(this).parent().attr("id", "onlickImg");
            }
        }).bind("mouseover", function(){
            if ($(this).attr("id") != "onlickImg") {
                window.clearTimeout(midChangeHandler);
                midChange($(this).attr("src").replace("small", "mid"));
                $(this).css({ "border": "3px solid #959595" });
            }
        }).bind("mouseout", function(){
            if($(this).attr("id") != "onlickImg"){
                $(this).removeAttr("style");
                midChangeHandler = window.setTimeout(function(){
                    midChange($("#onlickImg img").attr("src").replace("small", "mid"));
                }, 1000);
            }
        });

        function midChange(src) {
            $("#midimg").attr("src", src).load(function() {
                changeViewImg();
            });
        }

        //大视窗看图
        function mouseover(e) {
            if ($("#winSelector").css("display") == "none") {
                $("#winSelector,#bigView").show();
            }

            $("#winSelector").css(fixedPosition(e));
            e.stopPropagation();
        }

        function mouseOut(e) {
            if ($("#winSelector").css("display") != "none") {
                $("#winSelector,#bigView").hide();
            }
            e.stopPropagation();
        }

        $("#midimg").mouseover(mouseover); //中图事件
        $("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //选择器事件

        var $divWidth = $("#winSelector").width(); //选择器宽度
        var $divHeight = $("#winSelector").height(); //选择器高度
        var $imgWidth = $("#midimg").width(); //中图宽度
        var $imgHeight = $("#midimg").height(); //中图高度
        var $viewImgWidth = $viewImgHeight = $height = null; //IE加载后才能得到 大图宽度 大图高度 大图视窗高度

        function changeViewImg() {
            $("#bigView img").attr("src", $("#midimg").attr("src").replace("mid", "big"));
        }

        changeViewImg();

        $("#bigView").scrollLeft(0).scrollTop(0);
        function fixedPosition(e) {
            if (e == null) {
                return;
            }
            var $imgLeft = $("#midimg").offset().left; //中图左边距
            var $imgTop = $("#midimg").offset().top; //中图上边距
            X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
            Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
            X = X < 0 ? 0 : X;
            Y = Y < 0 ? 0 : Y;
            X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;
            Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;

            if ($viewImgWidth == null) {
                $viewImgWidth = $("#bigView img").outerWidth();
                $viewImgHeight = $("#bigView img").height();
                if ($viewImgWidth < 200 || $viewImgHeight < 200) {
                    $viewImgWidth = $viewImgHeight = 800;
                }
                $height = $divHeight * $viewImgHeight / $imgHeight;
                $("#bigView").width($divWidth * $viewImgWidth / $imgWidth);
                $("#bigView").height($height);
            }

            var scrollX = X * $viewImgWidth / $imgWidth;
            var scrollY = Y * $viewImgHeight / $imgHeight;
            $("#bigView img").css({ "left": scrollX * -1, "top": scrollY * -1 });
            $("#bigView").css({ "top": 75, "left": $(".preview").offset().left + $(".preview").width() + 15 });

            return { left: X, top: Y };
        }

    });
</script>
时间： 2024-10-11 15:18:43

图片放大镜特效的相关文章

商品图片放大镜特效

商品图片放大镜特效 主要是基于鼠标捕获,计算放大镜移动距离原理而制成 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>放大镜</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0 10 } 11 12 #demo { 13 display: block; 14 wid

Js图片放大镜特效源代码下载

Js图片放大镜特效源代码下载,通过面向对象实现 原文:Js图片放大镜特效源代码下载 源代码下载:http://www.zuidaima.com/share/1550463333878784.htm

jQuery轻量级简单实用的图片放大镜特效

zoomtoo是一款轻量级的简单实用的jQuery图片放大镜特效插件.这个图片放大镜特效在鼠标滑过图片的时候,在原来图片区域内部将图片放大.鼠标进入和离开图片区域时都带有淡入淡出的效果. 浏览器兼容: Firefox 2+ (Win, Mac, Linux) IE7+ (Win) Chrome 6+ (Win, Mac, Linux, Android, iPhone) Safari 3.2+ (Win, Mac, iPhone) Opera 8+ (Win, Mac, Linux, Androi

15款商城网站常用的图片放大镜特效

jquery图片放大镜效果制作变焦镜头图片放大查看代码 jQuery图片放大镜插件鼠标悬停图片放大镜头显示代码 jQuery鼠标滑过图片放大镜效果_淘宝图片放大镜代码 jquery jqzoom仿京东商城商品详细页面图片放大镜_选项卡切换效果 原生js MagicZoom.js放大镜插件商城商品多图片放大镜效果展示 jquery.imagezoom图片放大镜插件仿淘宝店铺商品放大镜展示 jquery etalage图片放大镜插件鼠标移到小图片放大预览图片 jQuery图片放大窗口显示和图片组合缩

单张图片放大镜特效

点击一个图片,然后出现遮罩层,放大的图片,点击遮罩层回到原图 <div class="sort-t"> <img src="@item.UserInfo.DriverLicenseImage" width="100" height="70"> </div> <div class="imgPosition"></div> <div class=

jQuery和CSS3打造逼真的图片放大镜效果

这是一款效果非常逼真的jQuery和CSS3超逼真的图片放大镜特效.该图片放大镜特效使用CSS3的box-shadow和border-radius实现来制作放大镜的样式,使用jQuery来获取当前鼠标的坐标系,并修改当前坐标系的背景图像. 在线演示: 下载地址:http://www.htmleaf.com/jQuery/Image-Effects/201503171533.html

JQuery插件-放大镜特效

一.HTML代码: <div class="demo"> <div id="box"> <div id="small-box"> <div id="float-box"></div> <img src="../images/bimg_big.jpg"/> </div> <div id="big-box&quo

js放大镜特效

原理分析:当鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置.(同时,当鼠标在小图片上移动时,右侧大图片往相反的方向移动.) 放大镜特效设计: ①页面元素:小图片,大图片以及盛放图片的容器 ②事件捕获:onmouseover(当鼠标指针移动到指定对象上时发生).onmouseout(当鼠标指针移除指定对象时发生).onmousemove(当鼠标指针移动时发生) ③技术难点:offsetLeft(相对于父元素的左位移).offsetTop (相对于父元素的顶部位移) 注:o

JS 放大镜特效

放大镜特效 放大镜在商城网站经常会看到,作为前端,写这么一个肯定是小case,本人就献丑了.如果没有一点思路的同学,可以先学DOM事件里的事件位置.距离.宽高各种方法属性. 那么直接上代码,代码里各种注释相当完备: 栗子代码链接 <!doctype html> <title>放大镜</title> <meta charset="utf-8"> <style> *{ margin:0; padding:0; list-style