心型照片墙

《HTML》 要链接jquery.min.js文件

<div class="div_pic">
<div class="a">
<div class="a1"><img class="p p1" src="img/11.jpg"></div>
<div class="a2"><img class="p p2" src="img/11.jpg"></div>
<div class="a3"><img class="p p3" src="img/11.jpg"></div>
<div class="a4"><img class="p p4" src="img/11.jpg"></div>
</div>
<div class="b">
<div class="b1"><img class="p p5" src="img/11.jpg"></div>
<div class="b2"><img class="p p6" src="img/11.jpg"></div>
<div class="b3"><img class="p p7" src="img/11.jpg"></div>
<div class="b4"><img class="p p8" src="img/11.jpg"></div>
<div class="b5"><img class="p p9" src="img/11.jpg"></div>
<div class="b6"><img class="p p10" src="img/11.jpg"></div>
</div>
<div class="c">
<div class="c1"><img class="p p11" src="img/11.jpg"></div>
<div class="c2"><img class="p p12" src="img/11.jpg"></div>
<div class="c3"><img class="p p13" src="img/11.jpg"></div>
<div class="c4"><img class="p p14" src="img/11.jpg"></div>
<div class="c5"><img class="p p15" src="img/11.jpg"></div>
<div class="c6"><img class="p p16" src="img/11.jpg"></div>
<div class="c7"><img class="p p17" src="img/11.jpg"></div>
</div>
<div class="d">
<div class="d1"><img class="p p18" src="img/11.jpg"></div>
<div class="d2"><img class="p p19" src="img/11.jpg"></div>
<div class="d3"><img class="p p20" src="img/11.jpg"></div>
<div class="d4"><img class="p p21" src="img/11.jpg"></div>
<div class="d5"><img class="p p22" src="img/11.jpg"></div>
<div class="d6"><img class="p p23" src="img/11.jpg"></div>
<div class="d7"><img class="p p24" src="img/11.jpg"></div>
</div>
<div class="e">
<div class="e1"><img class="p p25" src="img/11.jpg"></div>
<div class="e2"><img class="p p26" src="img/11.jpg"></div>
<div class="e3"><img class="p p27" src="img/11.jpg"></div>
<div class="e4"><img class="p p28" src="img/11.jpg"></div>
<div class="e5"><img class="p p29" src="img/11.jpg"></div>
<div class="e6"><img class="p p30" src="img/11.jpg"></div>
<div class="e7"><img class="p p31" src="img/11.jpg"></div>
</div>
<div class="f">
<div class="f1"><img class="p p32" src="img/22.jpg"></div>
<div class="f2"><img class="p p33" src="img/22.jpg"></div>
<div class="f3"><img class="p p34" src="img/22.jpg"></div>
<div class="f4"><img class="p p35" src="img/22.jpg"></div>
<div class="f5"><img class="p p36" src="img/22.jpg"></div>
<div class="f6"><img class="p p37" src="img/22.jpg"></div>
<div class="f7"><img class="p p38" src="img/22.jpg"></div>
</div>
<div class="g">
<div class="g1"><img class="p p39" src="img/22.jpg"></div>
<div class="g2"><img class="p p40" src="img/22.jpg"></div>
<div class="g3"><img class="p p41" src="img/22.jpg"></div>
<div class="g4"><img class="p p42" src="img/22.jpg"></div>
<div class="g5"><img class="p p43" src="img/22.jpg"></div>
<div class="g6"><img class="p p44" src="img/22.jpg"></div>
<div class="g7"><img class="p p45" src="img/22.jpg"></div>
</div>
<div class="h">
<div class="h1"><img class="p p46" src="img/22.jpg"></div>
<div class="h2"><img class="p p47" src="img/22.jpg"></div>
<div class="h3"><img class="p p48" src="img/22.jpg"></div>
<div class="h4"><img class="p p49" src="img/22.jpg"></div>
<div class="h6"><img class="p p51" src="img/22.jpg"></div>
<div class="h7"><img class="p p52" src="img/22.jpg"></div>
</div>
<div class="i">
<div class="i1"><img class="p p53" src="img/22.jpg"></div>
<div class="i2"><img class="p p54" src="img/22.jpg"></div>
<div class="i3"><img class="p p55" src="img/22.jpg"></div>
<div class="i4"><img class="p p56" src="img/22.jpg"></div>
</div>
</div>

《css》

@charset "utf-8";
body {
background:gainsboro;/*背景颜色*/
}
.div_pic {
width:800px;
height:1000px;
margin:60px auto;
position:relative;
}
.p {
/*内边距*/
padding:10px 10px 10px;
background:white;/*图片白色背景*/
/*背景*/
/*左移,下移,虚化*/
box-shadow:5px 5px 4px rgba(50,50,50,0.5);/*图片阴影*/
width:50px; /*图片宽度*/
/*相对定位*/
}
/*鼠标悬浮图片变大*/
.div_pic img:hover {
transform:rotate(10deg) scale(1.5);
z-index:9;
}
.div_pic .a{
display: inline-block;
left: 50px;
}
.div_pic .a .a1{
margin-top: 60px;
}
.div_pic .b{
display: inline-block;
position: absolute;
left: 90px;
}
.div_pic .c{
display: inline-block;
position: absolute;
left: 180px;
}
.div_pic .d{
display: inline-block;
position: absolute;
left: 270px;
}
.div_pic .d .d1{
margin-top: 60px;
}
.div_pic .e{
display: inline-block;
position: absolute;
left: 360px;
}
.div_pic .e .e1{
margin-top: 120px;
}
.div_pic .f{
display: inline-block;
position: absolute;
left:450px;
}
.div_pic .f .f1{
margin-top: 60px;
}
.div_pic .g{
display: inline-block;
position: absolute;
left:540px;
}
.div_pic .g .g1{
margin-top: 0px;
}
.div_pic .h{
display: inline-block;
position: absolute;
left:630px;
}
.div_pic .h .h1{
margin-top: 0px;
}
.div_pic .i{
display: inline-block;
position: absolute;
left:720px;
}
.div_pic .i .i1{
margin-top: 60px;
}

《js》

$(function(){
$(".p").mouseover(function(){
$(this).css({width:"70px",height:"70PX"});
})
$(".p").mouseout(function(){
$(this).css({width:"50px",height:"50PX"});
})
})

最后成果图

时间: 2024-11-10 12:03:54

心型照片墙的相关文章

ava Swing心型动态图案的代码分享

今天java商城产品开发的工作人员分享一个java  Swing心型动态图案的代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 pa

Android特效专辑(八)——实现心型起泡飞舞的特效,让你的APP瞬间暖心

Android特效专辑(八)--实现心型起泡飞舞的特效,让你的APP瞬间暖心 马上也要放年假了,家里估计会没网,更完这篇的话,可能要到年后了,不过在此期间会把更新内容都保存在本地,这样有网就可以发表了,也是极好的,今天说的这个特效,原本是Only上的一个小彩蛋的,我们来看看图片 只要我点击了Only这个字,下面就开始上升起起泡了,这个实现起来其实就是一个欲盖弥彰的动画而已,准备好三张颜色不一样的心型图片咯,这样的话,我们就开始动手来写一写吧! 首先新建一个工程--HeartFaom 准备工作就是

iOS直播点赞动画,iOS直播心型点赞动画

https://github.com/songxing10000/LikeAnimation-PraiseAnimation

修改了的心型图片

代码: ContourPlot3D[(x^2 + 9/4 y^2 + z^2 - 1) == CubeRoot[x^2 z^3 + 9/80 y^2 z^3], {x, -6/5, 6/5}, {y, -6/5, 6/5}, {z, -6/5, 3/2}, Mesh -> None, Boxed -> False, AxesLabel -> {"x", "y", "z"}, Axes -> False, ContourSt

基于微博数据用 Python 打造一颗“心”

一年一度的虐狗节刚过去不久,朋友圈各种晒,晒自拍,晒娃,晒美食,秀恩爱的.程序员在晒什么,程序员在加班.但是礼物还是少不了的,送什么好?作为程序员,我准备了一份特别的礼物,用以往发的微博数据打造一颗“爱心”,我想她一定会感动得哭了吧.哈哈 准备工作 有了想法之后就开始行动了,自然最先想到的就是用 Python 了,大体思路就是把微博数据爬下来,数据经过清洗加工后再进行分词处理,处理后的数据交给词云工具,配合科学计算工具和绘图工具制作成图像出来,涉及到的工具包有: requests 用于网络请求爬

python画出心形图

程序员表达爱的方式真是多种多样.比如,用python来画一个心型,献给梦中的情人,代码如下: from turtle import * pensize(1) pencolor('red') fillcolor('pink') speed(5) up() goto(-30, 100) down() begin_fill() left(90) circle(120,180) circle(360,70) left(38) circle(360,70) circle(120,180) end_fill

利用border和border-radius绘制一些小图片

大都知道border属性有四个参数,那么border-radius必然也是有四个参数 我们知道border属性的四个参数分别是border-top,border-right,border-bottom,border-left.(按顺时针方向) 那么border-radius四个参数是什么了? border-radius:上左,上右,下右,下左: 下面我们利用border-radius绘制一些大家平时常见的图片. 1.简单的圆形 <!DOCTYPE html> <html> <

Android带图片的Toast(自定义Toast)

使用Android默认的Toast Toast简介: Toast是一个简单的消息显示框,能够短暂的出现在屏幕的某个位置,显示提示消息. 默认的位置是屏幕的下方正中,一般Toast的使用如下: Toast.makeText(this,"1222222",Toast.LENGTH_SHORT).show(); Toast是static修饰的静态类,意味着可以直接使用,所以可以不用创建对象直接调用makeText方法, 该方法需要传入三个参数: /** * Make a standard t

男生如何对女朋友好

交友法则,如何对女友好 NO.1 如果你的伴侣要出差一段时间,告诉她你很担心她.你说,你会派出一个保镖来保护她,然后给她一个玩具熊. NO.2 买一袋夜里会发光的星星,粘在你床上正上方的天花板上,拼出“I ? U”的形状.当夜间关掉灯光,你的表白就会显现. NO.3 在某个特定的时刻,送她11枝红玫瑰加一枝塑料红玫瑰.将这枝塑料红玫瑰放在花束的中间,附上一张卡片:我会爱你直到最后一枝玫瑰褪色. NO.4 买下你女友名字的网络域名.创建一个浪漫的页面,让她在上网时不经意间发现这个页面. NO.5