使用jquery制作漂亮相册集

最新推荐文章于 2024-06-15 20:48:16 发布

RockyHills

最新推荐文章于 2024-06-15 20:48:16 发布

阅读量8.7k

点赞数 2

分类专栏： jQuery学习笔记文章标签： jquery 图片相册集

本文链接：https://blog.csdn.net/a153375250/article/details/51273725

版权

本文介绍了如何使用jQuery实现简单的图像翻滚效果和创建漂亮的相册集。通过改变img的src属性、预加载图片和添加hover事件实现图像翻滚。在相册集部分，将img放入链接中，阻止默认跳转，单击缩略图在页面上展示大图，并通过CSS绝对定位实现图片重叠，达到相册浏览效果。

摘要由CSDN通过智能技术生成

简单的图像翻滚
漂亮的相册集
资源文件

简单的图像翻滚

image-rollover常被用在交互式导航栏上，当我们的鼠标移动到导航栏时，按钮的外观改变。例如我们以如下几幅黑白缩略图作为导航图表，当鼠标移动到指定图标时，图标变为明亮的彩色图片。预览如下：

该页面的代码十分简单，我们以此为例逐步实现图像的翻滚：

img-rollover.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rollover Images</title>
<style>
html , body{
    line-height: 1;
    background-color: #334873;
}

h1 {
    font-family: 'ColaborateRegular', Arial, sans-serif;    
}

p {
    font-family: 'ColaborateRegular', Arial, sans-serif;
    color: white;
}

.logo {
    letter-spacing: -1px;
    color: rgb(195,151,51);
    text-shadow: 2px 2px 1px rgba(0,0,0,.25);
    font: normal 54px 'ColaborateThinRegular', Arial, sans-serif;
}

#gallery img {
    display: inline-block;
    margin: 10px;
    border: 1px solid rgb(0,0,0);
}
</style>

<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(ducument).ready(

);//end ready
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
    <p class="logo">Easy Sir</p>
</div>


<div class="content">
    <div class=

最低0.47元/天解锁文章

RockyHills

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
3
评论
使用jquery制作漂亮相册集

目录：简单的图像翻滚漂亮的相册集资源文件简单的图像翻滚image-rollover常被用在交互式导航栏上，当我们的鼠标移动到导航栏时，按钮的外观改变。例如我们以如下几幅黑白缩略图作为导航图表，当鼠标移动到指定图标时，图标变为明亮的彩色图片。预览如下：该页面的代码十分简单，我们以此为例逐步实现图像的翻滚：img-rollover.html<!DOCTYPE html><html><head
复制链接

扫一扫

专栏目录