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

<!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. Django REST framework - 视图

    目录 Django REST framework 视图GenericAPIView GenericAPIView 例子 属性 混入 具体视图类 自定义基类 Django REST framework ...

  2. Codeforces Hello 2018 C - Party Lemonade

    传送门:http://codeforces.com/contest/913/problem/C 有n类物品,第i(i=0,1,2,...,n-1)类物品的价值为2i,花费为ci.任意选择物品,使得总价 ...

  3. Django——9 博客小案例的实现

    Django  博客小案例的实现 主要实现博客的增删改查功能 主页index.html  -->  展示添加博客和博客列表的文字,实现页面跳转 添加页add.html  --> 输入文章标 ...

  4. Python3-paramiko-SFTP上传文件夹到多台远程服务器

    # coding: utf-8 import paramiko import re import os from time import sleep # 定义一个类,表示一台远端linux主机 # 参 ...

  5. STL在迭代的过程中，删除指定的元素

    直接上Code,上 Picture #include <iostream> #include <list> using namespace std; // STL在迭代的过程中 ...

  6. Android studio 报错 gradel project sync failed Error:Cause: peer not authenticated

    在网上找了半天,应该是找不到gradel的路径,试了网上非常多方法.本人解决例如以下: 在android studio中设置gradle.打开File-> settings->Gradle ...

  7. Oracle 静态监听注冊具体解释

    Oracle 静态监听注冊具体解释 网上有非常多关于oracle 监听静态注冊的文章.但大多都是简单说说,并没有具体的样例.这里,将结合linux as4 下的oracle 10gR2.0.1 举一个 ...

  8. 我对ThreadLocal的理解

    声明:小弟菜狗一个.对ThreadLocal的描写叙述和理解难免有所偏差 近期由于须要深入的了解android的handler消息机制而去查看了Looper的源代码.众所周知在主线程中是不须要在程序猿 ...

  9. canvas制作饼图和环形图，使用Excanvas兼容IE67

    excanvas 地址:http://excanvas.sourceforge.net/ <!DOCTYPE html> <html> <head> <met ...

  10. 循环遍历Java字符串字符的规范方法——类似python for ch in string

    比如我将string作为CNN 文本处理输入: float [] input = new float[maxLength]; // 1 sentence by maxLenWords // int[] ...