[锋利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

[锋利JQ]-图片提示效果相关推荐

图片提示效果（jquery）
思路: 1.当鼠标滑入超链接:创建一个div元素,div元素的img为a的或href 内容为title的值讲创建的元素追加到文档中,为它设置X坐标和y坐标,使他显示在鼠标位置的旁边. 2当 ...
jquery图片提示效果
如图所示是我的效果! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
jQuery图片提示和文字提示
图片提示: 效果如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
JQuery实现超链接和图片提示预览效果
文章目录超链接提示效果 html css jQuery部分解决问题1 解决问题2 解决问题3 完整jQuery代码图片预览 html css jQuery代码实现效果其实现在的浏览器已经具 ...
jQuery 学习笔记之九 (jQuery 图片提示 )
案例研究网站的超链接和图片提示1.超级链接提示效果浏览器已经自带了超级链接提示,只需要在超链接中加入title属性就可以了.HTML 代码如下:<a href="#" ti ...
html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
layui单元格鼠标样式_Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法...
如下所示: var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/par ...
SweetAlert – 替代 Alert 的漂亮的提示效果
Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒.另外提 ...
php图片滑动的属性,JavaScript_javascript图片滑动效果实现，本文为大家分享了javascript图片 - phpStudy...
javascript图片滑动效果实现本文为大家分享了javascript图片滑动效果实现方法,具体内容如下,先看一下效果图: 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作D ...

[锋利JQ]-图片提示效果

[锋利JQ]-图片提示效果相关推荐

最新文章

热门文章