投稿
  1. 首页
  2. 随笔

用HTML做的照片墙怎么用手机打开

至顶网 • 2023-3-15 • 随笔 • 阅读 77

用HTML做的照片墙怎么用手机打开,第1张

输入QQ号码和密码，点击登录登录成功后点击正下方“动态”找到并点击“好友动态”进入好友动态，点击正上方的背景图片进入背景商城，找到并点击“照片墙”进入照片墙，点击右上角的“添加”，你可以选择从手机里或者从空间相册里添加照片

可以使用最新的css3进行裁切或遮罩。

使用div配合css3再结合svg可以实现各种形状的裁切，css3加背景可以实现遮罩效果。

如果需要兼容的话，可以使用第三方插件。

看完下面的代码你就明白了，稍作删改就是你要的效果

<!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 http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>jQuery心型图片墙鼠标悬浮变大</title>

<style type="text/css">

*{padding:0margin:0}

ul,li{list-style:none}

body{font:12px/20px "Microsoft Yahei","SimSun",Arial,sans-serifbackground:#CCC}

.heartPic{width:749pxheight:630pxmargin:60px auto 0 auto}

.heartPic ul{float:leftwidth:749px}

.heartPic ul li{float:leftwidth:100pxheight:100pxpadding:2pxcursor:pointer}

.heartPic ul li.on{z-index:99}

.heartPic ul li.on .in{position:relativeleft:-50pxtop:-50pxpadding:5px 5px 20px 5pxbackground:#666}

.heartPic ul li .pTxt{display:nonewidth:100pxheight:15pxtext-align:centercolor:#fffoverflow:hidden}

.heartPic .showDiv{display:block}

</style>

</head>

<body>

<div class="heartPic">

<ul>

<li></li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_01.jpg" />

<p class="pTxt">可爱的女娃娃</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_02.jpg" />

<p class="pTxt">呆萌的小熊</p>

</div>

</li>

<li></li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_03.jpg" />

<p class="pTxt">卡哇伊的小熊</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_04.jpg" />

<p class="pTxt">女巫骑着扫帚</p>

</div>

</li>

<li></li>

</ul>

<ul>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_05.jpg" />

<p class="pTxt">女娃娃</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_06.jpg" />

<p class="pTxt">星星可爱</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_07.jpg" />

<p class="pTxt">呆萌女</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_08.jpg" />

<p class="pTxt">狗狗</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_09.jpg" />

<p class="pTxt">绿树</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_10.jpg" />

<p class="pTxt">粉爱粉爱的</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_11.jpg" />

<p class="pTxt">蜡笔小新</p>

</div>

</li>

</ul>

<ul>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_12.jpg" />

<p class="pTxt">震不碎的心</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_13.jpg" />

<p class="pTxt">很有意境</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_14.jpg" />

<p class="pTxt">樱木花道最爱啊</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_15.jpg" />

<p class="pTxt">俩骷髅</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_16.jpg" />

<p class="pTxt">萌妹子</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_17.jpg" />

<p class="pTxt">可爱的小狗</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_18.jpg" />

<p class="pTxt">夫妇俩白头偕老</p>

</div>

</li>

</ul>

<ul>

<li></li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_19.jpg" />

<p class="pTxt">刷子</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_20.jpg" />

<p class="pTxt">偶的头像</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_21.jpg" />

<p class="pTxt">树叶子</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_22.jpg" />

<p class="pTxt">星星</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_23.jpg" />

<p class="pTxt">浅色哦</p>

</div>

</li>

<li></li>

</ul>

<ul>

<li></li>

<li></li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_24.jpg" />

<p class="pTxt">太阳帅哥</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_25.jpg" />

<p class="pTxt">大笑脸</p>

</div>

</li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_26.jpg" />

<p class="pTxt">企鹅</p>

</div>

</li>

<li></li>

<li></li>

</ul>

<ul>

<li></li>

<li></li>

<li></li>

<li>

<div class="in">

<img width="100" height="100" src="/jscss/demoimg/201404/index_27.jpg" />

<p class="pTxt">小兔子</p>

</div>

</li>

<li></li>

<li></li>

<li></li>

</ul>

</div>

<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>

<script type="text/javascript">

$(function(){

$(".heartPic li").hover(function(){

$(this).addClass("on")

$(this).find("img").animate({"width":"200px","height":"200px"})

$(this).find("div").animate({"width":"200px","height":"200px"})

$(this).find(".pTxt").animate({"width":"200px","height":"20px"})

$(this).find("p").addClass("showDiv")

},function(){

$(this).animate({height:"100px"},100).removeClass("on")

$(this).find("img").stop(true,true).animate({"width":"100px","height":"100px"})

$(this).find("div").stop(true,true).animate({"width":"100px","height":"100px"})

$(this).find(".pTxt").stop(true,true).animate({"width":"0px","height":"0px"})

})

})

</script>

<div style="text-align:centerclear:both">

</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6132437.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
至顶网 至顶网 一级用户组
0 0
上一篇 2023-03-15
下一篇 2023-03-15

发表评论

登录后才能评论

评论列表（0条）

保存