文档章节

html小代码

 易水寒521
发布于 2015/04/15 15:39
字数 408
阅读 4
收藏 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<style type="text/css"> 
*{margin:0px; padding:0px;} 
#main{width:1000px; height:600px; margin:0px auto;} 
#main ul li{width:288px; height:180px;list-style-type:none; 
float:left; margin:10px 20px; box-shadow:0px 0px 15px #000;} 
.gray{width:100%; height:100%; background:rgba(0,0,0,0.5); position:absolute; left:0px; top:0px;display:none;} 
.showImg{width:650px; height:406px;position:absolute; left:338px; top:100px;border:10px solid #FFFFFF; display:none;} 
.showImg img.butl{ position:absolute; left:-50px; top:186px;} 
.showImg img.butr{ position:absolute; right:-50px; top:186px;} 
</style> 

</head> 

<body>
<div id="main"> 
<ul> 
<li><img src="images/s1.jpg" bigsrc="images/big1.jpg" /></li> 
<li><img src="images/s2.jpg" bigsrc="images/big2.jpg" /></li> 
<li><img src="images/s3.jpg" bigsrc="images/big3.jpg" /></li> 
<li><img src="images/s4.jpg" bigsrc="images/big4.jpg" /></li> 
<li><img src="images/s5.jpg" bigsrc="images/big5.jpg" /></li> 
<li><img src="images/s6.jpg" bigsrc="images/big6.jpg" /></li> 
<li><img src="images/s7.jpg" bigsrc="images/big7.jpg" /></li> 
<li><img src="images/s8.jpg" bigsrc="images/big8.jpg" /></li> 
<li><img src="images/s9.jpg" bigsrc="images/big9.jpg" /></li> 
</ul> 
</div> 
<!--灰色图层--> 
<div class="gray"></div> 
<!--显示大图--> 
<div class="showImg"> 
<img src="images/big1.jpg" class="BigImg" /> 

<img src="images/dirl.png" class="butl" /> 
<img src="images/dirr.png" class="butr" /> 
</div> 

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript"> 
var _bigsrc=null; 
var index=0; 
$("#main ul li").click(function(){ 
//alert("我被点击了!!!"); 
$(".gray").show(); 
$(".showImg").show(); 

_bigsrc=$(this).find("img").attr("bigsrc"); 
//alert(_bigsrc); 
$(".showImg img.BigImg").attr("src",_bigsrc); 

index=$(this).index(); 
//alert(index); 
}); 

//向右切换 
$(".showImg img.butr").click(function(){ 
index++; 
//alert(index); 
if(index<=8){ 
_bigsrc=$("#main ul li").eq(index).find("img").attr("bigsrc"); 
$(".showImg img.BigImg").attr("src",_bigsrc); 
}else{alert("右边到头了"); index=8;} 
}); 

//向左切换 
$(".showImg img.butl").click(function(){ 
index--; 
//alert(index); 
if(index>=0){ 
_bigsrc=$("#main ul li").eq(index).find("img").attr("bigsrc"); 
$(".showImg img.BigImg").attr("src",_bigsrc); 
}else{alert("左边到头了");index=0;} 
}); 

$(".gray").click(function(){ 
$(this).hide(); 
$(".showImg").hide(); 

}); 

</script> 

</body> 
</html> 


© 著作权归作者所有

共有 人打赏支持
上一篇: android文件管理
下一篇: android小代码
粉丝 0
博文 130
码字总数 120077
作品 0
虹口
私信 提问
51个css时间轴

51个纯css时间轴 51个纯html和css时间轴(包括横向时间轴和纵向时间轴),只有少部分时间轴有用到javascript。 示例和下载代码都在zip文件中。 纵向时间轴 时间轴截图 时间轴 时间轴: HTML ...

左辅
2017/12/21
0
0
jQuery文档: 选择器

#id 概述 根据给定的ID匹配一个元素。 示例 描述: 查找id为“myDiv"的元素。 html代码: jQuery代码: 结果: element 概述 根据给定的元素标签名匹配所有元素。 示例 描述: 查找一个DIV元...

fzyz_abc
2016/09/10
3
0
网站为什么要选择html5?

HTML5是取代HTML40.1和XHTML1.0标准的HTML标准版,与其他版本相比H5可以更好的实现页面表现性能, H5技术如今我们并不陌生了,HTML5都试技术论坛热门话题,给人的感觉就是高大上,时尚,看上...

一名seoer
2017/11/23
0
0
在HTML代码中要如何插入空格?

超文本标记语言(HTML)会自动忽略空格。平常在编写代码的时候,用空格键、Tab键以及回车键产生的空格,都会被HTML自动忽略。那么我们该用什么方法来实现HTML的空格效果呢?有专门的空格代码...

inw3cschool
2017/05/03
0
0
Android中WebView与HTML+Javascript的交互

在现在的Android开发中,很多的商业项目特别是电商项目使用了Android原生控件与WebView进行混合开发,当然不仅仅就是显示一个WebView那么简单,有时候还需要本地Java代码与HTML中的Javascrip...

SilenceOO
2017/10/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

IOC的学习(1)

1.IOC理论概要 java中,一个对象A怎么才能调用对象B? 当一个对象的构建,需要多个其他对象时,对象和对象有复杂的构建关系。spring帮助我们维系对象的依赖关系,降低系统的实现成本,前提是...

杨健-YJ
21分钟前
1
0
Spring 的 getBean 方法源码解析

文本将从以下几个方面介绍 相关文章 FactoryBean 接口 BeanFactory 接口 BeanFactory 接口 和 FactoryBean 接口的区别 getBean 方法的源码解析 Spring 循环依赖的解决方式 相关文章 Spring 中...

TSMYK
24分钟前
0
0
李鸿章六百多字参倒豪门重臣,晚清第一奏折,藏尽顶级权谋话术!

道光二十七年(1847年),二十四岁的李鸿章高中进士,列二甲第十三名。 在此期间,有桩轶事挺有意思。 会试时,李鸿章的房师为当时的名士孙锵鸣。发榜后,孙锵鸣见自己这一房只考中了李鸿章、...

乔老哥
30分钟前
1
0
PTA-基础编程题目集-7-14 求整数段和

给定两个整数A和B,输出从A到B的所有整数以及这些数的和。 输入格式: 输入在一行中给出2个整数A和B,其中−100≤A≤B≤100,其间以空格分隔。 输出格式: 首先顺序输出从A到B的所有整数,每...

niithub
31分钟前
4
0
Spring Qualifier的使用

摘要 spring 的 qualifier 平常使用一般直接是使用id 来限定,不过spring给我们提供了更强大的功能。 使用方法 直接使用 直接在@Qualifier中限定bean的id 在bean上使用@Qualifier来指定后续使...

52iSilence7
33分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部