商品详情页面

一.知识点

jQuery click()方法：

当单击元素时，发生click事件。

click()方法触发click事件，或规定当发生click事件时运行的函数

jquery操作css

addClass()-向被选元素添加一个或多个类

removeClass-从被选元素删除一个或多个类

放大镜效果框架：

jQuery图片放大镜(原创)
 

利用jquery语法实现外边框取消选择并选中

（1）实现商品规格选中

$(function() {
                    $(".er").click(function() {
                        $(this).addClass("active").siblings().removeClass("active");
                    });

（2）加边框线样式

.active {
                            border: 1px solid red;
                        }

二、页面实现
1、添加插件资源

（1）、引用move-box.png

（2）、引入cssmagnifier.css

（3）、引入magnifier.js

<link rel="stylesheet" href="css/magnifier.css" type="texts">
 <script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
   <script src="js/magnifier.js" type="text/javascript" charset="utf-8"></script>

2、设置图片显示容器跟鼠标滑过盒子

<div class="magnifier-container">
                    <div class="images-cover">
                        
                    </div>
                    <!--当前图片显示容器-->
                    <div class="move-view">
                        
                    </div>
                    <!--跟随鼠标移动的盒子-->
                </div>

3、添加图片（图片其一）

                <div class="magnifier-assembly">
                    <div class="magnifier-btn">
                        <span class="magnifier-btn-left">&lt;</span>
                        <span class="magnifier-btn-right">&gt;</span>
                    </div>
                    <!--按钮组-->
                    <div class="magnifier-line">
                        <ul class="clearfix animation03">
                            <li>
                                <div class="small-img">
                                    <img src="img1_s1.jpg" />
                                </div>
                            <>

4、修改magnifier.css图片

background-image: url("../img/move-box.png");