zoukankan      html  css  js  c++  java
  • [锋利JQ]-图片提示效果

    新知识点:

     在HTML-Dom中 "style" 属性,是所有HTML标签共有的一个对象属性,这个对象属性可以为元素设置内嵌样式。

      style是元素的属性,但是它自身则是一个对象,其写法主要有两点:

      · 如果CSS样式没有中划线,则可以直接写成:

    Element.style.attributeName
    

        · 如果CSS样式是有中划线的,则写成:

    Element.style.attributeName  //中划线之后的属性首字母要大写
    

    代码:

      HTML:

        <ul class="clearfix">
            <li class="fl"><img src="xiaojiao.jpg" alt="" width="360" height="270"></li>
            <li class="fl"><img src="boluo.jpg" alt="" width="360" height="270"></li>
            <li class="fl"><img src="taozi.jpg" alt="" width="360" height="270"></li>
            <li class="fl"><img src="mangguo.jpg" alt="" width="360" height="270"></li>
        </ul>

      CSS:

    *{margin:0px;padding:0px;list-style:none;}
    .clearfix:after{display:block;line-height:0;height:0;font-size:0;content:'';clear:both;}
    .clearfix{*zoom:1;}
    .fl,.fr{display:inline;}
    .fl{float:left;}
    .fr{float:right;}
    .hide{display:none;}
    
    /* Style -Content- */
    body,html{width: 100%;height: 100%;overflow:hidden;}
    ul li{width: 360px;height: 270px;cursor:pointer;}

      Jquery:

       $(function(){
           $('ul li').mouseover(function(event){
               var imgSource = $(this).find('img').get(0)
               var Odiv = document.createElement('div');
               var Oimg = document.createElement('img');
               Oimg.src=imgSource.src;
               Oimg.alt=imgSource.alt;
               Odiv.id="Odiv"
               Odiv.style.verticalAlign="bottom";
               Odiv.style.position="absolute";
               Odiv.style.left=event.pageX+5+'px';
               Odiv.style.top=event.pageY+5+'px';
               Odiv.appendChild(Oimg)
               document.body.appendChild(Odiv);
           }).mouseout(function(){
               document.body.removeChild(document.getElementById('Odiv'));
           }).mousemove(function(event){
               var Odiv = document.getElementById('Odiv');
               Odiv.style.left=event.pageX+5+'px';
               Odiv.style.top=event.pageY+5+'px';
           })
       })

      

  • 相关阅读:
    js伪数组转数组内部实现
    Vuex核心部分学习参考地址
    vue中让异步代码变成同步的写法
    node.js中文件操作路径和模板标识路径问题
    如果不想安装cnpm又想使用淘宝的服务器来下载,怎么做?
    npm常用命令
    node中模块加载机制
    通过nodejs,简单模拟客户端和服务端进行通信
    vue中非父子组件的传值
    图论1-2
  • 原文地址:https://www.cnblogs.com/HCJJ/p/4803774.html
Copyright © 2011-2022 走看看