首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

添加鼠标滑过图片闪烁的js特效-jquery-opacity-rollover

添加鼠标滑过图片闪烁的js特效-jquery-opacity-rollover 作者:matrix 被围观: 1,771 次 发布时间:2013-09-20 分类:Wordpress 兼容并蓄 |...作者:http://h2ham.seesaa.net 实际效果,文字说明: 假设图片被指定加载此js特效。...当鼠标移到图片上的瞬间,图片被蒙上一层白色的半透明层,并且这时白色的半透明层开始以300(代码第5行)毫秒的倒计时自行消失。...js代码: //鼠标滑过图片闪烁 jQuery(document).ready(function(){ // over?...也就是当鼠标移到图片上的瞬间,图片被蒙上一层白色的半透明层,并且白色的半透明层开始以300毫秒的倒计时自行消失。 至于其他的数字什么的我就搞不明白了。在此 笔记~

2.4K30

基本的导航条的制作

分为上下两个部分,上面部分为默认状态,下面黄色部分为鼠标经过的时候的状态。...将首页设置为了超链接状态 首页 标签设置了class=“on”,css样式表中.on{ }里边的设置就一直生效,所以移到其他标签上首页也不还原,想要还原要用到js 4、通过js对导航条进行伸缩变换...改变高度的伸缩 效果图:这里只需改变a:hover鼠标过时候的状态即可 .on,a:hover{ color:#fff; background-color:#f60; height:40px; margin-top...:-10px;} 因为图片的宽度是30px 这里设置的是当鼠标经过的时候高度变为40px 但是如果不加 margin-top:-10px的时候增加的高度是在往下延伸,而不是向上延伸 注意:margin可以取负值...a标签的时候,设置出现的动画事件 if(this.className!

1.8K20

赏析|看看国际一线品牌化妆品网站长成什么样

时尚大片黑白调处理,精致,充满想象力,鼠标滑过才会显示出照片的色调。等待加载界面采用一种电子钟的展示方式,新颖别致。每件产品展示都采用遮罩层,表达方式简洁、有力、生动。...其次再说线条,由于这里也大量采用了线条,那么线条感就势必非常重要,但是我们可以看到网站中还出现了矩形实心按钮,还有红色的圆形标识。...点评: 这类风格的设计已经过时,虽然我们观者目前还能想象得到到当年网站设计拿出来时被人啧啧称赞的样子。图片眼花缭乱,首页内容丰富,让人不知从哪里开始看起。...点评: 和欧莱雅一样在设计方面已经过时,值得称道的地方不多,配色上更为用心。没那么乱,但是离乱也不远了。 8、AVENE(雅漾) ?...点评: 看到这个会想到成千上万默默无闻的企业官网,如果不是图片出现了化妆品的图片,也就默默把它给忽视了。色彩也中规中矩,布局也不逾矩。正儿八的绕道妖艳、缤纷。也许这是产品本身的品牌气质。

99850

【CSS】滑动门技术 ( 借助 CSS 精灵技术实现 | 外部标签设置左半部分背景图片 | 内部标签设置右半部分背景图片 | 鼠标经过更换背景 | 代码示例 )

为 标签设置背景图片为上述背景 , 该背景图片右侧就会出现截断 , 右侧的半圆肯定不完整 ; 其背景样式只有一截 , 如下图所示 : a { /* 行内块元素 宽度与内容相关 */...background: url(images/slid_door.png) no-repeat right; /* 撑开右边的盒子 */ padding-right: 15px; } 4、鼠标过时更换背景...如果鼠标经过 滑动门 时 , 要更换背景 , 要同时将两个背景图片同时更换 ; /* 鼠标经过更换背景 */ a:hover, a:hover span { background-image...background: url(images/slid_door.png) no-repeat right; /* 撑开右边的盒子 */ padding-right: 15px; } /* 鼠标经过更换背景...滑动门技术 骐骥一跃, 不能十步; 驽马十驾, 功在不舍; 显示效果 : 鼠标过时的样式

1.4K10

CSS笔记(15)

元素的显示与隐藏 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现....后面应用及其广泛,搭配JS可以做很多的网页特效. 原图 隐藏后 2.visibility可见性 visibility属性用于指定一个元素应可见还是隐藏....下面做一个土豆网的案例 当鼠标过时,显示遮罩层和播放图标 这时就要用到我们的隐藏和显示知识了,遮罩层应该是整个盒子的一个子元素,不占有位置,因此要使用绝对定位,而元素的隐藏使用的是display.../images/arr.png) no-repeat center; } /* 这里是让鼠标经过.tudou这个盒子时让mask遮罩层显示出来 而不是.mask:hover.../images/tudou.jpg" alt=""> 关于鼠标过时的效果,使用伪类hover时一定要注意,是将鼠标移动到大盒子时才出现遮罩层,

1.1K10

前端问题汇总

如何让input文本框和图片对齐 在默认情况下,input文本框和图片无法自然对齐,总会有所偏差,文本框往往会比图片要往下边一点,只要给元素添加vertical-align:bottom即可令两者底部水平对齐...类似的属性属性还有: 禁止鼠标右键:oncontextmenu="return false" 禁止拖放:ondragstart="return false" 禁止拷贝:oncopy=document.selection.empty...url的时候,会出现自动换行的问题,为了美化页面,往往会希望这些很长的英文单词或者url能够断开来,超出的部分换行到下一行。...JS文件本身的编码默认为ANSI编码,而引入该JS文件的页面则使用了utf-8编码,所以导致了中文乱码。...参考链接 解决文档中有url链接时被强制换行的问题 JS文件中的中文在网页上显示为乱码 谈谈text-overflow的那些坑和应对方法 警告 本文最后更新于 January 26, 2021,文中内容可能已过时

2.5K20

基于 HTML5 Canvas 的简易 2D 3D 编辑器

主要操作:点击工具条的任意一个图标,在工具条下的空白处拖动鼠标,即可实现绘图。...item = { id: id,//工具条元素的唯一标示,如果设置可通过getItemById获取 unfocusable: true,//工具条元素是否不可获取焦点,默认鼠标过时会显示一个矩形边框...iconName,//工具条元素的图标 toolTip: toolTip,//工具条元素的文字提示 groupId: 'bar'//对工具条元素进行分组,同一个分组内的元素选中会自动出现互斥效果...我们把制作“不规则图形”作为一个单独的部分放到 CreateShapeInteractor.js 中,制作“圆”、“圆角矩形”以及“矩形”三个部分分为一个部分放到 CreateNodeInteractor.js...中,将“连线”分为一个部分放到 CreateEdgeInteractor.js 中,接下来我们将对这三个 js 文件一个个解析。

2.2K70

【CSS】盒子模型内边距 ③ ( 盒子模型内边距案例 | 使用 Fireworks 分析网页 | 缩放图片 | 切片工具测量图片 | 吸管工具获取图片颜色 | 代码示例 )

文章目录 一、盒子模型内边距案例 二、使用 Fireworks 分析网页 1、导入图片 2、缩放图片 3、切片工具测量图片 4、吸管工具获取图片颜色 5、测量结果 三、代码示例 一、盒子模型内边距案例...; 2、缩放图片 使用 Ctrl + 鼠标滚轮 , 可以放大缩小图片显示 ; 3、切片工具测量图片 使用 切片工具 , 可以测量 图片中 矩形区域 的 宽高 , 宽高显示在下方 , 下图中 切片工具...整体 高度 为 48 像素 , 没有 上左右 边框 , 整体背景为白色 ; 下边框 1 像素 , 颜色值为 #E8E8ED , 文本高度 15 像素 , 文本颜色为 #222226 , 这是鼠标过时的样式..., 鼠标没有经过时颜色值为 #555666 ; 鼠标过时 , 下边框为 2 像素 , 颜色值 #222226 ; 三、代码示例 ---- 代码示例 : <!...上下内边距 0px 左右内边距 20px */ padding: 0 20px; /* 取消链接下划线 */ text-decoration: none; } /* 鼠标经过样式

1.1K20

原 基于 HTML5 Canvas 的简易

主要操作:点击工具条的任意一个图标,在工具条下的空白处拖动鼠标,即可实现绘图。...item = { id: id,//工具条元素的唯一标示,如果设置可通过getItemById获取 unfocusable: true,//工具条元素是否不可获取焦点,默认鼠标过时会显示一个矩形边框...iconName,//工具条元素的图标 toolTip: toolTip,//工具条元素的文字提示 groupId: 'bar'//对工具条元素进行分组,同一个分组内的元素选中会自动出现互斥效果...我们把制作“不规则图形”作为一个单独的部分放到 CreateShapeInteractor.js 中,制作“圆”、“圆角矩形”以及“矩形”三个部分分为一个部分放到 CreateNodeInteractor.js...中,将“连线”分为一个部分放到 CreateEdgeInteractor.js 中,接下来我们将对这三个 js 文件一个个解析。

1K40

前端特效开发 | 图片翻转的制作

HTML5学堂(码匠):在前端开发中,针对效果层面的开发,使用原生JS往往会因其冗长的代码严重影响到开发进度。比如一个简单的图片翻转效果,我们能否考虑借助某些简单方便的操作来替代原生JS的使用呢?...如上效果,当用户将鼠标移入到每一张图片上,当前的图片会有一个翻转消失的效果,同时有一个图片描述信息的面板会翻转出现。而当鼠标移出图片时,原有的图片会翻转出现,面板信息会翻转消失。...2.2 基本功能逻辑 首先使用JS实现动态添加翻转后展示的信息面板; 然后借助jQuery的hover方法,实现鼠标移入移出的功能; 最后针对不同的翻转变化,让图片与信息面板发生相反的效果展示。...案例实现 3.1 添加面板信息 在鼠标移入相应的图片时,需要让图片可以翻转消失,同时有一个信息面板可以翻转出现。...图片的翻转主要就是在第一个函数中进行书写,通过对外层的a标签绑定hover事件,然后变化其内部img的高度值与定位值,同时使用动画方式show()使得img后面的em标签出现

3.9K70
领券