[锋利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';
       })
   })

 

　　

 

转载于:https://www.cnblogs.com/HCJJ/p/4803774.html