淘宝服饰精品广告

最新推荐文章于 2022-10-19 21:12:16 发布
转载 最新推荐文章于 2022-10-19 21:12:16 发布 · 146 阅读 · 0

本文介绍了一个使用HTML、CSS和jQuery实现的商品图片展示滑动效果的案例。当鼠标悬停在左侧或右侧的商品类别上时，中间区域会显示对应类别的商品图片。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            font-size: 12px;
            color:#ddd;
        }
        ul li{
            list-style: none;
        }
        #left,#right,#center{
            float: left;
        }
        a{
            text-decoration: none;
            color:#333;


        }
        a:hover{
            text-decoration: none;
            color:#000;
            background: url("images/abg.gif");
        }
        .wrapper{
            width: 298px;
            height: 248px;
            border: 1px solid pink;
            overflow: hidden;
            margin: 100px auto;
        }
        #left a,#right a{
            display: block;
            width: 48px;
            height: 27px;
            text-align: center;
            line-height: 27px;
            border-bottom:1px solid pink;
        }
        #center{
            border-right:1px solid pink;
            border-left: 1px solid pink;
        }
    </style>
    <script src="../jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
         $('#left li').mouseenter(function(){
             $('#center li').eq($(this).index()).show().siblings('li').hide();
         });
         $('#right li').mouseenter(function(){
             $('#center li').eq($(this).index()).show().siblings().hide();
         })
        })
    </script>
</head>
<body>
<div class="wrapper">

    <ul id="left">
        <li><a href="#">女靴</a></li>
        <li><a href="#">雪地靴</a></li>
        <li><a href="#">冬裙</a></li>
        <li><a href="#">呢大衣</a></li>
        <li><a href="#">毛衣</a></li>
        <li><a href="#">棉服</a></li>
        <li><a href="#">女裤</a></li>
        <li><a href="#">羽绒服</a></li>
        <li><a href="#">牛仔裤</a></li>
    </ul>
    <ul id="center">
        <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男靴.jpg" width="200" height="250" /></a></li>
    </ul>
    <ul id="right">
        <li><a href="#">女包</a></li>
        <li><a href="#">男包</a></li>
        <li><a href="#">登山鞋</a></li>
        <li><a href="#">皮带</a></li>
        <li><a href="#">围巾</a></li>
        <li><a href="#">皮衣</a></li>
        <li><a href="#">男毛衣</a></li>
        <li><a href="#">男棉服</a></li>
        <li><a href="#">男靴</a></li>
    </ul>

</div>
</body>
</html>

 

jQuery-----淘宝精品服饰案例
guohui的博客
02-05 2713
一、设计思路 主要的设计思路是把这个分为几部分了解好，每一部分又包括什么都要弄明白。 咱们要做的效果图如下图所示： 设计思路： 这个效果分为两部分，左边是9个小的li，里面放物品名称；右边是盒子，盒子里面放的图片。当我们鼠标再女靴上时右边的图片就要变成女靴的图片，当我们鼠标在呢大衣上时右边图片就要变成呢大衣的图片，同理每一个都是这样变化的。 所以得出结论就是：当我们得到左侧索引值in...
淘宝服饰精品案例
m0_59030524的博客
03-15 1105
案例分析： 核心原理:最标经过左侧盒子某个小i，就让内容盒子相对应图片显示，其余的图片隐藏； 需要得到当前小i的索引号，就可以显示对应索引号的图片; jQuery得到当前元素索引号$(this).index(); 中间对应的图片，可以通过eq(index)方法去选择; 显示元素show()，隐藏元素hide(). <script src="jquery.min.js"></script> <style> * {
6.淘宝服饰精品案例
qq_34620296的博客
12-18 1014
效果如下 鼠标经过某个li会显示对应的图片,而隐藏其他图片 代码 <script src="jQuery.js"></script> <script> /* 核心原理: 1.鼠标经过左侧盒子某个小li,就让内容区盒子显示,其余图片隐藏 2.需要得到当前li的索引号,就可以显示对应索引号的图片 ...
淘宝服饰精品 广告
weixin_30951231的博客
11-24 167
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ m...
jQuery案例--淘宝精品服饰广告
qq_43712409的博客
11-14 405
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
精品资料（2021-2022年收藏）欧莎服装品牌淘宝商城专卖店项目计划书.doc
10-10
欧莎服装品牌计划利用淘宝商城的庞大用户基础和成熟的电商生态系统，启动其线上专卖店项目，旨在满足年轻女性的时尚消费需求，并在此过程中实现品牌的市场扩张与成长。 项目的成败与否，很大程度上取决于其对目标...
服装淘宝网店创业计划书商业计划书精品模板.rar
09-17
这份“服装淘宝网店创业计划书商业计划书精品模板”提供了一个全面的框架，帮助创业者制定清晰的经营策略、市场定位、产品规划以及财务预算。以下是根据这个模板中可能包含的关键知识点的详细解释： 1. **市场分析*...
2021-2022年收藏的精品资料站长cps广告联盟网赚宝典cps推广大盘点.docx
09-18
- 玛萨玛索、京东、乐淘、好乐买、梦芭莎、皙肤泉等品牌的CPS联盟，覆盖服装、鞋类、美妆等多个行业。 - 机票酒店类：住哪儿、同程网、途牛旅游网、艺龙网等CPS联盟，适用于旅行相关网站。 3. Ctoc分销CPS平台： ...
精品资料（2021-2022年收藏）淘宝天猫商城考试题答案[资料.9.10更新].doc
10-10
6. **商品发布规则**：淘宝商城不允许发布广告商品，商品标题和属性需准确，例如诺基亚 N727这样的商品可以发布。 7. **商品发布限制**：同质化商品只能发布一次，以避免重复和竞争混乱。 8. **积分发票违约金**：...
本命年精品服饰网店营销方案设计论文.docx
12-20
在本命年精品服饰网店的营销方案中，SWOT分析用于评估网店的内部优势和劣势，以及外部市场机会和挑战，为制定营销策略提供依据。 2. **市场定位**：市场定位是指企业确定其产品或服务在目标消费者心中的独特位置。...
淘宝添加衣服和API属性工具html保存
08-03
淘宝添加衣服和API属性工具页html页面保存
js高仿淘宝图片展示效果
11-25
js高仿淘宝图片展示效果鼠标移动到图片上右侧会显示放大镜的效果
淘宝精品服饰案例
xyw_jzj5201314的博客
11-11 530
淘宝精品服饰案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 12px;
淘宝服饰精品案例分析
weixin_45147894的博客
10-20 409
jquery案例：淘宝精品服饰案例（简写，重点是jquery的代码）
vfjcgg的博客
04-19 1381
案例：淘宝精品服饰案例 1.核心原理：鼠标经过某个盒子鼠标小li，就让内容区盒子相对应图片显示，其余的图片隐藏， 2.需要得到当前小li的索引号， 3.jQuery得到当前元素的索引号$(this).index() 4.中间对印的图片，可以通过eq(index)方法去选择 5.显示元素show(),隐藏元素hide() 栗子： <!DOCTYPE html> <html lang...
jQuery-淘宝精品服装案例展示
weixin_69036336的博客
10-19 2248
jQuery-淘宝精品服装案例展示
jQuery淘宝精品服饰案例
叶先生
10-26 431
淘宝精品服饰案例 –> 女靴 雪地靴 冬裙 呢大衣 毛衣 棉服 女裤 羽绒服 牛仔裤 <div> <a href="#"><img src="../images/雪地靴.jpg" alt="" width="448" height="360"></a> </div> <div> ...
淘宝初冬新品广告横幅设计素材下载
资源摘要信息: "淘宝初冬上新广告横幅"是指为了推广淘宝平台上的初冬新品服饰，设计的一系列广告宣传横幅。这类横幅广泛应用于线上店铺的宣传和推广，尤其是针对女装服饰的商家，在初冬季节换季之际进行新品上市的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值