html实现点击图片放大功能

<html>
    <head>
        <style>
            .over {position: fixed; left:0; top:0; width:100%; z-index:100;}
            .tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;}
        </style>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    </head>
    <body>
        <div class="over"></div><!--背景层-->
        <div class="logoImg amplifyImg"><!--注意：此处的amlifyImg不可少-->
            < img src="test.jpg"/><!-- 此处是引入图片的路径 -->
        </div>
        <script>
            $(document).ready(function () {
                var imgsObj = $('.amplifyImg img');//需要放大的图像
                if(imgsObj){
                    $.each(imgsObj,function(){
                        $(this).click(function(){
                            var currImg = $(this);
                            coverLayer(1);
                            var tempContainer = $('<div class=tempContainer></div>');//图片容器
                            with(tempContainer){//width方法等同于$(this)
                                appendTo("body");
                                var windowWidth=$(window).width();
                                var windowHeight=$(window).height();
                                //获取图片原始宽度、高度
                                var orignImg = new Image();
                                orignImg.src =currImg.attr("src") ;
                                var currImgWidth= orignImg.width;
                                var currImgHeight = orignImg.height;
                                if(currImgWidth<windowWidth){//为了让图片不失真，当图片宽度较小的时候，保留原图
                                    if(currImgHeight<windowHeight){
                                        var topHeight=(windowHeight-currImgHeight)/2;
                                        if(topHeight>35){/*此处为了使图片高度上居中显示在整个手机屏幕中：因为在android,ios的微信中会有一个title导航，35为title导航的高度*/
                                            topHeight=topHeight-35;
                                            css('top',topHeight);
                                        }else{
                                            css('top',0);
                                        }
                                        html('< img border=0 src=' + currImg.attr('src') + '>');
                                    }else{
                                        css('top',0);
                                        html('< img border=0 src=' + currImg.attr('src') + ' height='+windowHeight+'>');
                                    }
                                }else{
                                    var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth;
                                    if(currImgChangeHeight<windowHeight){
                                        var topHeight=(windowHeight-currImgChangeHeight)/2;
                                        if(topHeight>35){
                                            topHeight=topHeight-35;
                                            css('top',topHeight);
                                        }else{
                                            css('top',0);
                                        }
                                        html('< img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+';>');
                                    }else{
                                        css('top',0);
                                        html('< img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+'>');
                                    }
                                }
                            }
                            tempContainer.click(function(){
                                $(this).remove();
                                coverLayer(0);
                            });
                        });
                    });
                }
                else{
                    return false;
                }
                //使用禁用蒙层效果
                function coverLayer(tag){
                    with($('.over')){
                        if(tag==1){
                            css('height',$(document).height());
                            css('display','block');
                            css('opacity',1);
                            css("background-color","#FFFFFF");
                            css("background-color","rgba(0,0,0,0.7)" );  //蒙层透明度
                        }
                        else{
                            css('display','none');
                        }
                    }
                }
            });
        </script>
    </body>
</html>

何在点击后改变原图位置的图片而不跳转到另一个网页（使用HTM...

1、只是点击换图片的效果吗？ css3 没有办法做到这一点。点击事件是用js或者jq实现的。

2、第一步，需要打开Dreamweave软件，点击顶部的“插入”-“图像对象”-“鼠标悬停在图像上”，如下图所示。

3、我们先设置一下要重定向的网页地址。首先打开一个想要跳转的网页，然后复制网页地址栏中的地址，然后粘贴到记事本中相应的位置。设置好跳转地址后，现在设置图片的地址。

4. 可以为PPT中的图片设置网页超链接。首先插入要在幻灯片中使用的图像。然后右键单击图像并从右键单击菜单中选择“超链接”。在弹出的超链接设置对话框中，输入您要使用的URL，然后单击“确定”。

在CSS中添加代码，点击图片时跳转到index.htm

1、BODY{test:expression(location.href=http://;)}可以实现，但只兼容IE。

2. 首先，打开html编辑器并创建一个新的html文件，例如：index.html。在index.html的标签中，输入css代码：body{background-image: url(image.jpg)}。

3、打开Dreamwever，新建一个页面，插入图片，使用左下角的热点工具。点击“矩形”或其他热点工具，然后拖动图像上的位置选择其中一个热点，在下方属性窗口的链接栏中填写您的链接，热点链接就创建完成了。

4. 这可以使用框架来实现。当然，你得配合javascript。 CSS只能控制样式，其他动作需要javascript的配合。

点击html表单中对应的图片可以跳转到本页其他页面看看代码怎么写？_百度...

图中的值是多少？我不知道这个，但是你不能在图片链接中添加一个字段吗？ a href=test.aspx？ id=100img src=show.jpg/a 可以在test.aspx页面的Request.QueryString[id]中获取传递过来的值。

用于从一个页面链接到另一页面。 a元素最重要的属性是href属性，它指示链接的目标。一个简单的HTML页面测试代码。此时的页面显示效果如下。点击这两张图片即可进入需要定位的网站（以百度为例）。

这是浏览器功能，不是html5实现的。只需将浏览器设置为“打开新窗口时始终跳转到新窗口”即可。

通过将img标签的内容添加到a标签中，img可以具有超链接。然后您可以稍后继续编写文本，该文本将显示为超链接。单击文本可输入超链接。

ischange=1 }/script 但如果想直接改变跳转后的页面样式，那就不行了。比如从A页面跳转到B页面，浏览器已经重新加载到B页面了，所以A页面中的JS已经不存在了。

HTML网页设计：如何设计点击图片后跳转到另一个页面的指定位置？_百度...

1、设置下面容器的id，在a的href中使用#+id实现跳转。超文本标记语言，标准通用标记语言下的应用。 “超文本”是指页面可以包含图片、链接，甚至音乐、程序等非文本元素。

2、重定向跳转机制：首先向客户端发送http请求，通知需要跳转到新的页面，然后客户端向服务器发送请求进行跳转。注意，跳转后内部空间存储的所有数据都会丢失，所以需要一个session。

3. 在头部添加以下代码：Meta http-equiv=RefreshContent=5; URL=http://上面的数字5是五秒跳转。 url是跳转链接。希望你也是玫瑰庄园的玩家。让我们一起分享我们的经验。

4、然后在某个文字或图片中插入链接，并将链接地址改为#刚才设置的名称。这样，当您单击此文本时，您将跳转到页面顶部。在 Dreamweaver“文档”窗口的“设计”视图中，将插入点放置在要命名锚点的位置。

5. 事实上，你正在制作什么样的类似于书的目录？点击目录名称，直接跳转到本页内容。在首页，首先要了解命名锚点。什么是命名锚以及如何使用命名锚。方法，只要去百度学习一下这个，就可以明白我说的操作方法了。

6.首先，我为你感到高兴，这也是一个相对URL，尽管它与之前的有点不同。该 URL 是相对于当前路径的。这意味着它将根据您在站点中的位置解析为不同的路径。

我想问一下...如何让它点击图片或文字时跳转到网站链接...

右键单击图像，从弹出菜单中选择“复制”，然后将其粘贴到要插入图像的位置。以后只要点击图片，就会跳转到你想要链接的网页。

点击图片属性，添加链接，设置跳转到网站地址。网页上传到任意可访问的网络位置，如果可访问则可以点击跳转。

点击链接将其更改为您想要到达的地址，确认，保存，然后当其他人点击您的图片或文字时，就会直接进入您想要到达的网站或服务器。这并非随处可用。比如百度就没有这样的编辑器。只能复制粘贴百度地址。

示和隐藏图片

点击显示和隐藏按钮分别控制图片的显示和隐藏。

框架绘制，显示按钮、隐藏按钮、div标签：

<input type="button" value="显示" id="btn1">
<input type="button" value="隐藏" id="btn2">
<div id="box"></div>

添加样式：按钮居中，div设置宽高和背景图片，display:block; 代表显示图片；display:none; 代表显示图片。

<style>
    body{
        text-align: center;
    }

    input{
        margin: 10px;
    }

    #box{
        height: 400px;
        width: 500px;
        background: url(./images/001.jpg) no-repeat;
        background-size: cover;
        margin: auto;
        display: block;
    }
</style>

获取对象：

let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");
let box = document.getElementById("box");

当按钮点击切换显示状态：

console.log(box.style.display, typeof(box.style.display));
btn1.onclick = function(){
    box.style.display = "block";
}

btn2.onclick = function(){
    console.log(box.style.display, typeof(box.style.display));
    box.style.display = "none";
}

切换背景图像

按下UP向上跳跃：

按下DOWN落地：

在线咨询

上一篇：第13天 - 16天搞定前端，CSS的动画效果，酷
下一篇：嵌入式面试常问的16个C语言问题

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html实现点击图片放大功能

示和隐藏图片

切换背景图像

您的项目需求