照片墙

痛定思痛。 2022-03-18 13:22 326阅读 0赞

开发工具与关键技术：Adobe Dreamweaver CC 2017 CSS  
作者：廖亚星  
撰写时间：2019年2月15日  
下面是让多张照片错乱分布在页面上，当移入后，照片的旋转与大小发生改变  
首先我们要引用封装好的jQuery  
![在这里插入图片描述][20190221003104209.PNG]  
然后我们设置一张背景图，并在背景图上放入照片  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70]  
现在我们需要设置CSS，使鼠标移动在照片上面时，照片的旋转角度与大小发生改变  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20190221003134855.PNG]  
这样，当我们鼠标移上去后，照片就会进行变化。

[20190221003104209.PNG]: /images/20220318/e052b6c43ab549c7a734f6baf6b0e0fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70]: /images/20220318/9f649dda1f0442eea42c758ae78c4596.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70 1]: /images/20220318/3e538be222974a61ba54a9b20bebd9f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70 2]: /images/20220318/302ec5387e80452cab32ecbf3bf5d35e.png
[20190221003134855.PNG]: /images/20220318/eee7b0cc40be4444a0191616fc299c1b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，326人围观）

还没有评论，来说两句吧...

相关阅读

相关使用 Wall 搭建个人照片墙和视频墙

下载 GitHub:[https://github.com/super-tongyao/wall][https_github.com_super-tongyao_wall

Love The Way You Lie/ 2024年03月26日 19:01/ 0 赞/ 52 阅读

相关 html5立体照片墙效果,js实现3D照片墙效果

聊一下心得：CSS写得好，真的可以省很多js代码哈，写起来也简单很多，所以要好好掌握js哈，所以这里也提供了css代码，如果您觉得您的css写得不错，可以直接看js代码哦效

柔情只为你懂/ 2022年10月06日 03:57/ 0 赞/ 624 阅读

相关 css3实现绚丽照片墙

css3实现绚丽照片墙这里主要给大家介绍几个css3比较绚`这里写代码片`丽和实用的动画属性，其中包括旋转、缩放等。课程实现的照片墙特效内容为：照片随意的摆放在页面的不

朴灿烈づ我的快乐病毒、/ 2022年07月12日 22:58/ 0 赞/ 242 阅读

相关 Android实现地图照片墙原理

一、绪前两天在群里和基友聊LOFTER，一直感兴于照片App的我突然想到了一款国外的App，用于记录去过的地方： ![20170419170147

骑猪看日落/ 2022年06月17日 06:44/ 0 赞/ 188 阅读

相关 H5 照片墙制作

H5 照片墙制作一、概述随着时代的发展，越来越多的人喜欢分享自己的照片，他们通过网络来传播，来获得别人的称赞。Html+js能够实现很多美丽的效果，能使得图片拥有更好的

╰+哭是因爲堅強的太久メ/ 2022年06月10日 06:40/ 0 赞/ 308 阅读

相关 GridView实现照片墙

转载请注明：[http://blog.csdn.net/feather\_wch/article/details/79568078][http_blog.csdn.net_fe

女爷i/ 2022年05月29日 02:46/ 0 赞/ 238 阅读

相关 android 瀑布流照片墙

参考此三个网址： 1.[https://blog.csdn.net/guolin\_blog/article/details/10470797/][https_blog.cs

快来打我*/ 2022年04月08日 11:40/ 0 赞/ 296 阅读

相关 CSS照片墙

开发工具与关键技术：DW 作者：文泽钦撰写时间：2019年1月31日今天跟大家分享一个css照片墙，代码也很简单，能省略的效果也省略了，大家也不要学我，不然学校也

Myth丶恋晨/ 2022年03月21日 09:28/ 0 赞/ 327 阅读

相关照片墙

开发工具与关键技术：Adobe Dreamweaver CC 2017 CSS 作者：廖亚星撰写时间：2019年2月15日下面是让多张照片错乱分布在页面上，当移

痛定思痛。/ 2022年03月18日 13:22/ 0 赞/ 327 阅读

相关 css 照片墙案例

<html> <head> <title>照片墙</title> <meta http-equiv="content-type" co

迈不过友情╰/ 2021年07月24日 11:20/ 0 赞/ 413 阅读