Menu
Woocommerce Menu

js动态切换图片的方法,方法用法实例

0 Comment

本文实例讲述了jQuery中offset()方法用法。分享给大家供大家参考。具体分析如下:

本文实例讲述了js动态切换图片的方法。分享给大家供大家参考。具体实现方法如下:

1.区分大小写

此方法返回或设置所匹配元素相对于document对象的偏移量。

index.css文件如下:

javascript中,变量、函数、运算符都区分大小写。

语法结构一:

复制代码 代码如下:

2.弱类型变量

复制代码 代码如下:

* { 
    margin: 0px;padding: 0px; 

 
body { 
    width: 632px; 
    /*background-color: blue;*/ 
    margin: 0 auto; 

 
#imgsCom { 
    background-color: yellow; 
    /*相对定位,为了下层可以使用绝对定位时以本div的原点为原点*/ 
    position: relative; 

 
#ulnav{ 
    list-style-type: none; 
    
    position: absolute; 
    /*使用以imgsCom为原点来绝对定位到右下角*/ 
    bottom: 0px; 
    right: 0px; 

#ulnav li{ 
    list-style-type: none; 
    float: left; 
    background-color: black; 
    color: white; 
    margin-right: 5px; 
    width: 20px; 
    height: 20px; 
    line-height: 20px; 
    text-align: center; 
    cursor: pointer; 
}

定义变量只用 “var”关键字

$(selector).offset()

index.html如下:

复制代码 代码如下:

获取匹配元素在当前document的相对偏移。
返回的对象包含两个整型属:top和left。
此方法只对可见元素有效。

复制代码 代码如下:

var age = 25;
var myscholl = “sanxiao”;
var mal = true;

实例代码:

<!DOCTYPE html> 
<html xmlns=”; 
<head> 
    <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /> 
    <title>js,css动态切换图片</title> 
    <link href=”css/index.css” rel=”stylesheet” /> 
    <script type=”text/javascript”> 
 
        function gel(id) { 
            return document.getElementById(id); 
        } 
 
        function  clearLiBg() { 
            var mylis = gel(“ulnav”).childNodes; 
            for (var i = 0; i < mylis.length; i++) { 
                if (mylis[i].nodeType == 1) { 
                    mylis[i].style.backgroundColor = “black”; 
                } 
            } 
        } 
       
        window.onload = function() { 
            //给三个li都指定一个属性 
            var lis = gel(“ulnav”).childNodes; 
            for (var i = 0; i < lis.length; i++) { 
                if (lis[i].nodeType == 1) { 
                    lis[i].onclick = function () { 
                        //更换图片 
                        gel(“myimg”).setAttribute(“src”, “images/” +
this.innerHTML + “.png”); 
                        //所有LI颜色复原 
                        clearLiBg(); 
                        //更换LI背景标签颜色 
                        this.style.backgroundColor = “silver”; 
                    }; 
                } 
            } 
        }; 
    </script> 
</head> 
<body> 
    <div id=”imgsCom” style=”width: 632px; height: 412px;”> 
        <img src=”images/1.png” id=”myimg” style=”width: 632px;
height: 412px; ” /> 
        <ul id=”ulnav”> 
            <li>1</li> 
            <li>2</li> 
            <li>3</li> 
        </ul> 
    </div> 
</body> 
</html>

3.每行结尾的分号可有可无

复制代码 代码如下:

希望本文所述对大家的javascript程序设计有所帮助。

4.括号用于代码块

<!DOCTYPE html>
<html>
<head>
<meta charset=” utf-8″>
<meta name=”author” content=”//www.jb51.net/” />
<title>offset()函数-脚本之家</title>
<style type=”text/css”>
*{
  margin:0px;
  padding:0px;
}
.father{
  border:1px solid black;
  width:400px;
  height:300px;
  padding:10px;
  margin:50px;
}
.children{
  height:150px;
  width:200px;
  margin-left:50px;
  background-color:green;
}
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
  $(“button”).click(function(){
     a=$(“.children”).offset();
     alert(“元素的偏移量坐标是:”+a.top+”|”+a.left+””);
   })
})
</script>
</head>
<body>
<div class=”father”>
  <div class=”children”></div>
</div>
<button>获取元素的坐标</button>
</body>
</html>

您可能感兴趣的文章:

  • 原生JS实现隐藏显示图片
    JS实现点击切换图片效果
  • js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
  • JavaScript实现自动切换图片代码
  • JavaScript简单实现鼠标移动切换图片的方法
  • 图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
  • js实现使用鼠标拖拽切换图片的方法
  • JS鼠标滑过图片时切换图片实现思路
  • 使用JavaScript实现点击循环切换图片效果

代码示例

以上代码可以弹出子div相对于document的偏移量。

复制代码 代码如下:

语法结构二:

 <!DOCTYPE html>
 <html>
 <head lang=”en”>
     <meta charset=”UTF-8″>
     <title></title>
     <script language=”javascript”>
         var school = “beijiang”;
         document.write(school);
     </script>
 </head>
 <body>
 </body>
 </html>

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图