WEB代码:jiuxian特效-鼠标滑过，上下页面同时显示

最新推荐文章于 2023-02-14 09:17:12 发布
最新推荐文章于 2023-02-14 09:17:12 发布
阅读量195 收藏
点赞数
分类专栏： Web 文章标签： WEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43731793/article/details/99827402
版权

html

<div class="crazySale">
        <!-- 左侧 -->
        <div class="indexTabBox">
            <!-- 上 -->
            <div class="indexTabNav">
                <ul>
                    <li class="on">
                        疯狂抢购
                    </li>
                    <li>
                        爆款推荐
                    </li>
                    <li>
                        实惠口粮
                    </li>
                    <li>
                        整箱钜惠
                    </li>
                    <li>
                        精选大牌
                    </li>
                </ul>
            </div>
            <!-- 下 -->
            <div class="indexTabConWrap">
                <div class="indexTabCon">
                    <ul class="clearfix">
                        <li>
                            <div class="indexTabPic">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml"><img src="http://img06.jiuxian.com/2017/1018/cacb73cdd10e46569d8b8bd5c92b1c822.jpg" alt="52°白水杜康一坛老酒1000ml" width="160" height="160">
                                </a>
                            </div>
                            <div class="indexTabTit">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml">
                                    <i class="zhenxuan"></i> 52°白水杜康一坛老酒1000ml
                                </a>
                            </div>
                            <div class="indexTabPrice">
                                <strong class="jxIndex_nowPrice">￥50.00</strong>
                            </div>

                        </li>
                        <li>
                            <div class="indexTabPic">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml"><img src="http://img06.jiuxian.com/2017/1018/cacb73cdd10e46569d8b8bd5c92b1c822.jpg" alt="52°白水杜康一坛老酒1000ml" width="160" height="160">
                                </a>
                            </div>
                            <div class="indexTabTit">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml">
                                    <i class="zhenxuan"></i> 52°白水杜康一坛老酒1000ml
                                </a>
                            </div>
                            <div class="indexTabPrice">
                                <strong class="jxIndex_nowPrice">￥50.00</strong>
                            </div>

                        </li>
                        <li>
                            <div class="indexTabPic">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml"><img src="http://img06.jiuxian.com/2017/1018/cacb73cdd10e46569d8b8bd5c92b1c822.jpg" alt="52°白水杜康一坛老酒1000ml" width="160" height="160">
                                </a>
                            </div>
                            <div class="indexTabTit">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml">
                                    <i class="zhenxuan"></i> 52°白水杜康一坛老酒1000ml
                                </a>
                            </div>
                            <div class="indexTabPrice">
                                <strong class="jxIndex_nowPrice">￥50.00</strong>
                            </div>

                        </li>
                        <li>
                            <div class="indexTabPic">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml"><img src="http://img06.jiuxian.com/2017/1018/cacb73cdd10e46569d8b8bd5c92b1c822.jpg" alt="52°白水杜康一坛老酒1000ml" width="160" height="160">
                                </a>
                            </div>
                            <div class="indexTabTit">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml">
                                    <i class="zhenxuan"></i> 52°白水杜康一坛老酒1000ml
                                </a>
                            </div>
                            <div class="indexTabPrice">
                                <strong class="jxIndex_nowPrice">￥50.00</strong>
                            </div>

                        </li>
                        <li>
                            <div class="indexTabPic">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml"><img src="http://img06.jiuxian.com/2017/1018/cacb73cdd10e46569d8b8bd5c92b1c822.jpg" alt="52°白水杜康一坛老酒1000ml" width="160" height="160">
                                </a>
                            </div>
                            <div class="indexTabTit">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml">
                                    <i class="zhenxuan"></i> 52°白水杜康一坛老酒1000ml
                                </a>
                            </div>
                            <div class="indexTabPrice">
                                <strong class="jxIndex_nowPrice">￥50.00</strong>
                            </div>

                        </li>
                        <li>
                            <div class="indexTabPic">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml"><img src="http://img06.jiuxian.com/2017/1018/cacb73cdd10e46569d8b8bd5c92b1c822.jpg" alt="52°白水杜康一坛老酒1000ml" width="160" height="160">
                                </a>
                            </div>
                            <div class="indexTabTit">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml">
                                    <i class="zhenxuan"></i> 52°白水杜康一坛老酒1000ml
                                </a>
                            </div>
                            <div class="indexTabPrice">
                                <strong class="jxIndex_nowPrice">￥50.00</strong>
                            </div>

                        </li>
                        <li>
                            <div class="indexTabPic">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml"><img src="http://img06.jiuxian.com/2017/1018/cacb73cdd10e46569d8b8bd5c92b1c822.jpg" alt="52°白水杜康一坛老酒1000ml" width="160" height="160">
                                </a>
                            </div>
                            <div class="indexTabTit">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml">
                                    <i class="zhenxuan"></i> 52°白水杜康一坛老酒1000ml
                                </a>
                            </div>
                            <div class="indexTabPrice">
                                <strong class="jxIndex_nowPrice">￥50.00</strong>
                            </div>

                        </li>
                        <li>
                            <div class="indexTabPic">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml"><img src="http://img06.jiuxian.com/2017/1018/cacb73cdd10e46569d8b8bd5c92b1c822.jpg" alt="52°白水杜康一坛老酒1000ml" width="160" height="160">
                                </a>
                            </div>
                            <div class="indexTabTit">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml">
                                    <i class="zhenxuan"></i> 52°白水杜康一坛老酒1000ml
                                </a>
                            </div>
                            <div class="indexTabPrice">
                                <strong class="jxIndex_nowPrice">￥50.00</strong>
                            </div>

                        </li>
                        <li>
                            <div class="indexTabPic">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml"><img src="http://img06.jiuxian.com/2017/1018/cacb73cdd10e46569d8b8bd5c92b1c822.jpg" alt="52°白水杜康一坛老酒1000ml" width="160" height="160">
                                </a>
                            </div>
                            <div class="indexTabTit">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml">
                                    <i class="zhenxuan"></i> 52°白水杜康一坛老酒1000ml
                                </a>
                            </div>
                            <div class="indexTabPrice">
                                <strong class="jxIndex_nowPrice">￥50.00</strong>
                            </div>

                        </li>
                        <li>
                            <div class="indexTabPic">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml"><img src="http://img06.jiuxian.com/2017/1018/cacb73cdd10e46569d8b8bd5c92b1c822.jpg" alt="52°白水杜康一坛老酒1000ml" width="160" height="160">
                                </a>
                            </div>
                            <div class="indexTabTit">
                                <a href="http://www.jiuxian.com/goods-49255.html?src=4766&amp;source=51" target="_blank" title="52°白水杜康一坛老酒1000ml">
                                    <i class="zhenxuan"></i> 52°白水杜康一坛老酒1000ml
                                </a>
                            </div>
                            <div class="indexTabPrice">
                                <strong class="jxIndex_nowPrice">￥50.00</strong>
                            </div>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 右侧 -->
        <div class="indexTabRight">

        </div>
        <h1>11111111111111111</h1>
        <h1>11111111111111111</h1>
        <h1>11111111111111111</h1>
        <h1>11111111111111111</h1>

        <h1>11111111111111111</h1>
        <h1>11111111111111111</h1>
        <h1>11111111111111111</h1>
        <h1>11111111111111111</h1>
        <h1>11111111111111111</h1>
    </div>

CSS

.crazySale {
    width: 1200px;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    margin-top: 10px;
}

.indexTabBox {
    width: 920px;
    height: 499px;
    float: left;
    /* background: rgb(61, 14, 190); */
}

.indexTabRight {
    width: 270px;
    height: 500px;
    float: left;
    /* background: rgb(202, 27, 35); */
}

.indexTabNav li {
    background: #f9f9f9;
    list-style: none;
    width: 182px;
    height: 35px;
    float: left;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
    color: #666;
    font-size: 16px;
    font-family: 微软雅黑;
    border-left: 1px solid #ececec;
    border-right: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    border-top: 2px solid #ececec;
}

.crazySale .on {
    border-top: 2px solid #cc0000;
    border-bottom: 1px solid #fff;
    color: #cc0000;
    background: #fff;
}

.crazySale .indexTabConWrap {
    height: 460px;
    border: 1px solid #ececec;
    border-top: none;
    overflow: hidden;
    background: #fff;
}

.crazySale .indexTabConWrap .indexTabCon {
    width: 910px;
    height: 442px;
    margin: 0 auto;
    padding: 10px 0;
    position: relative;
    overflow: hidden;
    background: #fff;
    /* display: none; */
}

.crazySale .indexTabConWrap .indexTabCon .clearfix li {
    width: 182px;
    float: left;
    margin-top: 20px;
    list-style: none;
}

.crazySale .indexTabConWrap .indexTabPic {
    padding: 0 11px;
    width: 160px;
    position: relative;
    z-index: 1;
}

.indexTabTit {
    padding: 0 6px;
    width: 170px;
    height: 18px;
    line-height: 18px;
    /* 文本多，显示省略符号 */
    text-overflow: ellipsis;
    overflow: hidden;
    /* 文本多，不换行 */
    white-space: nowrap;
}

.indexTabPrice {
    padding: 0 6px;
    width: 170px;
    height: 18px;
    line-height: 18px;
    overflow: hidden;
    /* 文本多，不换行 */
    white-space: nowrap;
}

.indexTabTit a {
    color: #666;
    text-decoration: none;
    font-size: 12px;
}

.indexTabTit .zhenxuan {
    float: left;
    width: 72px;
    height: 16px;
    background: url("../img/zhenxuan.jpg") no-repeat top center;
    margin-right: 5px;
}

.indexTabPrice .jxIndex_nowPrice {
    font-family: 微软雅黑;
    font-size: 12px;
    color: #CD0100;
    /* normal 	默认值。定义标准的字符。 */
    font-weight: normal;
    line-height: 18px;
    /* 此元素会被显示为内联元素，元素前后没有换行符。 */
    display: inline;
    /* 把此元素放置在父元素的中部。 */
    vertical-align: middle;
}

JS

// 疯狂抢购-上特性
    $('.crazySale .indexTabNav ul li').mouseenter(function() {
        // alert('1');
        $('.crazySale .indexTabNav ul li').removeClass('on');
        $(this).addClass('on');

        // 疯狂抢购-上下互动
        var idx = $(this).index('.crazySale .indexTabNav ul li');
        $(".indexTabConWrap .indexTabCon").hide();
        $(".indexTabConWrap .indexTabCon").eq(idx).show();


    })

**

**

**

**

**

**

**

**

**

**

**

**

**

**

**

**

**

**

**

**

**

**

**

**

**
hahahafree
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 鼠标滑动页面动画效果,鼠标滑动到当前页面触发动画效果
weixin_35772420的博客
06-03 4590
近年来，关于鼠标滑动到当前页面从而触发动画效果十分的火热，今天我们就来学习下这一效果。一、首先，我们先来了解一下这一效果实现的原理1.一个网页离不开基本的布局，所以首先就是要先用html将所需要的结构布局出来(长页风格)。2.另外，这一效果的实现主要是结合css3的自定义动画(animation)来实现的。所以，这一阶段，就需要将你所想要实现的动画效果用css3样式实现出来。3.最后，这也是最重要...
《HTML鼠标移入特效》
qq_44894205的博客
10-25 1939
方向与未来 作为一个软件开发工程师应该时刻清楚明白自己的方向，把握好方向未来就是美好的，选择一个一生所要追求的事业做出成绩让其他人去认可你 劳逸结合保持兴趣 过度的学习或许会让你失去自己的思维能力，因此应该合理安排学习与工作与休息，过度的学习后会产生精神疲劳，再去开发项目容易思维混乱缺乏自己的思维能力，所以需要适当去学 ...
动画效果随鼠标向下滑动而加载
09-18
鼠标向下滑动，页面有动画效果
html 输入和显示同步,实现两个INPUT同步输入
weixin_35843523的博客
06-04 1450
不同name时 functionjj(){ vara=document.getElementsByName("s1")[0].value; document.getElementsByName("s2")[0].value=a; } 请把鼠标移动到第二个文本框 =================== 不同IP时候 functionjj(){ vara=document.get...
html+css完成一个鼠标移入，文字下滑显示的效果
天才派大星 !的博客
03-29 3233
在很多电商网站，会存在商品的展示，当用户把鼠标移入商品图片上时，会从上面滑下商品的详情，价格等文字，来实现这个小案例 案例展示 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte...
css+html实现鼠标滑过出现下拉菜单
最新发布
weixin_43312392的博客
02-14 1567
css+html实现鼠标滑过出现下拉菜单
jiuxian.zip
02-06
完成一个静态的页面,用html+css完成的一个电商界面,jquery完成一些特效.可以作为大学毕设设计参考页面，为需要的同学提供一点帮助吧
ecshop2.7.3仿酒仙网模版整站UTF
01-18
第三步：恢复数据，选择目录-jiuxian -开始恢复 第四步：设置data目录下的config.php，设置一下数据库连接信息 完成。 备份恢复完成后建议删除diguo文件或者是重命名 恢复好了的后台/admin 账户admin 密码 admin...
html中向下滑div从左边浮出,css制作从下往上逐渐显示的div
weixin_32308101的博客
06-10 1225
html代码我是div顶部其中div1是整个容器，div2是需要从下往上显示的div。如果只是改变height高度的话，会导致div从上往下慢慢显示，所以并不能直接设置div2的高度来达成效果，此时我们需要一个遮罩mask来帮助div2达成想要的效果。css代码.div1{width: 400px;height:400px;background: #ccc;position: relative;}...
菜单下拉列表怎么实现慢慢出现效果-----过渡（transition）
热门推荐
lxhby520的博客
04-18 2万+
首先这里用到的知识是transition过渡：从一种样式逐渐改变为另一种的样式效果从图来看，是高度发生了变化，&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1
html+css+JavaScript实现淡入淡出下拉菜单
07-08
开始自己就想做一个属于自己的下拉菜单，从什么都不知道到最后成功设计出来了！程序简单易懂，适合初学者！
jQuery实现鼠标滑过鼠标变色功能
06-10
jquery实现鼠标移动到表格上后，各行显示表格背景不同的颜色，也就是各行高亮效果
html5 touch事件实现触屏页面上下滑动(一)
09-28
主要为大家详细介绍了html5 touch事件实现触屏页面上下滑动的相关代码，代码注释很清楚，感兴趣的小伙伴们可以参考一下
html鼠标滚动实现页面切换,实现鼠标滚动一下页面就上下翻一页的效果
weixin_36064196的博客
06-10 4656
Document*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;}.page{height: 100%;width: 100%;font-size: 126px;display: -webkit-box; /*Safari*/display: -moz-box; /*Firefox*/display: -ms-flexbox; ...
WEB代码:jiuxian特效-白酒馆特效-点击切换图片动画
weixin_43731793的博客
08-23 152
HTML <div class="spiritWrap"> <div class="bannerSlier"> <div class="imgBox"> <ul> <...
点击页面实现向上滑动文字并消失jQuery实现
苗雪松的博客
04-04 1084
<html> <head> <meta charset="UTF-8"/> </head> <body> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"&...
html鼠标滑入滑出效果,CSS3创建一个滑出滑入的动画
weixin_39968995的博客
06-03 1315
有时候我们需要在网站上的边栏上放一个客户帮助的表单，开始是放一个按钮在那里，点击之后滑出内容来，一般这种效果我们会用js来控制。现在CSS3也可以做到了哦。不知道什么意思吗？看看这个演示这个是怎么做到的呢？那就要用到CSS3里面的:target这个标签了。之前我也写过相类似用到:target的动画。比如：CSS3手风琴的两种制作方案 超酷的CSS3幻灯片效果下面我们一起看看这个动画的实现思路...
WEB代码：内嵌框架iframe、frame框架
weixin_43731793的博客
07-10 6192
1、内嵌框架iframe <iframe src="https://www.baidu.com/" frameborder="0" width="100%" height="700px"></iframe> 2、frame框架 <frameset rows='100,*' frameborder='0'> <frame src='top.html' ...
WEB代码：下拉菜单:select、多选下拉菜单:multiple、文本框textarea、文件上传框、图片按钮、隐藏框、button按钮、
weixin_43731793的博客
07-10 4668
1、下拉菜单:select </body> <h1>用户登录页面</h1> <form action="index.php"> <p>用户名:</p> <p> <input type="text" name="username" value="小胡" maxlength="5"> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值