jQuery应用-图片突出显示

1.项目描述

本项目旨在通过使用jQuery来实现鼠标滑动到哪张图片，哪张图片就被突出显示的功能。

2.项目效果预览

3.项目设计核心

灵活运用jQuery，通过鼠标滑到的图片与其余同地图片之间的透明比对比，从而实现图片突出显示。

4.HTML页面设计

<div class="current"><ul class="nav"><li><a href="#"><img src="pactiure/01.jpg"/></a></li><li><a href="#"><img src="pactiure/02.jpg"/></a></li><li><a href="#"><img src="pactiure/03.jpg"/></a></li><li><a href="#"><img src="pactiure/04.jpeg"/></a></li><li><a href="#"><img src="pactiure/05.jpeg"/></a></li><li><a href="#"><img src="pactiure/06.jpg"/></a></li></ul></div>

5.CSS样式设计

<style>.current{position: absolute;left: 400px;top: 100px;width: 800px;height: 500px;background-color: black;}img{width: 200px;height: 200px;}ul{list-style: none;}ul li{float: left;border: solid black 2px;padding:10px;}</style>

6.jQuery设计

script>$(function (){$(".nav li").mouseover(function (){$(this).siblings("li").stop().fadeTo(400,0.5);});$(".nav li").mouseout(function (){$(this).siblings("li").stop().fadeTo(400,1);})})</script>

7.项目源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片突出显示</title><script typeof="text/javascript" src="jQuery/jquery-3.5.1.js"></script><style>.current{position: absolute;left: 400px;top: 100px;width: 800px;height: 500px;background-color: black;}img{width: 200px;height: 200px;}ul{list-style: none;}ul li{float: left;border: solid black 2px;padding:10px;}</style>
</head>
<body><script>$(function (){$(".nav li").mouseover(function (){$(this).siblings("li").stop().fadeTo(400,0.5);});$(".nav li").mouseout(function (){$(this).siblings("li").stop().fadeTo(400,1);})})</script><div class="current"><ul class="nav"><li><a href="#"><img src="pactiure/01.jpg"/></a></li><li><a href="#"><img src="pactiure/02.jpg"/></a></li><li><a href="#"><img src="pactiure/03.jpg"/></a></li><li><a href="#"><img src="pactiure/04.jpeg"/></a></li><li><a href="#"><img src="pactiure/05.jpeg"/></a></li><li><a href="#"><img src="pactiure/06.jpg"/></a></li></ul></div></body>
</html>

最后，如果大家感兴趣，可以下载代码试一试，需要更改一下图片即可。

jQuery应用-图片突出显示相关推荐

图片放大显示的jQuery插件
从网上下载了一个jquery的图片放大显示插件,效果如下前台代码调用: 先引入js <script type="text/javascript" src="../ ...
jQuery之图片显示篇A
1.在鼠标放在图片上时上下震动图片 <!doctype html> <html> <head> <meta charset="utf-8" ...
jquery中解决设置图片不显示
jquery中解决设置背景图片无法显示 let src='clock/img/afternoon.png'; them_icons.css('background','url('+src+')') 主 ...
html逐渐显示图片,怎么用jquery让图片逐渐显示出来
怎么用jquery让图片逐渐显示出来发布时间:2020-12-15 09:51:09 来源:亿速云阅读:107 作者:小新小编给大家分享一下怎么用jquery让图片逐渐显示出来,希望大家阅读完这 ...
php主页显示商品预览图代码,jQuery实现鼠标滑过商品小图片上显示对应大图商品页预览功能...
这次给大家带来jQuery实现鼠标滑过商品小图片上显示对应大图商品页预览功能,jQuery实现鼠标滑过商品小图片上显示对应大图商品页预览功能的注意事项有哪些,下面就是实战案例,一起来看一下. 1 . ...
js图片轮换显示实例(转载)
2019独角兽企业重金招聘Python工程师标准>>> 转自:http://www.cnblogs.com/yes123/p/3702519.html 用js脚本实现图片轮换显示,很 ...
PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
基于jquery的图片懒加载js
在京东商城浏览时, 会发现产品图片只显示了一屏, 当页面向下滚动时下面的产品图片才逐渐加载. 以下是实现代码(基于jquery): function lazyload(option){var sett ...
jQuery Lightbox图片放大预览
简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...

jQuery应用-图片突出显示

jQuery应用-图片突出显示

1.项目描述

2.项目效果预览

3.项目设计核心

4.HTML页面设计

5.CSS样式设计

6.jQuery设计

7.项目源码

jQuery应用-图片突出显示相关推荐

最新文章

热门文章