澳门威利斯人_威利斯人娱乐「手机版」

来自 网络资讯 2019-09-11 06:10 的文章
当前位置: 澳门威利斯人 > 网络资讯 > 正文

的影响示例探讨,jquery实现聚光灯效果的方法

复制代码 代码如下:

jquery完成柔光灯效果的措施,jquery完成焦点光灯

本文实例陈述了jquery完毕焦点光灯效果的方式。共享给大家供我们参谋。具体解析如下:

有的时候候网址必要用jquery达成一种图片强光灯特效,当鼠标滑过单组中的单个Logo时,当前高亮,其余Logo变暗的这种近乎图片高光灯特效。其落到实处原理为第一先让鼠标触及到当前图片后,让别的图片全体透明化,然后展现出近期的提醒语,当鼠标移开未来隐敝当前的提醒语,让具有的背景颜色的发光度变回不荒谬。这里就来介绍怎么着用jquery完成高光灯效果

jquery达成强光灯效果图如下所示:

威尼斯娱乐城 1

jquery代码

复制代码 代码如下:

<!DOCTYPE>
<html>
威尼斯娱乐城,<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery高光灯插件制作jquery图片特效鼠标滑过图片当前图片高亮</title>
<meta name="description" content="jquery强光灯插件制作jquery图片特效当鼠标滑过图片时当前图片高亮展现别的别的的图样变暗。" />
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
img{vertical-align:middle}
/* lamp */
.lamp{height:366px;width:960px;position:relative;margin:0 auto;}
.lamp .sublight{position:absolute;display:block;overflow:hidden;}
.lamp .pic1{top:0;left:0;width:240px;height:366px;}
.lamp .pic2{top:0;left:240px;width:480px;height:183px;}
.lamp .pic3{top:0;left:720px;width:240px;height:183px;}
.lamp .pic4{top:183px;left:240px;width:240px;height:183px;}
.lamp .pic5{top:183px;left:480px;width:240px;height:183px;}
.lamp .pic6{top:183px;left:720px;width:240px;height:183px;}
</style>
<div class="lamp">
    <a target="_blank" href="" class="sublight pic1"><img src="图片URL"/></a>
    <a target="_blank" href="" class="sublight pic2"><img src="图片URL"/></a>
    <a target="_blank" href="" class="sublight pic3"><img src="图片URL"/></a>
    <a target="_blank" href="" class="sublight pic4"><img src="图片URL"/></a>
    <a target="_blank" href="" class="sublight pic5"><img src="图片URL"/></a>
    <a target="_blank" href="" class="sublight pic6"><img src="图片URL"/></a>
</div>
<script type="text/javascript" src="jquery。js"></script>
<script type="text/javascript">
// 高亮效果
var blockHighLight = (function(window, $, undefined){
    var markers = [];
    return function(boxCls, itemCls, sizeArr){
        var box = $(boxCls);
        itemCls = itemCls || "a";
        box.find(itemCls).each(function(i){
            var self = $(this);
            var arr,w,h,marker;
            if(sizeArr !== undefined){
                arr = sizeArr[i].split(",");
                w = arr[0];
                h = arr[1];
            }else{
                w = self.find("img").attr("width");
                h = self.find("img").attr("height");
            }
            marker = $('<div style="cursor:pointer;top:0;left:0;position:absolute;width:' w 'px;height:' h 'px;filter:alpha(opacity=0);opacity: 0;background-color:#000;"></div>');
            self.append(marker);
            self.mouseover(function(){
                for(var i=0; i<markers.length; i ){
                    markers[i].show().css({"opacity":'0.2',"filter":"alpha(opacity=20)"});
                }
                marker.hide();
            });    
            markers.push(marker);
        });
        box.mouseout(function(){
            for(var i=0; i<markers.length; i ){
                markers[i].css({"opacity":'0',"filter":"alpha(opacity=0)"});
            }
        })
    }
})(this, $);
blockHighLight(
    ".lamp", //父元素
    ".sublight", //子成分集
    [
        '240,366', //第一张图纸的宽高
        '480,183', //第二张图纸的宽高
        '240,183', //第三张图片的宽高
        '240,183', //第四张图纸的宽高
        '240,183', //第五张图片的宽高
        '240,183'  //第六张图纸的宽高
    ]
);
</script>
</body>
</html>

仰望本文所述对我们的jQuery程序设计有着匡助。

本文实例陈述了jquery实现焦点光灯效果的点子。分享给大家供大家参谋。具体深入分析如下: 不经常...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>chrome下img加载对height()的影响</title>
<style type="text/css">
.floatleft {
float:left;
}
</style>
<script type="text/javascript" src="js/jQuery-1.7.1.js"></script>
<script type="text/javascript">
$(function() {
var img_h = $('.showimg').height();
var img_w = $('.showimg').width();
var text_h = $('.showtext').height();
$('.showresult').html('showImg:' img_w '&' img_h '<br />showText:' text_h);
alert('showImg:' img_w '&' img_h '<br />showText:' text_h);
});
</script>
</head>
<!--
作者:北京-南宫
日期:2012-07-25
-->
<body>
<div class="floatleft">
<div class="showimg">
<img src="images/flash_pic.gif" />
</div>
<div class="showtext">
那是文字
</div>
<div class="showresult">
那边显得结果。
</div>
</div>
</body>
</html>

将此代码在chrome运营,当alert窗口弹出时,将会意识页面包车型客车img并未加载。

运作结果如下:

那是文字
showImg:112&0
showText:18

1、此处 img的默许宽度为112,然则自身链接的img的肥瘦为一千,

2、此处img的冲天为0,

现做如下更改

本文由澳门威利斯人发布于网络资讯,转载请注明出处:的影响示例探讨,jquery实现聚光灯效果的方法

关键词: 澳门威利斯人