jquery案例-演示手机logo图片事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>案例-演示</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- 记得引入jquery-1.11.3.js文件到js目录下 --><script type="text/javascript" src="js/jquery-1.11.3.js"></script><style type="text/css">body{font-family: "Microsoft YaHei";text-align: center;}#mainDiv {width: 100%;text-align: center;margin-top:10px;}.divRow {text-align: center;margin-left: auto;margin-right: auto;width:736px;}.divColumn {width:104px;height:38px;color: #005aa0;border: solid 1px #b9b9b9;font-size:14px;float:left;margin: 0 -1 -1 0;text-align: center;cursor: pointer;}.divColumn a {height: 36px;line-height: 36px;overflow: hidden;padding: 0;position: relative;white-space: nowrap;width: 102px;display: inline-block;}.divColumn img {display: block;height: 36px;position: absolute;width:102px;z-index:1;left:0;top:0;}.hover {color: #e4393c;border: solid 1px #e4393c; position: relative;}.more,.fold {font-size: 12px;color: #005aa0;cursor: pointer;}.more b{background: rgba(0,0,0,0) url("images/down.gif") no-repeat;height: 5px;overflow: hidden;position: absolute;width: 7px;margin:6 0 0 3;}.fold b{background: url("images/up.gif");}.cGreen{background-color: #4CA902}.cPink{background-color: #ED4A9F}.cBlue{background-color: #0092E7}.cCyan{background-color: #01A6A2}.cYellow{background-color: #DCA112}.cRed{background-color: #B7103B}.cPurple{background-color: #792F7C}.cBlack{background-color: #110F10}.cOrange{background-color: #FF4500}.cGray{background-color: #A9A9A9}.hide{display: none;}</style><script type="text/javascript">$(document).ready(function(){//1. 先隐藏第二行$(".divColumn:gt(6)").hide();//2. 点击更多事件$(".more").click(function(){if ($(this).hasClass("fold")){//2.1 如果当前是收起，就显示更多$(this).html("<span>更多<b></b></span>");$(this).removeClass("fold"); $(".divColumn:gt(6)").hide();}else{//2.2 显示“更多”, 点击时候显示“收起”，图片变为向上$(this).html("<span>收起<b></b></span>");$(this).addClass("fold");  // 添加样式，显示向上的图标$(".divColumn:gt(6)").show();}});// 3. 鼠标悬浮、离开事件$(".divColumn").hover(function(){ //  鼠标悬浮、$(this).find("img").hide();$(this).addClass("hover");},function(){ // 鼠标离开$(this).find("img").show();$(this).removeClass("hover");});});</script></head><body><div id="mainDiv"><div class="divRow"><div class="divColumn"><a><img alt="华为" src="data:images/huawei.jpg">华为</a></div><div class="divColumn"><a><img alt="小米" src="data:images/xiaomi.jpg">小米</a></div><div class="divColumn"><a><img alt="三星" src="data:images/samsung.jpg">三星</a></div><div class="divColumn"><a><img alt="苹果" src="data:images/apple.jpg">苹果</a></div><div class="divColumn"><a><img alt="魅族" src="data:images/meizu.jpg">魅族</a></div><div class="divColumn"><a><img alt="诺基亚" src="data:images/nokia.png">诺基亚</a></div><div class="divColumn"><a><img alt="vivo" src="data:images/vivo.png">vivo</a></div><div class="divColumn"><a>OPPO</a></div><div class="divColumn"><a>BlackBerry</a></div><div class="divColumn"><a>努比亚</a></div><div class="divColumn"><a>联想</a></div><div class="divColumn"><a>索尼</a></div><div class="divColumn"><a>酷派</a></div><div class="divColumn"><a>HTC</a></div></div><div class="more"><span>更多<b></b></span></div></div></body>
</html>

jquery案例-演示手机logo图片事件相关推荐

jQuery案例（底部导航图片切换）
作为一个代码新手,最近我又学习了一些jQuery的相关知识,所以今天就做了一个小案例.如下: 通过点击图标切换并点亮图标,现在我们就开始做吧 ,首先说一下思路: 我是通过事件委托的方式做的,大致思路就 ...
Python之tkinter：动态演示调用python库的tkinter带你进入GUI世界(Button展示图片事件)
Python之tkinter:动态演示调用python库的tkinter带你进入GUI世界(Button展示图片事件) 导读动态演示调用python库的tkinter带你进入GUI世界(Button ...
手机触屏事件（jquery）
在移动端,点击事件和悬停事件都同统一为点击事件,所以对于手机或者带有触屏的电子设备来说,触屏事件不可忽视,当然,在不可触摸的屏幕上,这写事件就没有作用了. 触摸开始事件:touchstart 当手指放 ...
jquery.qrcode生成带logo的二维码，同时生成带二维码的好友分享图片（js与canvas实现二维码和图片合成的海报）
首先给大家看一下效果图(纯jQuery前端技术): 提供一下demo 源代码和jquery.qrcode文件下载: https://download.csdn.net/download/qq15577 ...
jquery-qrcode客户端二维码生成类库扩展--融入自定义Logo图片
淘宝就不多说了,全球最大的中文假货销售平台(尽管淘宝没有打出全球中文等字样,可是其必须当之无愧).百度,当当等厚颜无耻之徒的明智之举就在于此,老外做的再大也很少会有直接支持中文的,因此他们都会在其名称 ...
怎么在线制作手机海报图片?
很多人认为自己不懂设计,不会使用设计工具,就无法制作手机海报,但当下很多在线设计平台的出现,让很多不懂设计的人群也能轻松制作海报,在标小智Logo官网下,大家可以随意添加一张图片,然后一键制作成手机海 ...
手风琴jQuery案例
此案例为手风琴jQuery案例,即是列表缩放使用jQuery方法使用点击事件完成此案例,以下将开始此次学习; 建立案例所需要的元素 <ul class="menu"> ...
php常用logo图片格式,4种最常用的Logo图片格式
设计logo完成后如何下载透明背景的logo?印刷要什么格式的logo?什么是logo源文件?如果我们不是专业设计师,这些不同的格式往往会让人感到不知所措.拥有如此众多的文件格式,要判断哪种格式适合用 ...
内存取证之volatility及案例演示
内存取证之volatility及案例演示简介 volatility基础命令案例讲解 [护网杯]Easy_dump [安洵杯]Administrator 's_secret 简介 Volatilit ...

jquery案例-演示手机logo图片事件

jquery案例-演示手机logo图片事件相关推荐

最新文章

热门文章