文档章节

html小代码

 易水寒521
发布于 2015/04/15 15:39
字数 408
阅读 3
收藏 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> 


© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 130
码字总数 120077
作品 0
虹口
51个css时间轴

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

左辅
2017/12/21
0
0
JQuery中html、append、appendTo、after、insertAfter系列方法

html方法,给元素添加html代码或者清空html代码(参数为空字符串); append向元素的末尾添加html代码; appendTo这个方法跟append方法的很像,只是要添加的html代码的目标有所不一样; afte...

告别只是另一种体验
2015/11/06
0
0
jQuery文档: 选择器

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

fzyz_abc
2016/09/10
3
0
jQuery中,html、val与text的区别与联系

文章作者:Tyan 博客:noahsnail.com | CSDN | 简书 本文主要介绍如何使用jQuery中的html(),text()和val()三种方法,用于读取、修改元素的html结构,元素的文本内容,以及表单元素的value值...

quincuntial
2016/11/22
0
0
你不可不知的HTML优化技巧

如何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置,文件压缩或是调整CSS。 很显然HTML 已经达到了一个瓶颈,尽管它是开发Web 界面必备的核心语言。H...

葡萄城控件技术团队
2016/01/13
135
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Confluence 6 使用 Fail2Ban 来限制登录尝试

什么是 Fail2Ban? 我们需要在我们网站中防止密码的暴利破解。Fail2Ban 是一个 Python 的应用来查看日志文件,使用的是正则表达式,同时还可以与Shorewall (或者 iptables)直接工作来来启用...

honeymose
9分钟前
0
0
日期和时间API - 读《Java 8实战》

日期与时间 LocalDate 创建一个LocalDate对象并读取其值 // 根据年月日创建日期LocalDate date1 = LocalDate.of(2014, 3, 18);// 读取System.out.println(date1.getYear()); // 2014Sys...

yysue
9分钟前
0
0
8月15日任务

8月15日任务 Memcached命令行 • telnet 127.0.0.1 11211 • set key2 0 30 2 ab STORED get key2 VALUE key2 0 2 ab END 实例: [root@localhost 02]# telnet 127.0.0.1 11211-bash: te......

寰宇01
22分钟前
0
0
LNMP架构(Nginx访问日志、Nginx日志切割、静态文件不记录日志和过期时间)

Nginx访问日志 1.打开配置文件,搜索log_format vim /usr/local/nginx/conf/nginx.conf 2.访问日志常用变量含义 $remote_addr : 客户端IP(公网IP) $http_x_forwarded_for : 代理服务器的IP ...

蛋黄_Yolks
22分钟前
0
0
lombok 不用再写pojo的getset

java实体类不写get/set方法 1、下载地址https://projectlombok.org/download Myeclipse、eclipse安装lombok Lombok是一种Java实用工具,可以帮助开发人员消除Java的冗长,具体看lombok的官网...

木之下
29分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部