淘宝图片的选中效果

作者: 老95 | 来源:发表于2017-04-23 17:08 被阅读0次

淘宝图片的选中效果
利用伪元素美化input默认样式
安卓利用selector设置CheckBox选中前后的图片和文字
Android代码片段（持续更新中）
UIButton 设置Gif动态图片
Cell选中图片放大
ListView单选效果简单实现
自定义RatingBar评分控件
锦囊9：让文字脱颖而出-文本轮廓&发光
iOS开发—TabBarItem更换选中与未选中图标，禁止系统自

效果图：

淘宝图片选中效果.gif

源代码：
.html文件的代码

<!DOCTYPE html>
<head>
    <meta charset="utf-8"/>
    <title>放大镜</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="div1">
         <!--图片显示的div  small_pic-->
        <div class="small_pic">
            <!--用于onmouseover事件-->
            <span class="mark"></span>
            <!--鼠标放上去显示的小的span-->
            <span class="float_layer"></span>
            ![](images/small.png)
        </div>
        
        <div class="big_pic">
            ![](images/big.png)
        </div>

    </div>
    <script type="text/javascript">
        var oDiv=document.getElementById('div1');
        // 用于onmouseover 事件的 span
        var oMark=document.querySelector('#div1 .mark');
        // 获取放在图片上显示的小span
        var oFloat=document.querySelector('#div1 .float_layer');
        // 获取显示大图片的div
        var oBig=document.querySelector('#div1 .big_pic');
        
        var oSmall=document.querySelector('#div1 .small_pic');
        // 获取显示的大图片
        var oImg=oBig.getElementsByTagName('img')[0];
        
        oMark.onmouseover=function ()  // 鼠标放在图片上时，所有的display:none均变为display:block
        {
            oFloat.style.display='block';
            oBig.style.display='block';
        };
        
        oMark.onmouseout=function ()
        {
            oFloat.style.display='none';
            oBig.style.display='none';
        };
        
        oMark.onmousemove=function (ev)
        {
            var oEvent=ev||window.event;  // 获取事件对象，浏览器的兼容写法
            // 鼠标到视窗左距离 - div1到视窗左的距离- 图片大小的div到div1左的距离 - 浮动的span的宽度的一半；
            var l =oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
            // 鼠标到视窗上距离 - div1到视窗上的距离- 图片大小的div到div1上的距离 - 浮动的span的高度的一半；
            var t =oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;
            
            if(l<0)
            {
                l=0;
            }
            else if(l>oMark.offsetWidth-oFloat.offsetWidth)//span的宽-浮动的span的宽度
            {
                l=oMark.offsetWidth-oFloat.offsetWidth;
            }
            
            if(t<0)
            {
                t=0;
            }
            else if(t>oMark.offsetHeight-oFloat.offsetHeight)
            {
                t=oMark.offsetHeight-oFloat.offsetHeight;
            }
            // 通过以上的计算，随着鼠标的移动设置浮动span的位置
            oFloat.style.left=l+'px';
            oFloat.style.top=t+'px';
            // percentX 为浮动span左侧距离图片大小的div的距离在剩余的宽度中的百分比
            var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth);
            var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight);
            // 根据上面计算的百分比计算被放大的图片的left，top
            oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px';
            oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px';
        };
    </script>
</body>
</html>

.css文件的代码

#div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; }

#div1 .small_pic { width: 200px; height: 200px; background: #eee; position: relative; }
#div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
#div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;}
#div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; }
#div1 .big_pic img { position:absolute; top: -30px; left: -80px; }