<!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=utf-8" />
<title>图片框</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
div{
background: url(im.jpg);
}
</style>
</head>

<body>
<script type="text/javascript">
for(i=0;i<7;i++){
for(j=0;j<8;j++){
var div=document.createElement('div');
document.body.appendChild(div);

div.style.width='80px';
div.style.height='80px';
//div.style.background='black';
div.style.position='absolute';

div.style.left=j*80+'px';
div.style.top=i*80+'px';
div.style.backgroundPosition =-j*80+'px '+(-i*80) +'px';

div.style.border='1px solid white';
div.style.opacity=0;
div.onmouseover=function(){
this.style.opacity=1;
}
}
}

</script>

</body>
</html>

　　

javascript,图片框的更多相关文章

  1. javascript图片切换

    JavaScript 图片滑动切换效果 作者:cloudgamer 时间: 2009-09-25 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript 图片滑动切换效果 [1] 第 2 页 ...

  2. 【荐】JavaScript图片放大技术（放大镜）示例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  4. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  5. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

  6. javascript - 图片的幻灯片效果

    javascript 代码: <script type="text/javascript"> function select_play() { var select_p ...

  7. Javascript图片预加载详解 分类： JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  8. javascript 文本框值变化触发事件

    javascript 文本框值变化触发事件jo.find(".price").bind('input onpropertychange', function () { me.cal ...

  9. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

随机推荐

  1. 使用K2时提示未能加载文件或程序集Microsoft.IdentityModel等

    转:http://www.cnblogs.com/dannyli/archive/2012/10/15/2724931.html K2安装成功后,打开workspace管理流程时报错如下图: 未能加载 ...

  2. Tornado 高并发源码分析之六---异步编程的几种实现方式

    方式一:通过线程池或者进程池 导入库futures是python3自带的库,如果是python2,需要pip安装future这个库 备注:进程池和线程池写法相同 from concurrent.fut ...

  3. USACO2.1.3 三值排序

      Description 排序是一种很频繁的计算任务.现在考虑最多只有三值的排序问题.一个实际的例子是,当我们给某项竞赛的优胜者按金银铜牌序的时候. 在这个任务中可能的值只有三种1,2和3.我们用交 ...

  4. Vulkan Tutorial 10 图形管线

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 通过接下来的章节,我们将会开启有关图形管线的话题,通过对图 ...

  5. Vulkan Tutorial 09 图像与视图

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 使用任何的VkImage,包括在交换链或者渲染管线中的,我们都需要创建VkImage ...

  6. hive自带的字符串函数

    1. 字符串长度函数:length 语法: length(string A) 返回值: int 说明:返回字符串A的长度 举例: hive> select length('abcedfg') f ...

  7. 【278】◀▶ Python 数学函数说明

    参考:Python 数学函数说明 目录: 一.Python 数学函数 二.Python 随机数函数 三.Python 三角函数 四.Python 数学常量 一.Python 数学函数   函数 返回值 ...

  8. 【bzoj3942】[Usaco2015 Feb]Censoring

    [题目大意] 有一个S串和一个T串,长度均小于1,000,000,设当前串为U串,然后从前往后枚举S串一个字符一个字符往U串里添加,若U串后缀为T,则去掉这个后缀继续流程. [样例输入] whatth ...

  9. https://github.com/ildoonet/tf-pose-estimation

    https://github.com/ildoonet/tf-pose-estimation

  10. 虚拟机ubuntu18.04设置静态IP

    说明: 网关:192.168.8.2 待设置静态IP:192.168.8.25 1.编辑:vi /etc/netplan/01-network-manager-all.yaml 打开以后内容如下: # ...