WEB代码:jiuxian特效-白酒馆特效-// 点击字切换酒

于 2019-08-23 18:05:33 发布
阅读量487 收藏
点赞数
分类专栏： Web 文章标签： WEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43731793/article/details/100043948
版权

HTML

 <div class="topTenConWrap">
                        <div class="topTenCon">
                            <ul>
                                <li>
                                        <i class="topTenOne"></i>
                                        <div class="topTenPic">
                                            <a href=""><img src="public/img/a8aa081133ae4871ab26071d716a31107.jpg" alt=""></a>
                                        </div>
                                        <div class="topTenTitBox">
                                            <div class="topTenTit"><a href="">53°国台·品鉴15  500ml</a></div>
                                            <div class="topTenPrice"><strong>￥796.00</strong></div>
                                        </div>
                                </li>
                                <li>
                                        <i class="topTenOne"></i>
                                        <div class="topTenPic">
                                            <a href=""><img src="public/img/a8aa081133ae4871ab26071d716a31107.jpg" alt=""></a>
                                        </div>
                                        <div class="topTenTitBox">
                                            <div class="topTenTit"><a href="">53°国台·品鉴15  500ml</a></div>
                                            <div class="topTenPrice"><strong>￥796.00</strong></div>
                                        </div>
                                </li>
                                <li>
                                        <i class="topTenOne"></i>
                                        <div class="topTenPic">
                                            <a href=""><img src="public/img/a8aa081133ae4871ab26071d716a31107.jpg" alt=""></a>
                                        </div>
                                        <div class="topTenTitBox">
                                            <div class="topTenTit"><a href="">53°国台·品鉴15  500ml</a></div>
                                            <div class="topTenPrice"><strong>￥796.00</strong></div>
                                        </div>
                                </li>
                                <li>
                                        <i class="topTenOne"></i>
                                        <div class="topTenPic">
                                            <a href=""><img src="public/img/a8aa081133ae4871ab26071d716a31107.jpg" alt=""></a>
                                        </div>
                                        <div class="topTenTitBox">
                                            <div class="topTenTit"><a href="">53°国台·品鉴15  500ml</a></div>
                                            <div class="topTenPrice"><strong>￥796.00</strong></div>
                                        </div>
                                </li>
                                <li>
                                        <i class="topTenOne"></i>
                                        <div class="topTenPic">
                                            <a href=""><img src="public/img/a8aa081133ae4871ab26071d716a31107.jpg" alt=""></a>
                                        </div>
                                        <div class="topTenTitBox">
                                            <div class="topTenTit"><a href="">53°国台·品鉴15  500ml</a></div>
                                            <div class="topTenPrice"><strong>￥796.00</strong></div>
                                        </div>
                                </li>
                                
                            </ul>
                            <ul>
                                    <li>
                                            <i class="topTenOne"></i>
                                            <div class="topTenPic">
                                                <a href=""><img src="public/img/5e4328e7b9fb451195892523f58112307.jpg" alt=""></a>
                                            </div>
                                            <div class="topTenTitBox">
                                                <div class="topTenTit"><a href="">52°五粮液 普五500ml</a></div>
                                                <div class="topTenPrice"><strong>￥1399.00</strong></div>
                                            </div>
                                    </li>
                                    <li>
                                            <i class="topTenOne"></i>
                                            <div class="topTenPic">
                                                <a href=""><img src="public/img/5e4328e7b9fb451195892523f58112307.jpg" alt=""></a>
                                            </div>
                                            <div class="topTenTitBox">
                                                <div class="topTenTit"><a href="">52°五粮液 普五500ml</a></div>
                                                <div class="topTenPrice"><strong>￥1399.00</strong></div>
                                            </div>
                                    </li>
                                    <li>
                                            <i class="topTenOne"></i>
                                            <div class="topTenPic">
                                                <a href=""><img src="public/img/5e4328e7b9fb451195892523f58112307.jpg" alt=""></a>
                                            </div>
                                            <div class="topTenTitBox">
                                                <div class="topTenTit"><a href="">52°五粮液 普五500ml</a></div>
                                                <div class="topTenPrice"><strong>￥1399.00</strong></div>
                                            </div>
                                    </li>
                                    <li>
                                            <i class="topTenOne"></i>
                                            <div class="topTenPic">
                                                <a href=""><img src="public/img/5e4328e7b9fb451195892523f58112307.jpg" alt=""></a>
                                            </div>
                                            <div class="topTenTitBox">
                                                <div class="topTenTit"><a href="">52°五粮液 普五500ml</a></div>
                                                <div class="topTenPrice"><strong>￥1399.00</strong></div>
                                            </div>
                                    </li>
                                    <li>
                                            <i class="topTenOne"></i>
                                            <div class="topTenPic">
                                                <a href=""><img src="public/img/5e4328e7b9fb451195892523f58112307.jpg" alt=""></a>
                                            </div>
                                            <div class="topTenTitBox">
                                                <div class="topTenTit"><a href="">52°五粮液 普五500ml</a></div>
                                                <div class="topTenPrice"><strong>￥1399.00</strong></div>
                                            </div>
                                    </li>
                            
                                    
                            </ul>
                            <ul>
                                    <li>
                                            <i class="topTenOne"></i>
                                            <div class="topTenPic">
                                                <a href=""><img src="public/img/67b8eb12492e497eb4eb30211d9a7d077.jpg" alt=""></a>
                                            </div>
                                            <div class="topTenTitBox">
                                                <div class="topTenTit"><a href="">【老酒特卖】46°红星二锅头珍品100ml（2011-2013年）</a></div>
                                                <div class="topTenPrice"><strong>￥49.00</strong></div>
                                            </div>
                                    </li>
                                    <li>
                                            <i class="topTenOne"></i>
                                            <div class="topTenPic">
                                                <a href=""><img src="public/img/67b8eb12492e497eb4eb30211d9a7d077.jpg" alt=""></a>
                                            </div>
                                            <div class="topTenTitBox">
                                                <div class="topTenTit"><a href="">【老酒特卖】46°红星二锅头珍品100ml（2011-2013年）</a></div>
                                                <div class="topTenPrice"><strong>￥49.00</strong></div>
                                            </div>
                                    </li><li>
                                            <i class="topTenOne"></i>
                                            <div class="topTenPic">
                                                <a href=""><img src="public/img/67b8eb12492e497eb4eb30211d9a7d077.jpg" alt=""></a>
                                            </div>
                                            <div class="topTenTitBox">
                                                <div class="topTenTit"><a href="">【老酒特卖】46°红星二锅头珍品100ml（2011-2013年）</a></div>
                                                <div class="topTenPrice"><strong>￥49.00</strong></div>
                                            </div>
                                    </li><li>
                                            <i class="topTenOne"></i>
                                            <div class="topTenPic">
                                                <a href=""><img src="public/img/67b8eb12492e497eb4eb30211d9a7d077.jpg" alt=""></a>
                                            </div>
                                            <div class="topTenTitBox">
                                                <div class="topTenTit"><a href="">【老酒特卖】46°红星二锅头珍品100ml（2011-2013年）</a></div>
                                                <div class="topTenPrice"><strong>￥49.00</strong></div>
                                            </div>
                                    </li><li>
                                            <i class="topTenOne"></i>
                                            <div class="topTenPic">
                                                <a href=""><img src="public/img/67b8eb12492e497eb4eb30211d9a7d077.jpg" alt=""></a>
                                            </div>
                                            <div class="topTenTitBox">
                                                <div class="topTenTit"><a href="">【老酒特卖】46°红星二锅头珍品100ml（2011-2013年）</a></div>
                                                <div class="topTenPrice"><strong>￥49.00</strong></div>
                                            </div>
                                    </li><li>
                                            <i class="topTenOne"></i>
                                            <div class="topTenPic">
                                                <a href=""><img src="public/img/67b8eb12492e497eb4eb30211d9a7d077.jpg" alt=""></a>
                                            </div>
                                            <div class="topTenTitBox">
                                                <div class="topTenTit"><a href="">【老酒特卖】46°红星二锅头珍品100ml（2011-2013年）</a></div>
                                                <div class="topTenPrice"><strong>￥49.00</strong></div>
                                            </div>
                                    </li>
                            
                                    
                            </ul>
                            <ul>
                                    <li>
                                            <i class="topTenOne"></i>
                                            <div class="topTenPic">
                                                <a href=""><img src="public/img/a61e1658f8ea42ae9890d441072d98d67.jpg" alt=""></a>
                                            </div>
                                            <div class="topTenTitBox">
                                                <div class="topTenTit"><a href="">42°白云边十二年陈酿500ml</a></div>
                                                <div class="topTenPrice"><strong>￥99.00</strong></div>
                                            </div>
                                    </li>
                                    <li>
                                            <i class="topTenOne"></i>
                                            <div class="topTenPic">
                                                <a href=""><img src="public/img/a61e1658f8ea42ae9890d441072d98d67.jpg" alt=""></a>
                                            </div>
                                            <div class="topTenTitBox">
                                                <div class="topTenTit"><a href="">42°白云边十二年陈酿500ml</a></div>
                                                <div class="topTenPrice"><strong>￥99.00</strong></div>
                                            </div>
                                    </li>
                                    <li>
                                            <i class="topTenOne"></i>
                                            <div class="topTenPic">
                                                <a href=""><img src="public/img/a61e1658f8ea42ae9890d441072d98d67.jpg" alt=""></a>
                                            </div>
                                            <div class="topTenTitBox">
                                                <div class="topTenTit"><a href="">42°白云边十二年陈酿500ml</a></div>
                                                <div class="topTenPrice"><strong>￥99.00</strong></div>
                                            </div>
                                    </li>
                                    <li>
                                            <i class="topTenOne"></i>
                                            <div class="topTenPic">
                                                <a href=""><img src="public/img/a61e1658f8ea42ae9890d441072d98d67.jpg" alt=""></a>
                                            </div>
                                            <div class="topTenTitBox">
                                                <div class="topTenTit"><a href="">42°白云边十二年陈酿500ml</a></div>
                                                <div class="topTenPrice"><strong>￥99.00</strong></div>
                                            </div>
                                    </li>
                                    <li>
                                            <i class="topTenOne"></i>
                                            <div class="topTenPic">
                                                <a href=""><img src="public/img/a61e1658f8ea42ae9890d441072d98d67.jpg" alt=""></a>
                                            </div>
                                            <div class="topTenTitBox">
                                                <div class="topTenTit"><a href="">42°白云边十二年陈酿500ml</a></div>
                                                <div class="topTenPrice"><strong>￥99.00</strong></div>
                                            </div>
                                    </li>
                               
                            
                                    
                            </ul>
                        </div>
                    </div>

css

.topTenConWrap{
    width: 985px;
    height: 102px;
    padding: 10px 0 15px 0;
    overflow: hidden;
    position: relative;
}
.topTenNavBox h3{
    float: left;
}
.topTenNavBox h3 i{
    display: inline-block;
    vertical-align: middle;
    width: 11px;
    height: 13px;
    overflow: hidden;
}
.topTenNavBox h3 .topTen1{
    background-position: -38px 0;
}
.topTenNavBox h3 span{
    color: #d43d4e;
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}
.topTenNav{
    float: right;
    height: 32px;
}
.topTenNav a{
    font-size: 12px;
    height: 32px;
    padding: 0 10px;
    display: block;
    float: left;
    color: #666;
    text-decoration: none;

}
.topTenNav span{
    float: left;
    display: block;
    color: #cccccc;
}
.topTenNav a:hover{
    color: #cc0000;

}
.topTenCon li{
    float: left;
    width: 190px;
    margin-top: 10px;
    padding-right: 7px;
    list-style: none;
}
.topTenCon li .topTenOne{
    width: 20px;
    display: block;
    float: left;
    height: 89px;
}
.topTenCon li .topTenPic{
    float: left;
}
.topTenCon li .topTenPic a{
    color: #666;
    text-decoration: none;
}
.topTenCon li .topTenPic a img{
    width: 90px;
    height: 90px;
}
.topTenCon li .topTenTitBox{
    float: left;
    width: 80px;
    padding-top: 5px;
}
.topTenCon li .topTenTitBox .topTenTit{
    width: 80px;
    height: 36px;
    line-height: 18px;
    overflow: hidden;
    font-family: 宋体;
}
.topTenCon li .topTenTitBox .topTenTit a{
    width: 80px;
    height: 36px;
    display: block;
    color: #666;
    text-decoration: none;
    font-size: 12px;
    text-overflow: ellipsis;
}
.topTenCon li .topTenTitBox .topTenPrice{
    font-size: 16px;
    height: 18px;
    line-height: 18px;
    margin-top: 5px;
    color: #cc0000;
    width: 80px;
    overflow: hidden;
    font-family: 微软雅黑;
    background: #fff;
}
.topTenCon li .topTenTitBox .topTenPrice strong{
    font-size: 15px;
    font-weight: normal;
    color: #CD0100;
}
.topTenCon ul{
    /* display: none; */
}

JS

// 点击字切换酒
$(".topTenNav a").hover(function() {
    //获取索引 图片索引与按钮的索引是一一对应的
    var index = $(this).index()/2;
    // console.warn(index);
    // siblings  找到 兄弟节点(不包括自己）
    $(".topTenCon ul").eq(index).show().siblings().hide();
});

**

**

**

**

**

**
hahahafree
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jiuxian.zip
02-06
完成一个静态的页面,用html+css完成的一个电商界面,jquery完成一些特效.可以作为大学毕设设计参考页面，为需要的同学提供一点帮助吧
WEB代码:jiuxian特效-白酒馆特效-点击切换图片动画
weixin_43731793的博客
08-23 152
HTML <div class="spiritWrap"> <div class="bannerSlier"> <div class="imgBox"> <ul> <...
WEB代码:jiuxian特效-优惠推荐-Jquery动画
weixin_43731793的博客
08-23 96
HTML <div class="countDownPanel mt10"> <div class="raceBox"> <div class="titlebox"> <div class="title_2"> ...
WEB代码:jiuxian特效-鼠标滑过，上下页面同时显示
weixin_43731793的博客
08-20 195
html <div class="crazySale"> <!-- 左侧 --> <div class="indexTabBox"> <!-- 上 --> <div class="indexTabNav"> <ul&gt...
WEB代码：首页顶部：鼠标滑过特效、 最简单的jQuery轮播图
weixin_43731793的博客
08-20 504
首页顶部：鼠标滑过特效 index.html <body> <div class="topHeader"> <div class="topHeaderCon"> <div class="topHeaderLeft"> <p>欢迎来酒仙网！</p&gt...
ecshop2.7.3仿酒仙网模版整站UTF
01-18
第三步：恢复数据，选择目录-jiuxian -开始恢复 第四步：设置data目录下的config.php，设置一下数据库连接信息 完成。 备份恢复完成后建议删除diguo文件或者是重命名 恢复好了的后台/admin 账户admin 密码 admin...
WEB代码：内嵌框架iframe、frame框架
weixin_43731793的博客
07-10 6193
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 4669
1、下拉菜单:select </body> <h1>用户登录页面</h1> <form action="index.php"> <p>用户名:</p> <p> <input type="text" name="username" value="小胡" maxlength="5"> ...
WEB前端代码：边框阴影、边框图片、背景样式、文本样式、字体样式
weixin_43731793的博客
07-16 3542
1、边框阴影 box-shadow:5px 10px 20px #000; 1)5px 相对于原div的左上角的x偏移 2)10px 相对于原div的左上角的y偏移 3)20px 在偏移的基础上进行模糊处理 4)#000 阴影div的颜色 .div1{ margin:100px; width:256px; height:256px; background: #888; ...
PHP：PHP7连接数据库读取数据
weixin_43731793的博客
08-05 2250
PHP连接数据库 <?php $servername = "localhost"; $username = "root"; $password = "133nubia022"; $dbname = "myweb"; // 创建连接 $conn = mysqli_connect($servername, $username, $password,$dbname); // 检测连接 ...
WEB代码：CSS字体样式、文本属性、背景样式、边框属性、鼠标样式、列表样式
weixin_43731793的博客
07-13 1943
1、字体样式: 1.字体样式 font-family 2.字体大小 font-size 3.字体类型 font-style 4.字体粗细 font-weight span{ font-family: 微软雅黑; font-size:30px; font-weight:bold; font-style:italic; } 1、文本属性: 1.字间距 letter-spa...
Web开发代码：For 循环：单击按钮将代码块循环执行5次、For 循环：单击按钮将HTML标题设置从1到6的样式显示、While 循环：只要 i 小于 6就一直循环代码块
weixin_43731793的博客
06-26 1859
1、For 循环：单击按钮将代码块循环执行5次 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>now test</title> </head> <body> <p>单击按钮将代码块循环执行5次。</p...
WEB代码：img标签、图片热点地图、超链接a、
weixin_43731793的博客
07-08 1769
1、img标签 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>img</title> </head> </body> <img src="/img/a.png" width="100px"...
web代码：HTML、body背景色、行标签和块标签
weixin_43731793的博客
07-08 1623
1、HTML、body背景色 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ...
Web开发代码：显示星期几、显示警告、显示确认框、提示框、调用带参数的函数、返回值的函数
weixin_43731793的博客
06-26 1588
1、显示星期几代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>now test</title> </head> <body> <p>点击下面的按钮来显示今天是周几：</p> <button ...
Web开发代码:onclick事件、onmouseover事件
weixin_43731793的博客
06-28 1499
1、onclick事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>now test</title> </head> <body> <p>点击下面的按钮，显示日期</p> <butt...
响应式网站设计：利用Bootstrap设计响应式网站-index.html
weixin_43731793的博客
07-31 1252
响应式网站设计-index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>web</title> <meta name="viewport" content="width=device-width, init...
WEB前端代码：HTML5视频标签:video、HTML5视频结合DOM操作、HTML5中音频结合DOM操作
weixin_43731793的博客
07-11 1222
1、 1、 1、
Web开发代码：break：跳出循环、continue 用于跳过循环中的一个迭代、使用 For...In 声明来遍历数组内的元素
weixin_43731793的博客
06-28 1213
1、break：跳出循环 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>now test</title> </head> <body> <p>点击下面的按钮，测试带有break语句的循环</p>...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值