鼠标经过地方图片变亮,其他地方图片变暗效果

很久没做,原理都有点忘记了。

效果的原理

原理其实很简单,首先给一个黑色的背景,通过降低图片的透明度,让黑色背景呈现出来,图片看起来就更暗。鼠标移到图片1,那么就让除了图片1的其他图片的透明度降低,让他们看起来更暗,让图片1看起来显得更亮

JS.CSS.JQ都可以使用

在这里记录下原理。。

时间: 2024-10-12 17:05:39

鼠标经过地方图片变亮,其他地方图片变暗效果的相关文章

jQuery实现鼠标经过图片变亮效果

在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!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

j-query应用---鼠标悬停不同文字显示不同背景图片banner动画

源代码部分:注意事项:样式表的引用的路径要一致. <!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 htt

java实现批量下载百度图片搜索到的图片

就是写的个小程序,用于记录一下,方便后续查看,首先感谢下面这个博客,从这篇文章衍生的吧,大家可以学习下: http://www.cnblogs.com/lichenwei/p/4610298.html 读了这边文章,觉得很有意思,就模仿着写了个,从百度图片所有并下载到本地,主要思路是一样的. 贴下代码: package com.guo.common; import java.io.BufferedReader; import java.io.BufferedWriter; import java

推荐ajaxfilemanager for tiny_mce 比较完善的tiny_mce编辑器的图片上传及图片管理插件PHP版 支持中文

tiny_mce编辑器,我觉得挺简洁.好用的,但就是图片上传的插件是收费的,而且网上找了半天也没有找到开源好用的上传插件. 不过功夫不负有心人,终于还就被我找到一款相当满意的插件. 这个插件的名字叫ajaxfilemanager 官方网址是http://www.phpletter.com/DOWNLOAD/ Tinymce Ajax File and Image Manager Tinymce Ajax File and Image Manager Version 1.0 Final Proje

非微信图文网页,微信浏览器点击图片弹出自带图片浏览 (原创请勿转载)

微信图文网页点击插入的图片,会在微信的图片浏览器上浏览图片可以放大缩小,但是自己做的网页没有这个功能,下面我就来介绍一下这个功能,做出一个完美一点的demo.如果不想看过程直接到最后看demo... 教程需要:脚本编辑器(记事本或者是notepad++.DW都可以).jquery.js.微信浏览器作为测试 如下图效果 我们用到的是微信内置JsAPI的一个,这个函数在微信的开发者平台文档里我没有找到,是在网上搜到的. WeixinJSBridge.invoke('imagePreview',{  

实用图片滑块,传送带,幻灯片效果【附源码】

图片是网站功能的重要组成部分,这里集合了10个图片滑块,传送带,幻灯片效果,相信你在项目中肯定会用到.这些分享的效果大部分都是实用 jQuery 实现的,使用起来很简单.看看下面这些惊人的功能和效果,我相信你会发现一些很有用的东西. 适合电子商务网站的图片滑块 Sequence.js 是一个非常现代的图片滑动效果,特别适合电子商务网站或者企业产品展示功能.带有图片缩率图,能够呈现全屏图片浏览效果.结合 CSS3 Transition 实现响应式的滑块效果. 效果演示     插件下载 经典的 j

jquery实现上传图片及图片大小验证、图片预览效果代码

jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture(){     var file = $('file_c').value;     if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){            alert("图片类型必须是.gif,jpeg,jpg,png中的一种")        }else{      $('both_form')

keynote如何无损导出图片?怎么把图片导出来

在做工作汇报的时候,keynote是我们经常使用的工具,里面会有很多我们用的上的图片素材,那么keynote如何无损导出图片?如何在不丢失画质的情况导出这些图片呢,小编总结了具体的步骤,可以帮您完成这个问题,如果你get了就可以快速导出他们了哦!下面看看具体是如何操作的吧! keynote无损导出图片步骤: 第一步:选中图片 第二步:选择"格式"-"图像" 第三步:在右侧属性栏右上角的位置,将会出现"文件信息",里面包含了这张图片的jpeg图标以

图片水印(微博图片上面的个人签名)

- (void)viewDidLoad { [super viewDidLoad]; // 1.返回水印图片 UIImage *newImage = [UIImage waterImageWithBg:@"scene" logo:@"logo"]; // 2.显示图片 self.iconView.image = newImage; } - (void)testWater { UIImage *bgImage = [UIImage imageNamed:@"