Jquery仿京东小例子

最新推荐文章于 2024-05-09 14:52:26 发布
最新推荐文章于 2024-05-09 14:52:26 发布
阅读量670 收藏
点赞数
分类专栏： 前端 文章标签： jquery css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44315761/article/details/122569144
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>仿京东下例子</title>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .da{
            width: 360px;
            height: 418px;
            float: left;
        }
        .shang{
            width: 350px;
            height: 350px;
            border: 1px solid #ccc;
            margin: 10px 0 10px 10px;
            position: relative;
        }
        .yin{
            width: 150px;
            height: 150px;
            border: 1px solid #ccc;
            background: rgba(255,255,255,0.3);
            position: absolute;
            top:0;
            left: 0;
            cursor: pointer;
            display: none;
        }
        .bao{
            width: 362px;
            height: 56px;
        }
        .tab{
            width: 320px;
            height: 56px;
            margin-left: 10px;
            overflow: hidden;
        }
        .Ul{
            width: 9999px;
            height: 56px;
        }
        .Ul li{
            width: 52px;
            height: 52px;
            float: left;
            border: 2px solid #ccc;
            margin-left: 8px;
            list-style: none;
            position:relative;
            text-align:center;
        }
        .li{
            width: 52px;
            height: 52px;
            border: 2px solid #FF7403;
        }
        .li img{
            display: block;
            position: absolute;
            top:50%;
            left: 50%;
            margin-top:-26px;
            margin-left:-26px;
        }
        .zuo{
            display: block;
            width: 12px;
            height: 56px;
            background: url(../img/icon_clubs.gif) no-repeat;
            background-size: 180px 608px;
            background-position: -82px -462px;
            float: left;
            margin-left: 10px;
        }
        .you{
            display: block;
            width: 12px;
            height: 56px;
            background: url(../img/icon_clubs.gif) no-repeat;
            background-size: 180px 608px;
            background-position: -95px -462px;
            float: right;
            margin-top: -56px;
        }
        .xia{
            width: 360px;
            height: 418px;
            border: 1px solid #ccc;
            float: left;
            margin: 10px 0 0px 20px;
            overflow: hidden;
            display: none;
        }

        .lie{
            width: 1329px;
            height: 30px;
            margin-left: 10px;
            margin-top: 20px;
            border-bottom: 2px solid #BE0000;
        }
        .lie li{
            float: left;
            list-style: none;
            width: 80px;
            height: 28px;
            background: #fff;
            border-radius: 3px;
            border: 0;
            line-height: 30px;
            text-align: center;
            margin-right: 5px;
            border:1px solid #BE0000;
            color: #c30;
            cursor: pointer;
            font-weight: bold;
        }
        .lie>ul .ll{
            width: 80px;
            height: 30px;
            background: #BE0000;
            border-radius: 3px;
            border: 0;
            line-height: 30px;
            text-align: center;
            color: #fff;
            cursor: pointer;
        }
        .nie{
            width: 1329px;
            height: 200px;
            margin-left: 10px;
            overflow: hidden;
        }
        .bao1{
            width: 1329px;
            height: 500px;
        }
        .up{
            width: 1329px;
            height: 200px;
        }
        .up span{
            display: block;
            padding:10px 0 0 10px;
            margin-bottom: 70px;
        }
        .up p{
            text-align: center;
            margin-top: 5px;
        }
        .down{
            width: 1329px;
            height: 300px;
            background: yellow;
        }

    </style>
</head>

<body>
<div>
    <div class="da ">
        <div class="shang">
            <img src="b1.jpg" height="350" width="350" id="pian">
            <div class="yin"></div>
        </div>
        <div class="bao">
            <span class="zuo"></span>

            <div class="tab">
                <ul class="Ul">
                    <li>
                        <img src="b1.jpg" height="52" width="52" />
                    </li>
                    <li>
                        <img src="b2.jpg" height="52" width="52" />
                    </li>
                    <li>
                        <img src="b3.jpg" height="52" width="52" />
                    </li>
                    <li>
                        <img src="b1.jpg" height="52" width="52" />
                    </li>
                    <li>
                        <img src="b2.jpg" height="52" width="52" />
                    </li>
                    <li>
                        <img src="b3.jpg" height="52" width="52" />
                    </li>
                    <li>
                        <img src="b1.jpg" height="52" width="52" />
                    </li>
                    <li>
                        <img src="b2.jpg" height="52" width="52" />
                    </li>
                </ul>
            </div>
            <span class="you"></span>
        </div>
        <div class="lie ">
            <ul>
                <li class="ll">图文介绍</li>
                <li>评论（1）</li>
            </ul>
        </div>

        <div class="nie">
            <div class="bao1">
                <div class="up">
                    <span>暂无好评！</span>
                    <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗</p>
                    <p>来源：师徒课堂</p>
                </div>
                <div class="down">
                    <img src="11.png" height="300" width="1329" />
                </div>
            </div>
        </div>
    </div>
    <div class="xia">
        <img src="b1.jpg" height="600" width="600" id="zhao" />
    </div>
</div>
<!-- Swiper JS -->
<script src="jquery_v3.6.0.js"></script>

<!-- Initialize Swiper -->
<script>
    $(function(){
        var $yin = $(".yin");
        $(".Ul li img").mouseover(function(){
            $(this).parent().addClass("li").siblings().removeClass("li");
            $("#pian").attr("src",$(this).attr("src"));
            $("#zhao").attr("src",$(this).attr("src"));
        }).mouseout(function(){
            $(this).parent().removeClass("li");
        });

        var l = $(".shang").eq(0).offset().left;
        var t = $(".shang").eq(0).offset().top;
        var width2 = $(".yin").outerWidth()/2;
        var height1 = $(".yin").outerHeight()/2;
        var maxL = $(".shang").width() - $yin.outerWidth();
        var maxT = $(".shang").height() - $yin.outerHeight();
        var bili = $("#zhao").width()/$("#pian").width();

        $(".shang").mousemove(function(e){
            var maskL = e.clientX - l - width2,maskT = e.clientY - t - height1;
            if (maskL < 0) { maskL = 0};
            if (maskT < 0) { maskT = 0};
            if (maskL > maxL) {maskL = maxL};
            if (maskT > maxT) {maskT = maxT};

            $yin.css({"left":maskL,"top":maskT});
            $(".xia").show();
            $(".yin").show();
            $("#zhao").css({"margin-left":-maskL*bili,"margin-top":-maskT*bili});


        });
        $(".shang").mouseleave(function(){
            $(".xia").hide();
            $(".yin").hide();
        });

        var marginLeft = 0;
        $(".you").click(function(){
            marginLeft = marginLeft - 64;
            if (marginLeft < -192) {marginLeft = -192};
            $(".tab ul").stop().animate({"margin-left":marginLeft},"fast");
        });

        $(".zuo").click(function(){
            marginLeft = marginLeft + 64;
            if (marginLeft > 0) {marginLeft = 0};
            $(".tab ul").stop().animate({"margin-left":marginLeft},"fast");
        });

        $(".lie li").click(function(){
            var index=$(this).index();
            $(this).addClass("ll").siblings().removeClass("ll");
            $(".bao1>div").eq(index).show().siblings().hide();
        });
    });

</script>
</body>
</html>

在这里插入图片描述

大头目T
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿京东商城html网页源码
2401_84434880的博客
04-27 930
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】京东预售魔力按摩贴你背后的女人技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
仿京东商城登录页面html
scholar_1的博客
07-06 4952
这篇文章，书生带来了一个静态的仿京东商城登录页面有需要的可直接拿去修改修改就可以用了 以下是我的效果图的展示： 如果修改的话，对于初学者，有几点建议：①如果不运用到项目，只为了静态展示，那么，多做几个页面，将底部的：关于我们|联系我们等等改为a标签进行页面跳转。②可以修改一下css，进行美化页面的操作。③根据自己的需求来修改页面图片，甚至可以选择改为轮播图。相关图片资源我放在我的资源里面有需要的可以直接下载也可以自己添加图片，但要注意路径问题.........
【HTML】HTML5网页作业----模仿京东，模仿站点
coding加油站
08-18 6971
html作业，html作业，html设计，模仿京东，期末作业
2024年最新仿京东商城html网页源码，成功从小公司跳槽进蚂蚁定级P6
最新发布
2301_82242779的博客
05-09 439
针对最近很多人都在面试，我这边也整理了相当多的面试专题资料，也有其他大厂的面经。希望可以帮助到大家。上述的面试题答案都整理成文档笔记。也还整理了一些面试资料&最新2021收集的一些大厂的面试真题（都整理成文档，小部分截图）以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
微信小程序——仿写京东购物商城带源码
热门推荐
lijingxiaov5的博客
05-07 1万+
熟悉使用微信小程序开发工具，开发微信小程序项目。仿京东购物商城。首页按分块显示商品。点击“分类”tab，跳转到商品的分类页面。
jquery仿京东商城新版左侧分类导航
06-30
jquery仿京东商城新版左侧分类导航
jQuery仿京东注册表单验证代码
06-24
jQuery仿京东注册表单验证代码是一款清爽简洁的京东注册界面，带有注册成功后的界面代码。
jQuery仿京东商品选项卡切换代码
06-24
jQuery仿京东商品选项卡切换代码是一款基于jquery.SuperSlide实现的京东商品tab选项卡切换特效。
jquery仿京东商城三级联动特效代码
03-20
jquery仿京东商城三级联动代码是一款仿京东商城商品页面配送地区选择城市三级联动代码。
jQuery仿京东移动端地址
06-01
jQuery移动端中国省市县级联插件
jQuery仿京东鼠标悬浮购物车效果
09-04
jQuery仿京东鼠标悬浮购物车效果
jQuery仿京东商城首页模板
11-24
jqery特效代码，仿京东首页，非常好用，适合大多数商城页面开发。
仿京东.zip
09-06
H5仿京东
仿京东首页页面
10-26
完整布局，仿照京东首页，运用H5+css3完成页面的实现，可以用来学习如何布局，写得都很详细，可以慢慢学习，哪怕零基础。。。
Jquery实现仿京东商城省市联动菜单
11-22
本文实例讲述了Jquery实现仿京东商城省市联动菜单的简单实例代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="css/custom-theme/jquery-ui-1.10.0.custom.css"> <
仿京东页面
12-06
模仿京东界面，并且有轮播图与倒计时等特效，其中包括一些js框架
JQuery跑楼梯仿京东商城小案例，小白教程
m0_51095089的博客
12-21 178
今天公司项目完成，没什么事，应小粉丝要求，写一个仿京东商城小楼梯案例，欢迎各位小伙伴共同讨论。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&
超高仿京东商城最新版源码(非常好的商业级UI源码)
11-14
超高仿京东商城最新版源码(非常好的商业级UI源码) [注：本内容来自网络，在此分享仅为帮助有需要的网友，如果侵犯了您的权利，麻烦联系我，我会第一时间删除，谢谢您。]
jquery仿京东购物车
12-29
以下是使用jQuery仿京东购物车的示例代码： ```html <!DOCTYPE html> <title>jQuery仿京东购物车 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> $(document).ready(function() { /...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值