[锋利JQ]-图片提示效果
2015-09-12 22:36
190 查看
新知识点:
在HTML-Dom中 "style" 属性,是所有HTML标签共有的一个对象属性,这个对象属性可以为元素设置内嵌样式。
style是元素的属性,但是它自身则是一个对象,其写法主要有两点:
· 如果CSS样式没有中划线,则可以直接写成:
· 如果CSS样式是有中划线的,则写成:
代码:
HTML:
CSS:
Jquery:
在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'; }) })
相关文章推荐
- Android 学习第15课,Android 开发的单元测试、及输出错误信息
- Oracle DBA神器之Toad
- 马哥linux+python——2015年9月10日课程作业
- 数据挖掘——贝叶斯公式与朴素贝叶斯分类
- Oracle DBA神器之Toad
- 行动
- Swift 编程语言入门教程
- ZOJ 3829 Known Notation(贪心)
- HashMap解决hash冲突的方法
- 用Javascript实现图片的缓慢缩放效果
- RegexOptions.Compiled性能
- Effective C++ —— 设计与声明(四)
- 欢迎使用CSDN-markdown编辑器
- Unity3D笔记第五天——Animation动画
- 经典算法之-----动态规划
- 北大ACM3041——Asteroids~~最小顶点覆盖问题
- mysql命令记录
- codeforces 264B B. Good Sequences(dp+数论)
- 1.4 git和github -4:开源项目协作
- 【转载】HTTP 头部解释