jquery给图片添加鼠标经过时的边框效果
一哥们儿要给图片添加鼠标经过时的边框效果,可惜出发点错了,直接加在了IMG外的A标签上致使 鼠标经过时图片产生塌陷,实则应该将边框控制直接加在IMG标签上即可
错误代码如下:注意红色部分设置 (出发点就错了)
代码如下:
<html>
<head>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#box a").mouseover(function(){
$(this).css("border","1px solid red");
});
$("#box a").mouseout(function(){
$(this).css("border","none");
});
});
</script>
<style>
#box a{ display:block; z-index:1000; width:98px; height:98px;}
</style>
</head>
<body>
<div id="box" style="width:100px; height:100px;">
<a href="#"><img src="erwm.png" border="0" width="99" height="99"/></a>
<a href="#"><img src="erwm.png" border="0" width="99" height="99"/></a>
</div>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#box img").mouseover(function(){
$(this).css("border","1px solid red");
});
$("#box img").mouseout(function(){
$(this).css("border","none");
});
});
</script>
<style>
#box a{ display:block; z-index:1000; width:98px; height:98px;}
</style>
</head>
<body>
<div id="box" style="width:100px; height:100px;">
<a href="#"><img src="erwm.png" border="0" width="99" height="99"/></a>
<a href="#"><img src="erwm.png" border="0" width="99" height="99"/></a>
</div>
</body>
</html>
相关推荐
-
jQuery当鼠标悬停时放大图片的效果实例
这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果.今天就把制作该效果的经验与大家一同分享.先看看最终效果演示: HTML结构部分:先编写一个无序列表的结构,a标签中的img标签用来存放小图片,a标签添加一个rel属性,用来存放大图片的路径. 复制代码 代码如下: <UL id=gallery sizcache="6" sizset="7"> <LI sizcach
-
基于jquery的仿百度的鼠标移入图片抖动效果
1.查看源文件,在查看后很纳闷的发现,此页并没有包含那些奖品信息.这样就断定代码在另一个页面中.于是想当然的以为是用的框架连接的地址.结果没查到,却看到了一个这样的信息: 复制代码 代码如下: <div id ="task-intro-box"><!--活动说明--></div> <div id ="task-awards"><!--活动奖励--></div> <div id ="
-
jquery实现图片跟随鼠标的实例
jquery实现图片跟随鼠标的实例 开发后台写页面困难的一比啊,想写个鼠标移动某连接右侧显示二维码,并跟随鼠标移动的功能,各种查资料,花了一小天终于搞出来了,代码的记下来,浪费了我这么多时间,记你一辈子,这个可以直接在W3School直接运行,可以根据某行显示某个特定的图片,自己定义就行 实现代码: <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"><
-
基于jquery实现的鼠标滑过按钮改变背景图片
复制代码 代码如下: $(document).ready(function () { //按钮样式切换 $("#btFeedBack").hover( function () { $(this).removeClass("btFeed").addClass("btFeedhover"); }, function () { $(this).removeClass("btFeedhover").addClass("btF
-
jquery实现鼠标拖动图片效果示例代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
基于jquery的滚动鼠标放大缩小图片效果
今天要出个鼠标滚动放大缩小图片的功能,看似很简单,从网上一搜,出现的都是onmousewheel的例子,全部只支持IE浏览器,结果查出火狐有对应的DOMMouseScroll来处理这个功能,代码如下,并加上注意的注释项: 复制代码 代码如下: $(function(){ $(".body img").each(function(){ if($.browser.msie){ $(this).bind("mousewheel",function(e){ var e=e|
-
基于jquery实现一张图片点击鼠标放大再点缩小
复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery-1.8.3.min.js"></script> <sc
-
jquery给图片添加鼠标经过时的边框效果
一哥们儿要给图片添加鼠标经过时的边框效果,可惜出发点错了,直接加在了IMG外的A标签上致使 鼠标经过时图片产生塌陷,实则应该将边框控制直接加在IMG标签上即可 错误代码如下:注意红色部分设置 (出发点就错了) 复制代码 代码如下: <html> <head> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></s
-
jquery实现图片列表鼠标移入微动
本效果使用jQuery和CSS实现了图片列表,当鼠标移入时图片向左微动,移出则复原. 其中的jQuery事件使用mouseenter 和 mouseleave ,事件绑定方法使用新推荐的on方法. 代码如下: <!DOCTYPE html> <html> <head><meta name="viewport" content="width=device-width, initial-scale=1" /> <ti
-
C#利用反射技术实现去掉按钮选中时的边框效果
本文实例讲述了C#利用反射技术实现去掉按钮选中时的边框效果.分享给大家供大家参考.具体如下: public void HideFocusCues(Control control) { Type vType = typeof(Control); FieldInfo vFieldInfo = vType.GetField("uiCuesState", BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic |
-
jQuery实现图片渐入渐出切换展示效果
在这之前我们先看看我们要做的效果是什么样的: 我们要图片在过"一定时间"后自动切换,在右下角处有小方块似数字1,2,3,4,这些数字是根据图片的个数自动出现的,当鼠标经过的时候数字颜色有一定的变化: 下面我们来看看具体怎么实现. 第一步:先写简单的html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
-
Python基于pygame实现图片代替鼠标移动效果
本文实例讲述了Python基于pygame实现图片代替鼠标移动效果.分享给大家供大家参考,具体如下: 想想现在学校pygame有几个钟了,就写了一个小程序:图片代替鼠标移动 程序的运行效果: 当鼠标移动到窗口内,鼠标不见了,取而代之的是图片..... 代码部分如下: #pygame first program import pygame from pygame.locals import * from sys import exit __author__ = {'name' : 'Hongten
-
jQuery实现的感应鼠标悬停图片色彩渐显效果
本文实例讲述了jQuery实现的感应鼠标悬停图片色彩渐显效果.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
-
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> <head > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>验证加载顺序</title> <script src=
-
jQuery实现为图片添加镜头放大效果的方法
本文实例讲述了jQuery实现为图片添加镜头放大效果的方法.分享给大家供大家参考.具体如下: 运行效果如下图所示: 主要代码如下: $(function () { $("#img_01").imageLens(); $("#img_02").imageLens({ lensSize: 200 }); $("#img_03").imageLens({ imageSrc: "images/sample01.jpg" }); $(&
随机推荐
- ASP漏洞全接触-高级篇
- 使用正则表达式替换报表名称中的特殊字符(推荐)
- bat批处理一键登录网易163和126邮箱
- 将txt文件名写入文件首行的bat代码(保留源文件)
- 详解Python中的各种函数的使用
- event.srcElement+表格应用
- asp.net(c#)下各种进制间的轻松转换(2进制、8进制、10进制、16进制)
- c语言的cps实现求fibonacci数列示例
- JavaScript中令你抓狂的魔术变量
- Yii2中使用join、joinwith多表关联查询
- 鲜为人知的CSS技巧10则
- js作用域及作用域链概念理解及使用
- Web代理(Asp版)
- SQL Server复制功能要避开缺陷的干扰小结
- [Linux]Mandrake 9.0安装和升级用法
- 探讨:parse url解析URL,返回其组成部分
- as脚本之loadMovie完全实现教程
- js中getBoundingClientRect的作用及兼容方案详解
- JavaScript使用小插件实现倒计时的方法讲解
- 微信小程序常见页面跳转操作简单示例
其他
- 库文件名 易语言 当前文件夹
- vue中前端请求参数去掉空格
- tp5 nginx 需要禁掉那些函数
- pth python 不支持中文
- vue获取下拉框的name和value
- keras 查看每一层网络
- C# Deserialize 去掉null
- vue权限管理按钮显示隐藏
- python 二值图 中心
- dialog隐藏了导航栏,但是被activity挡住了一部分
- 微信小程序 录音按钮
- Springboot 打印原始请求
- vue退出页面时清除鼠标监听事件
- pytorch如何加载标签在图片名上的数据集
- anaconda安装pcl
- corrplot图例颜色
- mac自带Apache apxs2
- uniapp如何传参
- vue中的showToast
- JAVA四行代码制作简单的翻译软件(傻瓜式教程)