文档章节

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> 


© 著作权归作者所有

共有 人打赏支持
粉丝 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

没有更多内容

加载失败,请刷新页面

加载更多

同样是工作3年程序员,为什么别人每月25K你却只有15K?

你有没有静下心来思考过:同样是做了x年Java开发,为什么你的技术比别人差很多?为什么别人每月26K你却只有15K? 其实技术水平的高低和个人智商关系不大(毕竟能做Java编程开发大家都不会差)...

Java填坑之路
8分钟前
0
0
跨域问题:解决跨域的三种方案

当前端页面与后台运行在不同的服务器时,就必定会出现跨域这一问题,本篇简单介绍解决跨域的三种方案,部分代码截图如下,仅供参考: 方式一:使用ajax的jsonp 前端代码 服务器代码 使用该方...

rechardchensir
8分钟前
0
0
linux学习-1012

8.6 管道符和作业控制 8.7/8.8 shell变量 8.9 环境变量配置文件 扩展 bashrc和bash_profile的区别 http://ask.apelearn.com/question/7719 简易审计系统: http://www.68idc.cn/help/server/...

wxy丶
9分钟前
0
0
springboot dubbo 在程序初始化完成前 使用回声测试对服务依赖检测

<dubbo:consumer timeout="10000" check="false" /><dubbo:service delay="-1" /> @Component@Order(2)public class PrkServiceInit implements ApplicationListener {private Logge......

林伟琨
11分钟前
0
0
“网红架构师”解决你的Ceph 运维难题

Q1. 环境预准备 绝大多数MON创建的失败都是由于防火墙没有关导致的,亦或是SeLinux没关闭导致的。一定一定一定要关闭每个每个每个节点的防火墙(执行一次就好,没安装报错就忽视): CentOS s...

编程SHA
14分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部