<!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. Element-UI使用基本介绍

    Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是Mint UI . 开发环境 1.安装webpack npm install -g webp ...

  2. Java调用Webservice(asmx)的几个例子

    Java调用Webservice(asmx)的几个例子 2009-06-28 17:07 写了几个调用例子: 1. import org.apache.axis.client.*;import org ...

  3. Oracle字符集的查看查询和Oracle字符集的设置修改（转）

    最近郁闷的字符集2014年7月31日16:32:58 本文主要讨论以下几个部分:如何查看查询oracle字符集. 修改设置字符集以及常见的oracle utf8字符集和oracle exp 字符集问题 ...

  4. Spring MVC的配置

    一.添加依赖 <dependency> <groupId>org.springframework</groupId> <artifactId>sprin ...

  5. 用Golang为Python编写模块

    Go里面需要显示的引入C模块, 让编译器支持生成动态链接库, 并且在代码中可以使用C语言的数据类型,这个至关重要. Calling Go code from Python code 摘取一个最简单例子 ...

  6. sqlserver 把SELECT结果集中一列的所有的值 用逗号隔开放进一个字段内

    首先我们有一个表 查询结果如下: 现在我们想要把USER_NAME这一列的内容 放到一个字段里面去: 一行sql语句解决问题: SELECT STUFF(( SELECT ',' +convert(V ...

  7. IDEA启动缓慢且运行卡顿

    最近在自己的机器上用IDEA时启动竟然要半分钟,且启动后索引操作居然还需要等待很久.并且每次通过IDEA执行JAVA项目在启动和关闭时都会发生卡顿.明明机器的配置不错,这是为啥呢? 这是因为为IDEA ...

  8. mysql 基本操作 alter

    查看数据库 show  databases; 新建数据库 命令 create database 库名字. 选择数据库 use  2016test; 创建表:create table 表名(字段1,2, ...

  9. 微信小程序怎么获取用户输入

    能够获取用户输入的组件,需要使用组件的属性bindchange将用户的输入内容同步到 AppService. <input id="myInput" bindchange=& ...

  10. WordPress 4.1去掉侧边栏“功能”小工具中WordPress.Org

    打开wp-includes/default-widgets.php,注释掉第398到第403行 echo apply_filters( 'widget_meta_poweredby', sprintf ...