[锋利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:;height:;font-size:;content:'';clear:both;}
.clearfix{*zoom:;}
.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';
})
})
[锋利JQ]-图片提示效果的更多相关文章
- [锋利的JQ]-超链接提示效果
关键知识点: 1.事件对象:当事件一旦被触发,事件对象便会创立.事件对象只能作用于该事件的事件处理程序. 2.认识了mousemove事件了连续触发执行的特性. 代码: HTML: <div c ...
- 《锋利的JQuery》中重写超链接与图片提示效果
代码部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...
- jQuery图片提示和文字提示
图片提示: 效果如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- DOM操作在jQuery中的实用------文字提示和图片提示
关于文字提示想必是家喻户晓,操作呢说简单一点就是在超链接中加入title属性.但是在人机交互越来越倍受恩宠的年代,依靠浏览器自带的文字提示即title属性,提示效果的响应速度就(还是人艰不拆了吧~)s ...
- JavaScript函数实现鼠标指向后带图片的提示效果
转载:http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html 当我们在写一个网页程序的时候,很多方法可以提供页面的动态显示,从 ...
- 炫!一组单元素实现的 CSS 加载进度提示效果
之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...
- SweetAlert – 替代 Alert 的漂亮的提示效果
Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒.另外提 ...
- JS实现有点炫的图片展示效果-图片解体和组合
经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
随机推荐
- 【转】MySQL性能优化的21个最佳实践
今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序员需要去关注的事情.当我们去设计数据库表结构,对操作数据 ...
- linux 2.6 驱动笔记(二)
字符设备驱动 linux 2.6的字符驱动由cdev结构体描述,具体参考globalmem例子,代码主要分以下几部分: 1. 定义一个字符类型设备驱动的结构体 struct globalmem_dev ...
- HTML5文件上传插件 Huploadify V2.1发布
月初发布了HUploadify2.0版本,增加了文件的断点续传功能,得到了不少朋友的好评.本着按照Uploadify原样复制的原则,本次在一些朋友的建议中采纳了几点,做了一次较小的改动,定为2.1版本 ...
- Gradle中的buildScript代码块
在编写Gradle脚本的时候,在build.gradle文件中经常看到这样的代码: build.gradle 1 2 3 4 5 6 7 8 9 buildScript { repositories ...
- 我心中的核心组件(可插拔的AOP)~第十五回 我的日志组件Logger.Core(策略,模版方法,工厂,单例等模式的使用)
回到目录 之前的讲过两篇关于日志组件的文章,分别是<第一回 日志记录组件之自主的Vlog>和<第三回 日志记录组件之log4net>,而今天主要说一下我自己开发的另一种日志 ...
- struts2学习笔记之八:Action中方法的动态调用
方法一:action名称+!+方法名称+后缀 Action类中增加addUser()和delUser()方法, package com.djoker.struts2; import org.apach ...
- iOS-数据解析XML解析的多种平台介绍
在iPhone开发中,XML的解析有很多选择,iOS SDK提供了NSXMLParser和libxml2两个类库,另外还有很多第三方类库可选,例如TBXML.TouchXML.KissXML.Tiny ...
- 使用动态类型dynamic让你的省了很多临时类
客户端与服务端的数据交互使用的数据格式是json格式,为了使客户端与服务端有类对应关系,进行序列化,所以总要定义一些类,使用动态类型dynamic可以不必要定义那么多类. 测试代码: using Sy ...
- 无法启动此程序,因为计算机中丢失AdbWinApi.dll。尝试重新安装该程序以解决此问题
第一次搭建android开发环境,装完adb以后,打开DOS验证安装是否成功:但输入adb logcat调试时,系统弹出以下异常的对话框: 无法启动此程序,因为计算机中丢失AdbWinApi.dll. ...
- 史上最全github使用方法:github入门到精通
[初识Github]首先让我们大家一起喊一句“Hello Github”.YEAH!就是这样. 原文 http://www.eoeandroid.com/thread-274556-1-1.htmlG ...