• 函数传参,改变Div任意属性的值&&图片列表:鼠标移入/移出改变图片透明度


    <!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>函数传参,改变Div任意属性的值</title>
    <style>
    body,p{margin:0;padding:0;}
    body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;}
    #outer{300px;margin:0 auto;}
    p{margin-bottom:10px;}
    button{margin-right:5px;}
    label{5em;display:inline-block;text-align:right;}
    input{padding:3px;font-family:inherit;border:1px solid #ccc;}
    #div1{color:#fff;180px;height:180px;background:#000;margin:0 auto;padding:10px;}
    </style>
    <script>
    var changeStyle = function (elem, name, value) {
        elem.style[name] = value    
    }
    window.onload = function ()
    {    
        var oDiv = document.getElementById("div1");
        var oBtn = document.getElementsByTagName("button");
        var oInput = document.getElementsByTagName("input");
        oBtn[0].onclick = function ()
        {
            changeStyle(oDiv, oInput[0].value, oInput[1].value)    
        },
        oBtn[1].onclick = function ()
        {
            oDiv.removeAttribute("style")
        }
    }
    </script>
    </head>
    <body>
    <div id="outer">
        <p><label>属性名:</label><input type="text" value="background" /></p>
        <p><label>属性值:</label><input type="text" value="blue" /></p>
        <p><label></label><button>确定</button><button>重置</button></p>
    </div>
    <div id="div1">在上方输入框输入"属性名"及"属性值",点击确定按钮查看效果。</div>
    </body>
    </html>

    图片列表:鼠标移入/移出改变图片透明度

    <!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>
    ul,li{margin:0;padding:0;list-style-type:none;}
    #imgList{700px;overflow:hidden;zoom:1;border:1px solid #333;margin:0 auto;padding:0 0 10px 10px;}
    #imgList li{float:left;128px;height:128px;border:1px solid #ccc;margin:10px 10px 0 0;}
    #imgList li img{float:left;opacity:0.3;cursor:crosshair;filter:alpha(opacity=30);}
    #imgList li.current img{opacity:1;filter:alpha(opacity=100);}
    </style>
    <script>
    window.onload = function ()
    {
        var oLi = document.getElementsByTagName("li");    
        for (var i = 0; i < oLi.length; i++)
        {
            oLi[i].onmouseover = function ()
            {
                this.className = "current"    
            };
            oLi[i].onmouseout = function ()
            {
                this.className = ""    
            }
        }
    }
    </script>
    </head>
    <body>
    <ul id="imgList">
        <li><img src="img/1.jpg" /></li>
        <li><img src="img/2.jpg" /></li>
        <li><img src="img/3.jpg" /></li>
        <li><img src="img/4.jpg" /></li>
        <li><img src="img/5.jpg" /></li>
        <li><img src="img/6.jpg" /></li>
        <li><img src="img/7.jpg" /></li>
        <li><img src="img/8.jpg" /></li>
        <li><img src="img/9.jpg" /></li>
        <li><img src="img/10.jpg" /></li>
    </ul>
    </body>
    </html>
  • 相关阅读:
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    Spring框架——AOP面向切面编程
    Spring学习
    面试题整理
    Java Web前端到后台常用框架介绍
    【Oracle】SQL/92 执行多个表的连接
    什么是持久化?
  • 原文地址:https://www.cnblogs.com/mayufo/p/4474948.html
Copyright © 2020-2023  润新知