借贷宝任靓照片蒙眼睛上写蒙字转发软件

来源：蜘蛛抓取(WebSpider) 时间：2017-08-11 12:21 标签： 蒙淇淇卜先生的照片
*看到有些网站的图片显示，当鼠标移到图片上时图片会变清晰，平时好像有被一层半透明物体遮住的感觉，闲来无事，自己就想试试能不能实现，我做的
*比较简单，没有太复杂的逻辑，直接上代码：
.img-window,.img-cover,.img-content{
width:<span style="color: #px;
/*图片容器和覆盖物的尺寸*/
height: 200px
.img-window{
position: relative; /*容器采用相对布局，覆盖物和图片采用绝对定位,这样就*/
margin: 5px;
/*可以通过控制容器来控制图片和覆盖物*/
float: left;
.img-cover{
opacity: 0.2;
/*控制覆盖物的透明度*/
background-color: #A0A0A0;
/*覆盖物的颜色*/
position: absolute;
z-index: 2;
display: block;
.img-content{
position: absolute;
z-index: 1;
* js代码，依赖jquery，以插件的形式实现
(function($) {
*添加一张图片，传入参数是一个json对象，目前对象只有一个属性img_path表示图片的src属性
$.fn.addImg = function(params) {
var imgPath = params.img_
var html = "&div class='img-window'& &div class='img-cover'&&/div& &img class='img-content' src='"+params.img_path+"'/& &div&"
$(this).append(html);
return $(this);
*添加鼠标移入移出的变化效果，这里需要注意两点,
*1）因为覆盖物在图片上面，故鼠标移入事件应该加在覆盖物上，鼠标移入后，
覆盖物消失，此时鼠标在图片上，当鼠标移出图片时，覆盖物出现，所以鼠标的移出事件要加在图片上
*2）鼠标移出事件定位覆盖物时不能用覆盖物样式进行定位，那样会定位到所有的覆盖物，而应该用prev()，
以兄弟的相对定位法定位
$.fn.addHover = function(){
$(".img-cover").mouseover(function(){
$(this).hide(); //自己消失（覆盖物）
$(".img-content").mouseout(function(){
$(this).prev().show(); //自己前面的兄弟出现(覆盖物)
})(jQuery);
&link rel="stylesheet" type="text/css" href="css/layer.css"/&
&script type="text/javascript" src="js/jquery-1.9.1.min.js"&&/script&
&script type="text/javascript" src="js/index.js"&&/script&
&script type="text/javascript"&
$(function(){
$("#container_div1").addImg({img_path:'images/1.jpg'})
.addImg({img_path:'images/2.jpg'})
.addImg({img_path:'images/3.jpg'})
.addImg({img_path:'images/4.jpg'})
.addImg({img_path:'images/5.jpg'})
.addHover();
&div id="container_div1"&
*功能还很不完善，有时间再弄弄，js编程还是蛮有意思的
阅读(...) 评论()

我要回帖

更多关于 蒙淇淇卜先生的照片 的文章

 

随机推荐