放大镜代码及效果图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>放大镜</title>
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="js/jQuery.enlarge.min.js"></script>
        <style>

            img{
                border:none;
                float: left;
            }
            #demo{
                margin: 100px auto;
            }
        </style>
    </head>
    <body>

        <script>
        $(function(){
            $("#demo").enlarge({ 

        // 鼠标遮罩层样式
                shadecolor: "#FFD24D",
                shadeborder: "#FF8000",
                shadeopacity: 0.4,
                cursor: "move",

        // 大图外层样式
                layerwidth: 480,
                layerheight: 360,
                layerborder: "#DDD",
                fade: true,

        // 大图尺寸
                largewidth: 960,
                largeheight: 720
            });
        });

        </script> 

        <a href="IMG/fdj1-2.jpg" id="demo" style="position: relative;float: left;">
            <img src="IMG/fdj1-2.jpg" width="240" height="180">
            <img src="IMG/fdj1-2.jpg" width="960" height="720" style="display: none;">
        </a>
    </body>
</html>

时间: 2025-01-05 18:34:56

放大镜代码及效果图的相关文章

基于jQuery仿淘宝产品图片放大镜代码

今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="box"> <div class="tb-booth tb-pic tb-s310"> <a href=&q

电商网站jQuery放大镜代码

分享一款电商网站jQuery放大镜代码.这是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用.效果图如下: 在线预览   源码下载 实现的代码. html代码: <center> <h1> Basic Zoom Example</h1> <img id="zoom_01" src='images/small/image1.png' data-zoom-ima

Android拍照+方形剪裁——附代码与效果图

本文链接    http://blog.csdn.net/xiaodongrush/article/details/29173567 参考链接    http://stackoverflow.com/questions/12758425/how-to-set-the-output-image-use-com-android-camera-action-crop 1. 缘起 要开发一个头像上传的模块,头像上传过程分两步.第一步,相机拍照或者从图库选取照片,产生一个照片,第二步,提供头像剪裁,一般是

task 1:完成省城市的三级联动(包括湖南省),附代码和效果图。

<!DOCTYPE html> <html> <head> <title>完成省城市的三级联动(包括湖南省),附代码和效果图.</title> </head> <body> <select id="province"> <option value="-1">请选择</option> </select> <select id=&qu

目标检测之显著区域检测---国外的一个图像显著区域检测代码及其效果图 saliency region detection

先看几张效果图吧 效果图: 可以直接测试的代码: 头文件: // Saliency.h: interface for the Saliency class.//////////////////////////////////////////////////////////////////////////===========================================================================// Copyright (c) 2009 R

简易的js原生放大镜代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">    #obj{ float: left; width: 200px; height: 200px; position:relat

Django内置过滤器详解附代码附效果图--附全部内置过滤器帮助文档

前言 基本环境 Django版本:1.11.8 Python版本:3.6 OS: win10 x64 本文摘要 提供了常用的Django内置过滤器的详细介绍,包括过滤器的功能.语法.代码和效果示例. 本文完整项目文件代码下载地址:完整示例 Django完整内置过滤器帮助文档:Django内置过滤器完整版 参考文献:Django 中文文档 1.8 内置过滤器 注意:所有带参数的过滤器,在使用时,冒号:和参数中间不能有空格. add加 功能: 把add后的参数num加给value: 数字相加会进行算

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

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

基于jQuery仿搜狐辩论投票动画代码

基于jQuery仿搜狐辩论投票动画代码.这是一款个性的卡通小人正方反方辩论投票特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <script type="text/javascript"> $(document).ready(function () { var a = 500; var b = 130; $("#white").animate({ width: 0, left: "250px" }, 10