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

最新推荐文章于 2020-10-26 14:21:19 发布
最新推荐文章于 2020-10-26 14:21:19 发布
阅读量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
关注
专栏目录
图片放大镜效果
11-07
仿淘宝图片放大镜效果，兼容主流浏览器，结构简单易懂
购物车放大镜效果
07-10
一个购物车的放大镜效果，一个购物车的放大镜效果，一个购物车的放大镜效果，一个购物车的放大镜效果
ASP.net中实现放大镜（商场中查看商品）
daipengfei878412的专栏
10-27 1477
添加新项 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">             style="CURSOR: pointer" onmouseout="javascript:closebp()"; src="image
vue3+vite+ts 仿淘宝放大镜效果
09-17
在本项目中，我们主要探讨的是如何利用Vue3、Vite和TypeScript来实现一个类似于淘宝网站中的商品图片放大镜效果。这个效果通常用于增强用户的购物体验，让他们能更清晰地查看商品细节。以下是实现这一功能所涉及的...
基于jQuery仿淘宝产品图片放大镜特效
10-22
在这篇文章中，作者使用jQuery来实现一个放大镜效果，通过jQuery的 selectors和events来实现鼠标经过小图时大图随之切换的效果。 知识点二：图片放大镜效果的实现 放大镜效果是网页设计中常见的特效之一，它可以...
仿淘宝放大镜效果
03-27
在网页设计中，仿淘宝放大镜效果是一种常见的用户体验优化技术，它使得用户在浏览商品图片时可以放大细节，提升购物体验。这种效果通常应用于电商网站的商品展示页面，尤其是在服装、饰品等需要查看细节的品类中。...
jQuery仿Apple图片放大镜浏览效果
05-08
jQuery作为一个强大的JavaScript库，为开发者提供了丰富的功能，包括实现苹果设备上的图片放大镜效果。本篇文章将详细介绍如何使用jQuery来创建一个仿Apple风格的图片放大镜浏览效果。 首先，我们需要理解这个效果...
购物图片放大镜
xiaowei的博客
12-10 395
图片放大镜 一难点：不让黄盒子出界 二难点：让大盒子相应移动（比例）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的放大镜</title> <style> *{ margin: 0; padding: 0;
仿京东商城商品图片 缩略图+放大镜效果
weixin_33672109的博客
10-25 415
Jquery包文件及样式下载 具体效果可参考京东商城商品图片展示第一步:需要导入Jquery包文件和样式文件（放在<head></head>中间）：<script src="jquery/jquery-1.2.6.pack.js" type="text/javascript"></script><%--Jquery基础包 1.2.6版本--%&...
原生javascript-放大镜效果（模仿购物网站）
liuhao9999的博客
10-26 427
思路： 效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .little { display: block; } /* 小的图片容器 */ ...
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 5317
HTML Code <asp:Repeater ID="Repeater1" runat="server" onitemcommand="Repeater1_ItemCommand"> 昵称:这是[]帅哥于[]给你的留
这是采用两种方法来调用WebServic
用智慧创新技术，用技术改变未来
12-21 4433
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 4277
1，今天公司要求开发微信红包提现功能，花了半天研究了一下，在本地都非常的顺利也可以正常的发红包了，但是部署到IIs上之后提示:System.Security.Cryptography.CryptographicException: 系统找不到指定的文件。 这个问题太纠结了，在网上找了一会资料权限也设置好了，还是没有解决最后自己从综合网上的各种资料把问题解决了，下面把解决方案贴在下面 将微信Po
医院健康体检系统
用智慧创新技术，用技术改变未来
04-23 3155
查看，写入,修改一个页面:   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">                 .style1         {             width: 100%;         }         .s
asp.net 天气预报查寻
用智慧创新技术，用技术改变未来
12-18 3145
Asp.net 调用  天气预报接口实现三天的天气显示 前台代码:                      .bigTitle         {             color: #FF0066;             font-size: x-large;         }         .style2         {
JavaScript实现放大镜效果代码详解
在网页设计中，放大镜效果是一个常见的交互功能，尤其在电商网站上，它允许用户更清晰地查看产品图片的细节。JavaScript可以轻松实现这一效果，通过结合HTML结构、CSS样式和JavaScript事件处理来完成。下面我们将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值