zoukankan      html  css  js  c++  java
  • jquery仿凡客诚品图片切换的效果实例代码

    
    
    清远大学城网(http://www.qydxc.com)

    是一个不错的图片切换效果,就是可以图片带文字说明的折叠效果,下面我来给大家推荐两个版本的效果,有需要了解的朋友可参考。 图片版的效果 代码如下 复制代码
    <div class="menu"> <div class="has_children"> <span>特价包邮卡通三件套哆啦a梦</span> <a href="" class="aImg" style="display:block" rel="nofollow"><img src="images/T1.1CCXjx3XXXzYd3._111717.jpg_160x160.jpg" width="160" height="157"></a> </div> <div class="has_children"> <span>全棉活性卡通三件套纯棉汽车图案</span> <a href="" class="aImg" rel="nofollow"><img src="images/T1EAWQXjtvXXaaewYa_120947.jpg_160x160.jpg" width="160" height="157"></a> </div> <div class="has_children"> <span>特价男学生三件套纯棉</span> <a href="" class="aImg" rel="nofollow"><img src="images/T1Bo6gXh0eXXbGc7IV_021411.jpg_160x160.jpg" width="160" height="157"></a> </div> <div class="has_children"> <span>特价三件套男生格子条纹蓝色</span> <a href="" class="aImg" rel="nofollow"><img src="images/T171xDXa4wXXXOx1E9_103218.jpg_160x160.jpg" width="160" height="157"></a> </div> <div class="has_children"> <span style="border:none">韩版公主四件套纯棉床裙1.8米床包邮特价</span> <a href="" class="aImg" rel="nofollow"><img src="images/T1VD5WXfRwXXb5yZIU_014143.jpg_160x160.jpg" width="160" height="157"></a> </div> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // $(".has_children").click(function(){ // $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();//点击后效果 // }) $(".has_children").mouseover(function(){ $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();//鼠标移动过去效果 }) }) </script> 文字版效果 代码如下 复制代码 <div class="menu"> <div class="has_children"> <span>第一张</span> <a href="">11111111</a> <a href="">11111111</a> <a href="">11111111</a> <a href="">11111111</a> <a href="">11111111</a> <a href="">11111111</a> </div> <div class="has_children"> <span>第二张</span> <a href="">22222222</a> <a href="">22222222</a> <a href="">22222222</a> <a href="">22222222</a> <a href="">22222222</a> <a href="">22222222</a> </div> <div class="has_children"> <span>第三张</span> <a href="">33333333</a> <a href="">33333333</a> <a href="">33333333</a> <a href="">33333333</a> <a href="">33333333</a> <a href="">33333333</a> </div> <div class="has_children"> <span>第四张</span> <a href="">44444444</a> <a href="">44444444</a> <a href="">44444444</a> <a href="">44444444</a> <a href="">44444444</a> <a href="">44444444</a> </div> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // $(".has_children").click(function(){ // $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();//点击后效果 // }) $(".has_children").mouseover(function(){ $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();//鼠标移动过去效果 }) }) </script>
  • 相关阅读:
    UnicodeEncodeError: 'latin-1' codec can't encode character 'u7801' in position 49: Body ('码') is not valid Latin-1. Use body.encode('utf-8') if you want to send it encoded in UTF-8. 请求body里面有 汉字
    pytest-allure清空上一次运行的记录(--clean-alluredir)用例重复显示
    【DPDK】谈谈DPDK如何实现bypass内核的原理 其二 DPDK部分的实现
    【DPDK】谈谈DPDK如何实现bypass内核的原理 其一 PCI设备与UIO驱动
    【Network telemetry】谈谈网络遥感技术,从主动探测与被动探测再到Netflow与INT
    【DPDK】【ring】从DPDK的ring来看x86无锁队列的实现
    【DPDK】【Multiprocess】一个dpdk多进程场景的坑
    【DPDK】【CPU usage】DPDK应用如何计算当前系统的压力
    Kubernetes client-go Informer 源码分析
    Kubernetes Job Controller 原理和源码分析(二)
  • 原文地址:https://www.cnblogs.com/wenson/p/3322411.html
Copyright © 2011-2022 走看看