<!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. SpringMVC 接收表单数据的方式

    1.@RequestParam @RequestMapping(value = "/xxxx.do") public void create(@RequestParam(value ...

  2. 清除苹果手机input的默认样式

    在手机端上写了一个页面,按钮的地方是用input标签button按钮,给的是绿色的背景颜色,在安卓手机上显示正常,在苹果手机上显示不正常,如下图 解决办法: css加上下面这一行代码就可以了,inpu ...

  3. Timer的定义及demo

  4. Perl 数据类型：标量、数组、哈希

    Perl 数据类型Perl 是一种弱类型语言,所以变量不需要指定类型,Perl 解释器会根据上下文自动选择匹配类型. Perl 有三个基本的数据类型:标量.数组.哈希.以下是这三种数据类型的说明: 序 ...

  5. C#连接Mysql数据库 MysqlHelper.cs文件

    mysql.data.dll下载_c#连接mysql必要插件mysql.data.dll是C#操作MYSQL的驱动文件,是c#连接mysql必要插件,使c#语言更简洁的操作mysql数据库.当你的电脑 ...

  6. 如何撤回经由Outlook2016刚发出的邮件

    在Outlook2016中,刚发出了一封邮件,发现有问题,想撤回,如何处理? 在对方尚未查看和接收时,可撤回. 参考步骤 1.选中这封邮件,用鼠标双击打开 2.点Move旁边的下拉按钮 3.点击&qu ...

  7. export default {} 和new Vue()区别

     1.export default 的用法:相当于提供一个接口给外界,让其他文件通过 import 来引入使用. 而对于export default 和export的区别:  在JavaScript ...

  8. Entity Framework 6.0 Tutorials（10）：Index Attribute

    Index Attribute: Entity Framework 6 provides Index attribute to create Index on a particular column ...

  9. 函数有一个特殊的属性 prototype！

    JavaScript 中只有对象,没有类. 实际上,JavaScript 才是真正应该被称为「面向对象」的语言,因为它是少有的可以不通过类,直接创建对象的语言. 函数的 prototype 属性 在 ...

  10. URAL 1141. RSA Attack（欧拉定理+扩展欧几里得+快速幂模）

    题目链接 题意 : 给你n,e,c,并且知道me ≡ c (mod n),而且n = p*q,pq都为素数. 思路 : 这道题的确与题目名字很相符,是个RSA算法,目前地球上最重要的加密算法.RSA算 ...