文档章节

html小代码

 易水寒521
发布于 2015/04/15 15:39
字数 408
阅读 3
收藏 0
点赞 0
评论 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
博文 129
码字总数 120077
作品 0
虹口
51个css时间轴

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

左辅 ⋅ 2017/12/21 ⋅ 0

jQuery文档: 选择器

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

fzyz_abc ⋅ 2016/09/10 ⋅ 0

Android中WebView与HTML+Javascript的交互

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

SilenceOO ⋅ 2017/10/18 ⋅ 0

JQuery中html、append、appendTo、after、insertAfter系列方法

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

告别只是另一种体验 ⋅ 2015/11/06 ⋅ 0

go语言解析html

有两个不错的库: https://github.com/PuerkitoBio/goquery 一个是 http://code.google.com/p/go.net/html html是html的解析器,把html文本解析出来,goquery基于html包,在此基础上结合cas...

nop4ss ⋅ 2015/08/06 ⋅ 0

jQuery中,html、val与text的区别与联系

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

quincuntial ⋅ 2016/11/22 ⋅ 0

你不可不知的HTML优化技巧

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

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

Android WebView:我是怎么和 JavaScript 互撩的?

Demo动图演示 动图镇楼,演示功能点的顺序是:5-1-2-3-4 怎么生成我们需要的 HTML 页面? 当我们get了WebView 和 JavaScript交互的技能时,准备跃跃欲试的时候,就会对这个被这个问题搞懵逼了...

3kqing ⋅ 2016/09/07 ⋅ 0

在HTML代码中要如何插入空格?

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

inw3cschool ⋅ 2017/05/03 ⋅ 0

网站为什么要选择html5?

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

一名seoer ⋅ 2017/11/23 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 42分钟前 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

MVC——统一报文格式的异常处理响应

在我们写controller层的时候,常常会有这样的困惑,如果需要返回一个数据是,可能为了统一回去构造一个类似下列的数据格式: { status:true, msg:"保存成功!", data:[]} 而且在写...

alexzhu592 ⋅ 昨天 ⋅ 0

[知乎]SSH框架

网上图书馆管理系统包括管理员管理和图书管理,图书借阅,查询模块等等,网上商城包括前台页面和后台管理页面,两个都是以前别人的实际项目,只是别人用的不是SSH,我把他们改用SSH了,除了S...

颖伙虫 ⋅ 昨天 ⋅ 0

android -------- 打开本地浏览器或指定浏览器加载,打电话,打开第三方app

开发中常常有打开本地浏览器加载url或者指定浏览器加载, 还有打开第三方app, 如 打开高德地图 百度地图等 在Android程序中我们可以通过发送隐式Intent来启动系统默认的浏览器。 如果手机本身...

切切歆语 ⋅ 昨天 ⋅ 0

linux 安装docker

通过以下命令下载安装docker wget -qO- https://get.docker.com | sh 执行以上命令后输出以下内容说明安装成功,注意红框中的内容,docker安装成功后默认只有root能使用,红框中给出的提示是...

haoyuehong ⋅ 昨天 ⋅ 0

482. License Key Formatting - LeetCode

Question 482. License Key Formatting Solution 思路:字符串转化为char数组,从后遍历,如果是大写字母就转化为小写字母,如果是-就忽略,如果遍历了k个字符(排除-)就追加一个-。 Java实现...

yysue ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部