如何实现在div上做出凸出效果。。。的导航栏。

在div上实现凸出效果，如图：

代码

css：

*{margin: 0; padding: 0;}.clickA{position: relative;display: inline-block;*display: inline;*zoom: 1;width: 100px;height: 100px;box-shadow: 0.3px 0.5px 0.1px 0.1px black;background-color: #eee;}.clickB{position: relative;display: inline-block;*display: inline;*zoom: 1;/*  width: 100px;height: 100px;box-shadow: 0.3px 0.5px 0.1px 0.1px black;background-color: #FAFAFA;*/}.skillImg img{position: relative;width: 81px;height: 78px;margin: 9px;}.skill{position: relative;width: 1300px;height: 200px;box-shadow: 0.1px 0.5px 0.3px black;background-color: #eee;}

html：

<ul class="skillImg"><li onclick="clickC(1)" id="click1" class="clickA"><img src="img/test1.png" /></li><li onclick="clickC(2)" id="click2" class="clickA"><img src="img/test1.png" /></li><li onclick="clickC(3)" id="click3" class="clickA"><img src="img/test1.png" /></li><li onclick="clickC(4)" id="click4" class="clickA"><img src="img/test1.png" /></li><li onclick="clickC(5)" id="click5" class="clickA"><img src="img/test1.png" /></li></ul><div class="skill"></div>

js：

var min=1,max=5;window.onload=clickC;function clickC(obj){if(Number(obj)){min=obj;}for(var i=1;i<(max+1);i++){if(i==min){document.getElementById("click"+i).className="clickA";}else{document.getElementById("click"+i).className="clickB";}}}

也可以在table里实现。效果图：

代码

css：

table{width: 300px;height: 200px;background-color: #EEE0E5;}.aa{background-color: #EEE0E5;border-top: 1px solid green;border-left: 1px solid black;border-right: 1px solid black;}.bb{background-color: #d1d1d1;/*border-top: 1px solid green;border-left: 1px solid black;border-right: 1px solid black;*/          }

html：

<table border="0" cellpadding="20" cellspacing="0"><tr><th class="aa" onclick="bbb(1)" id="ccc1">aa</th><th class="aa" onclick="bbb(2)" id="ccc2">aa</th><th class="aa" onclick="bbb(3)" id="ccc3">aa</th></tr><tr><td rowspan="3">bb</td></tr></table>

js：

var min=1;window.onload=bbb;function bbb(obj){if (Number(obj)) {min=obj;}for(var i=1;i<4;i++){if (i==min) {document.getElementById("ccc"+i).className="aa";}else{document.getElementById("ccc"+i).className="bb";}}}

如何实现在div上做出凸出效果。。。的导航栏。相关推荐

通过div+css做出好看的横排导航栏
第一次写博客,希望大家支持,如果有什么不严谨或者写错的地方,望大家批评矫正.希望论坛大牛多指点,菜鸟一只,最近在学前端布局,因为自己刚学会的,所以分享出来给大家,希望对像我一样的菜鸟有所帮助! 1.首 ...
jQuery 设计和自定义一个带展开动画效果的导航栏
设计和自定义一个带展开动画效果的导航栏,尝试写了一个demo,加上设计和调试差不多写了一天吧. 这里就来讲讲如何从设计->写布局->写样式->写JS代码完成一个完全自己设计的导航栏 ...
微信小程序带吸顶效果的导航栏
有时候做微信小程序商城的时候要做可以左右滑动又有吸顶效果的导航栏,最近刚做过一个,不多说直接上代码. .wxml <view class="limit_save fix-save&qu ...
android-仿美丽说有滑动效果的导航栏
如果大家想要简单点的,也可以参考:http://blog.csdn.net/jdsjlzx/article/details/51560133 效果图: 本文转自:http://blog.csdn.ne ...
JQ实现标签栏切换效果、导航栏下滑效果以及动画队列和stop（）方法
标签栏切换 HTML <div class="box"><div class="tab-list"><ul><li&g ...
Flutter 凸起效果底部导航栏一
大多app中都会带有底部导航栏,系统默认自带的导航条不够新颖.今天我们改造一下导航条,将中间的按钮起到凸起的效果,特别有的app,中间常用扫一扫功能. Flutter为我们提供了一个控件BottomN ...
导航栏透明度渐变; 下拉头视图拉伸效果;勾号动画; 一段文字中点击部分可响应不同事件...
之前通过设置navigationBar的barTintColor设置导航栏颜色,然后拿到self.navigationController.navigationBar.subviews.firstOb ...
利用3D效果制作立体导航栏
利用3D效果制作立体导航栏文章目录使用3D效果制作3D导航栏一.3D的旋转以及位移二.使用步骤 1.搭建html骨架 2.添加css样式前言利用3D效果制作导航栏: 制作一个好玩的3D导航 ...
css筋斗云,JavaScript实现精美个性导航栏筋斗云效果
实现效果: 实现效果如下图所示实现原理: 什么是筋斗云效果: •这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: •鼠标经过的时候,利用offsetLef ...

如何实现在div上做出凸出效果。。。的导航栏。

如何实现在div上做出凸出效果。。。的导航栏。相关推荐

最新文章

热门文章