当鼠标移动到小图片上时，小图片显示红色边框并在上面大图片显示相应大图片，效果如图：

<!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">

#div{width:500px;height:500px;border:1px solid #fff

;margin:auto;background:#fff}

li{list-style:none;float:left;margin-top:-15px;margin-left:50px}

</style>

</head>

<body>

<div id="div">

<div style="width:350px;height:262px;border:1px solid #fff

;margin:

auto;">

  <img src="data:images/show1_big.jpg" width="" height="" /> </div>

<div style="width:500px;height:50px;border:1px solid #fff

;margin-top:180px">

<!--ul开始-->

<ul>

  <li><img src="data:images/show1.jpg" width="" height="" onmouseover="change()"/> </li>

  <li><img onmouseover="change1()" src="data:images/show2.jpg" width="" height="" /> </li>

  <li><img src="data:images/show3.jpg" width="" height="" onmouseover="change2()"/> </li>

  <li><img src="data:images/show4.jpg" width="" height="" onmouseover="change3()" /> </li>

  </ul>

            <!--ul结束-->

  </div>

</div>

</body>

<script type="text/javascript">

//定义

function kuang(){

    var getli=document.getElementsByName("li");

    for(var i=;i<getli.length;i++){

        }

    }

          //定义替换图片方法

function change(){

    var imgs=document.getElementsByTagName("img");

    imgs[].setAttribute("src","images/show1_big.jpg");

    imgs.style.width="border:1px solid red";

    }

     //定义替换图片方法

    function change1(){

    var imgs=document.getElementsByTagName("img");

    imgs[].setAttribute("src","images/show2_big.jpg");

    }

     //定义替换图片方法

        function change2(){

    var imgs=document.getElementsByTagName("img");

    imgs[].setAttribute("src","images/show3_big.jpg");

    }

     //定义替换图片方法

    function change3(){

    var imgs=document.getElementsByTagName("img");

    imgs[].setAttribute("src","images/show4_big.jpg");

    }

</script>

</html>

JavaScript+CSS交互的更多相关文章

  1. jQuery基础与JavaScript与CSS交互-第五章

    目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 Ajax Sliverlight Fle ...

  2. C# WinForm 和 javascript进行交互 使用HTML做界面

    01 using System; 02 using System.Collections.Generic; 03 using System.Text; 04 using System.Reflecti ...

  3. JavaScript CSS Style属性对照表

    JavaScript CSS Style属性对照表 盒子标签和属性对照 CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border border border-bottom ...

  4. 【HANA系列】SAP HANA XS使用JavaScript数据交互详解

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...

  5. C# windows程序应用与JavaScript 程序交互实现例子

    C# windows程序应用与JavaScript 程序交互实现例子 最近项目中又遇到WinForm窗体内嵌入浏览器(webBrowser)的情况,而且涉及到C#与JavaScript的相互交互问题, ...

  6. javascript/css压缩工具---yuicompressor使用方法

    1. 下载 地址:https://github.com/yui/yuicompressor/downloads 2. 安装 yuicompressor是由java写成的一组jar文件,需要jdk环境支 ...

  7. JavaScript ,Css and Jquery In OpenERP 7.0

    From: http://openerpbay.blogspot.jp/2013/02/javascript-css-and-jquery-in-openerp-70.html Hi fellows, ...

  8. 2017.9.24 基于HTML+JavaScript+CSS的开发案例&&JavaScript+CSS+DIV实现表格变色

    1.JavaScript+CSS+DIV实现下拉菜单 1.1 层标签<div> 基本语法: <div id="层编号" style="position: ...

  9. 【ActionScript】Flash与网页的交互，ActionScript与JavaScript的交互

    Flash是可以轻松与网页交互数据的,不然为何Flash会有这么大的生命力呢?仅仅是这样编程比較麻烦而已,又要调试Flash,然后又要放到server上调试. 只是这种方式可以收到非常好的效果.Fla ...

随机推荐

  1. Huawei-R&S-网络工程师实验笔记20190524-VRP的系统、接口视图下基本操作

    >Huawei-R&S-网络工程师实验笔记20190524-VRP的系统.接口视图下基本操作(重命名.配置IP.VLAN接口.双工模式.console口) >>实验开始,先上 ...

  2. hadoop2.3.0cdh5.0.2 升级到cdh5.7.0

    后儿就放假了,上班这心真心收不住,为了能充实的度过这难熬的两天,我决定搞个大工程.....ps:我为啥这么期待放假呢,在沙发上像死人一样躺一天真的有意义嘛....... 当然版本:hadoop2.3. ...

  3. selenium动作链

    简介 一般来说我们与页面的交互可以使用Webelement的方法来进行点击等操作. 但是,有时候我们需要一些更复杂的动作,类似于拖动,双击,长按等等. 这时候就需要用到我们的Action Chains ...

  4. [tsA1491][2013中国国家集训队第二次作业]家族[并查集]

    m方枚举,并查集O(1)维护,傻逼题,,被自己吓死搞成神题了... #include <bits/stdc++.h> using namespace std; struct tri { i ...

  5. PatentTips - DMA address translation between peer-to-peer IO devices

    BACKGROUND As processing resources have increased, demands to run multiple software programs and ope ...

  6. Spring MVC-表单（Form）标签-文件上传（File Upload）示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_upload.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显 ...

  7. 查看OS 各项参数

    查看CPU 在linux下 cat /proc/cpuinfo 可以得到CPU信息. 要注意的是CPU型号有不同的种类比如AMD Intel.可能在这个文件中显示的信息也不同.但终归是存在这个文件中的 ...

  8. RxJava资料整理

    RxJava资料整理 https://www.jianshu.com/p/e3c4280ce397 http://www.daidingkang.cc/2017/05/19/Rxjava/ http: ...

  9. VB.NET机房收费 &amp; 抽象工厂模式

    学习设计模式的时候,提到了一个专门訪问数据库的模式-抽象工厂模式,记得当时举样例理解的时候并未设计到数据库,仅仅是大概了了解了一下,如今对于机房收费系统涉及到了数据库的管理,借此机会好好学习一下.用常 ...

  10. codeforces 437D The Child and Zoo

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...