实现放大镜的效果

最新推荐文章于 2024-09-20 16:06:21 发布

wang_yuanyuan1

最新推荐文章于 2024-09-20 16:06:21 发布

阅读量346

点赞数

文章标签： class xhtml stylesheet server webform jquery

本文链接：https://blog.csdn.net/wang_yuanyuan1/article/details/7371185

版权

<%@ Page Xlanguage="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="_3._19jQuery实现放大镜效果.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <style type="text/css">
    body,html
    {
        text-align:center;
        margin:0;
        padding:0;
        }
    #displayshops{display:none;border:solid 1px red;}
    #container {font-family: arial, sans-serif; width:649px;border:solid 1px red; height:30px; position:relative; margin:0;font-weight:bold; font-size:18px;background:#fff; position:relative;}
    #container ul {padding:0; margin:0; list-style-type: none;}
    #container ul li {float:left; border-left:1px solid #eee; width:159px;background-color:#c9c9a7;padding:5px;}
    #container ul li img{border:0;}
    ul li a:hover img{border:0;}
    .myclass{background-color:White;color:Red;font-weight:bold;}

    </style>
    <script src="js/Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('li:eq(0)').addClass('myclass');
            var mytr = "<table><tr>";
                mytr = mytr + "<td><a href=xie.aspx?name=da1.jpg><img src=zoom/xie.jpg /></a></td>";
                mytr = mytr + "</tr></table>"
            $('#displayshops').append(mytr);
            $('table').attr('cellpadding', '10px');
            $('#displayshops').show();
            $('li').hover(function () {
                $('li').removeClass('myclass');
                $('#displayshops table').remove();
                $(this).addClass('myclass');
                var mytr = "<table><tr>";
                var myindex = $('li').index($(this));
                 mytr = mytr + "<td><a href=guo.aspx?name=big1.jpg><img src=zoom/guo.jpg /></a></td>";
                mytr = mytr + "</tr></table>"
            $('#displayshops').append(mytr);
            $('table').attr('cellpadding', '10px');
            $('#displayshops').show();
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
    <ul>
      <li>疯狂抢够</li>
      <li>热卖商品</li>
      <li id="li1">新品上架</li>
    </ul>
    </div>
    <div id="displayshops">
    </div>
    </form>
</body>
</html>