图像缩放 - OnmouseOver和mouseOut -Gridview [英] Image Zooming - OnmouseOver and mouseOut -Gridview

问题描述

<script type="text/javascript">
        window.onkeypress = keypress;
        function keypress(e) {
            if (e.keyCode == 27) {
                HideDiv();
           }
        }
    </script>
    <script type="text/javascript">

        function LoadDiv(url) {

            var img = new Image();

            var bcgDiv = document.getElementById("divBackground");

            var imgDiv = document.getElementById("divImage");

            var imgFull = document.getElementById("imgFull");

            var imgLoader = document.getElementById("imgLoader");

            imgLoader.style.display = "block";

            img.onload = function () {

                imgFull.src = img.src;

                imgFull.style.display = "block";

                imgLoader.style.display = "none";

            };

            img.src = url;

            var width = document.body.clientWidth;

            if (document.body.clientHeight > document.body.scrollHeight) {

                bcgDiv.style.height = document.body.clientHeight + "px";

            }

            else {

                bcgDiv.style.height = document.body.scrollHeight + "px";

            }



            imgDiv.style.left = (width - 650) / 2 + "px";

            imgDiv.style.top = "20px";

            bcgDiv.style.width = "100%";



            bcgDiv.style.display = "block";

            imgDiv.style.display = "block";

            return false;

        }

        function HideDiv() {

            var bcgDiv = document.getElementById("divBackground");

            var imgDiv = document.getElementById("divImage");

            var imgFull = document.getElementById("imgFull");

            if (bcgDiv != null) {

                bcgDiv.style.display = "none";

                imgDiv.style.display = "none";

                imgFull.style.display = "none";

            }

        }

    </script>
    <style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .modal
        {
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: black;
            z-index: 100;
            opacity: 0.8;
            filter: alpha(opacity=60);
            -moz-opacity: 0.8;
            min-height: 100%;
        }

        #divImage
        {
            display: none;
            z-index: 1000;
            position: fixed;
            top: 0;
            left: 0;
            background-color: White;
            height: 550px;
            width: 600px;
            padding: 3px;
            border: solid 1px black;
        }
    </style>


<div id="divBackground" class="modal">
            </div>
            <div id="divImage">
                <table style="height: 100%; width: 100%">
                    <tr>
                        <td valign="middle" align="center">
                            <img id="imgLoader" alt="" src="images/loader.gif" />
                            <img id="imgFull" alt="" src="" style="display: none; height: 500px; width: 590px" />
                        </td>
                    </tr>
                    <tr>
                        <td align="center" valign="bottom">
                            <asp:Label ID="lbl_Ord" runat="server"></asp:Label>
                            <asp:Label ID="lbl_Io" runat="server"></asp:Label>
                            <asp:Label ID="lbl_style" runat="server"></asp:Label>
                            <asp:Label ID="lbl_desc" runat="server"></asp:Label>
                        </td>
                    </tr>
                </table>
            </div>




 <ItemTemplate>
                                            <asp:ImageButton Style="cursor: pointer; margin: 10px" onmouseover="return LoadDiv(this.src);"

                                               onmouseout="HideDiv();"  ID="Image1" ImageUrl='<%# DataBinder.Eval(Container.DataItem,"StyleImage")%>'

                                                runat="server" Width="80" Height="50" />
                                            <asp:DropDownList ID="ddl_OtherImg" runat="server" Visible="false" AutoPostBack="true"

                                                EnableViewState="true" CssClass="ddlList" OnSelectedIndexChanged="ddl_OtherImgSelectedIndexChanged"

                                                ViewStateMode="Enabled">
                                            </asp:DropDownList>
                                        </ItemTemplate>



When i move the cursor over ImageButton then image zooming fine(without using onmouseout event). But after zooming of the image when i move the cursor out of Imagebutton then i need to disable zoom. So that i call hidediv() function on onmouseout event. But when i use onmouseover,onmouseout together its not working fine.
the image zooming for fraction of seconds and its disabling. So What can i do for zoom image and un zoom the image on imagebutton mouseover and mouse out?

推荐答案

这是一个使用CSS的示例



这是一个例子，希望它有所帮助。



你可以使用以下链接进行测试



http://jsfiddle.net/y4yAP/

Here is an Example using CSS

Here is an example, hopefully it helps.

You Can test using Following link

http://jsfiddle.net/y4yAP/

（document）.ready（function（）{

(document).ready(function(){

（'＃content'）。hover（function（）{

('#content').hover(function() {

这篇关于图像缩放 - OnmouseOver和mouseOut -Gridview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！