仿购物网站产品放大镜效果

最新推荐文章于 2018-09-26 19:01:10 发布
最新推荐文章于 2018-09-26 19:01:10 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： ASP.NET 文章标签： 产品 button function xhtml server stylesheet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/C979170768/article/details/7371145
版权
 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Index" %>

 

<!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 id="Head1" runat="server">

    <title></title>

    <script src="Js/Jquery1.7.js" type="text/javascript"></script>

    <style type="text/css">

        ul, li

        {

            list-style-type: none;

            margin: 0px;

            padding: 0px;

        }

        #menu li

        {

            text-align:center;

            float: left;

            padding: 5px;

            margin-right: 2px;

            width: 147px;

            cursor: pointer;

        }

        #menu li.tabfocus

        {

            width: 111px;

            font-weight: bold;

            background-color: #eee;

            z-index:100;

            border: solid 1px #666;

            position:relative;

            top: 0px;

            left: 0px;

        }

        #content{ width:714px;

height:140px;

padding:10px; background-color:#eee; position:relative; top:-1px; clear:left;

            left: 0px;

            border-bottom-style: none;

            border-bottom-color: inherit;

            border-bottom-width: 0;

        }

        #content li

        {

            display: none;

        }

        #content li.confocus

        {

            display: block;

        }

    </style>

    <script type="text/javascript">        $(function () {

            $('#menu li').each(function (index) {

                $(this).mouseenter(function () {

                    $('#menu li.tabfocus').removeClass('tabfocus');

                    $(this).addClass('tabfocus');

                    $('#content li:eq(' + index + ')').show().siblings().hide();

                })

            })

            $("img").click(function () {

                // window.open();

              //  alert($(this).attr("src").toString().substring($(this).toString().lastIndexOf("/")));

              window.location = "Find.aspx?id=" + $(this).attr("src").toString().substring($(this).toString().lastIndexOf("/"));

                // alert($(this).attr("src"));

 

          })

          $(this).addClass('tabfocus');

        })

    </script>

</head>

<body>

    <form id="form2" runat="server">

    <ul id="menu">

        <li class="tabfocus" style="font-weight: normal">疯狂抢购</li>

        <li>热卖商品</li>

        <li>热评商品</li>

        <li>新品上架</li>

        <li>猜你喜欢</li>

    </ul>

    <ul id="content">

        <li class="conclass">

                <img alt="" src="319/1_small.jpg" />

                <img alt="" src="319/2_small.jpg" />

                <img alt="" src="319/3_small.jpg" />

                <img alt="" src="319/smallJiatingyingyuan.jpg" />

                <img alt="" src="319/smallKongtiao.jpg" />

       

        </li>

        <li>    <img alt="" src="319/smallGuo.jpg" />

                <img alt="" src="319/smallHaixin.jpg" />

                <img alt="" src="319/smallJiaNengXiangji.jpg" />

                <img alt="" src="319/smallJiatingyingyuan.jpg" />

                <img alt="" src="319/smallKongtiao.jpg" />

        </li>

        <li>二手的内容</li>

        <li>

                <img alt="" src="319/smallChangpian.jpg" />

                <img alt="" src="319/smallFamo.jpg" />

                <img alt="" src="319/smallFamo.jpg" />

                <img alt="" src="319/smallFushiXiangji.jpg" />

                <img alt="" src="319/smallGuntong.jpg" />

            </li>

    </ul>

    <asp:Button ID="Button1" runat="server" οnclick="Button1_Click" Text="Button" />

    </form>

</body>

 

</html>

 

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

public partial class Find : System.Web.UI.Page

{

    protected string imgname;

    protected string imgbigname;

    protected void Page_Load(object sender, EventArgs e)

    {

 

        imgname =Request["id"].ToString();//.Substring(Request["id"].ToString().LastIndexOf("/")+1);

        //以面是小图片

        //下面是大图片

        imgbigname ="images/"+Request["id"].ToString().Substring(Request["id"].ToString().LastIndexOf("/") + 1);

      //  ClientScript.RegisterClientScriptBlock(GetType(),"as","<script>alert('"+imgname+"')</script>");

        DataBind();

    }

}

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Find.aspx.cs" Inherits="Find" %>

 

<!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>

     <link href="cloud-zoom.css" rel="stylesheet" type="text/css" />

     <script src="Js/Jquery1.7.js" type="text/javascript"></script>

     <script src="Js/cloud-zoom.1.0.2.js" type="text/javascript"></script>

 

</head>

<body>

    <form id="form1" runat="server">

    <div>

       <a href='<%# imgbigname %>' class = 'cloud-zoom' id='zoom1'

            rel="adjustX: -100, adjustY:40">

            <img src="<%#imgname %>" alt='' title="预览大图"

            style="height: 310px; width: 264px" />

        </a>

    <%--<img src="<%#imgname %>" style="height: 310px; width: 269px" />--%>

    </div>

    </form>

</body>

</html>

C979170768
关注
专栏目录
原生javascript-放大镜效果（模仿购物网站）
liuhao9999的博客
10-26 428
思路： 效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .little { display: block; } /* 小的图片容器 */ ...
图片放大镜效果
11-07
仿淘宝图片放大镜效果，兼容主流浏览器，结构简单易懂
购物车放大镜效果
07-10
一个购物车的放大镜效果，一个购物车的放大镜效果，一个购物车的放大镜效果，一个购物车的放大镜效果
购物图片放大镜
xiaowei的博客
12-10 404
图片放大镜 一难点：不让黄盒子出界 二难点：让大盒子相应移动（比例）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的放大镜</title> <style> *{ margin: 0; padding: 0;
ASP.net中实现放大镜（商场中查看商品）
daipengfei878412的专栏
10-27 1484
添加新项 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">             style="CURSOR: pointer" onmouseout="javascript:closebp()"; src="image
仿淘宝、京东商品放大镜效果
08-13
仿淘宝、京东商品放大镜效果
vue3+vite+ts 仿淘宝放大镜效果
09-17
在本项目中，我们主要探讨的是如何利用Vue3、Vite和TypeScript来实现一个类似于淘宝网站中的商品图片放大镜效果。这个效果通常用于增强用户的购物体验，让他们能更清晰地查看商品细节。以下是实现这一功能所涉及的...
仿淘宝放大镜效果
03-27
仿淘宝放大镜效果,分享一下。
基于jQuery仿淘宝产品图片放大镜特效
10-22
在这篇文章中，作者使用jQuery来实现一个放大镜效果，通过jQuery的 selectors和events来实现鼠标经过小图时大图随之切换的效果。 知识点二：图片放大镜效果的实现 放大镜效果是网页设计中常见的特效之一，它可以...
购物网站的放大镜效果
11-02
购物网站的放大镜效果
仿京东商城商品图片 缩略图+放大镜效果
weixin_33672109的博客
10-25 417
Jquery包文件及样式下载 具体效果可参考京东商城商品图片展示第一步:需要导入Jquery包文件和样式文件（放在<head></head>中间）：<script src="jquery/jquery-1.2.6.pack.js" type="text/javascript"></script><%--Jquery基础包 1.2.6版本--%&...
购物网站图片放大镜效果
12-04
在一些购物网站大家会经常看到这种很炫的效果，这也也会提高商品的知名度，听过用户体验度。源码附上。
仿照淘宝的商品放大镜效果
weixin_40098371的博客
09-26 252
1.鼠标经过small，显示遮盖层和大图；离开时隐藏； 2.鼠标在盒子中移动时，遮盖层和鼠标一起移动； 3.遮盖层移动时，大图移动； 须注意点： 1.处理小图时： 鼠标在遮盖层的中间，所以遮盖层的左上角的坐标应该在鼠标在盒子中的位置，减去一半的遮盖层宽度、高度； 代码为：             鼠标在盒子中的位置             var left = e.clientX+...
Html调用 QQ接口
热门推荐
用智慧创新技术，用技术改变未来
05-09 1万+
A href="tencent://message/?uin=707321921&Site=有事Q我&Menu=yes">   "border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:1>       Java代码   "tencent://message/?uin=707321921&S
Repeater 的操作,数据的显示,绑定,动态取控件中的值和Repeater1_ItemCommand事件的相关用法
用智慧创新技术，用技术改变未来
11-28 5324
HTML Code <asp:Repeater ID="Repeater1" runat="server" onitemcommand="Repeater1_ItemCommand"> 昵称:这是[]帅哥于[]给你的留
这是采用两种方法来调用WebServic
用智慧创新技术，用技术改变未来
12-21 4438
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page {
开发微信发红包时，本地测试没有问题发布IIS上提示 System.Security.Cryptography.CryptographicException: 系统找不到指定的文件。
用智慧创新技术，用技术改变未来
01-05 4288
1，今天公司要求开发微信红包提现功能，花了半天研究了一下，在本地都非常的顺利也可以正常的发红包了，但是部署到IIs上之后提示:System.Security.Cryptography.CryptographicException: 系统找不到指定的文件。 这个问题太纠结了，在网上找了一会资料权限也设置好了，还是没有解决最后自己从综合网上的各种资料把问题解决了，下面把解决方案贴在下面 将微信Po
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值