jquery は製品のドラッグ選択効果コードを実装します (自作)_jquery

/* リセット & .clear
----------------------------*/
* {
マージン: 0;
パディング: 0;
}
.clear:before,
.clear:after {
content: " ";
表示: テーブル;
}
.clear:after { クリア: 両方 }
.clear { *zoom: 1 }
/* MAIN
-------------- --------------*/
body {
フォント: 通常 12px/1.3 アリアル、サンセリフ;
背景色: #eee;
}
li { list-style: none }
a { text-decoration: none }
.container {
position: 相対;
幅: 920px;
マージン: 30px 自動;
}
.container #product {
位置: 相対;
z-インデックス: 2;
フロート: 左;
幅: 670ピクセル;
}
.container #sidebar {
位置: 相対;
z インデックス: 1;
フロート: 右;
幅: 224px;
}
/* 製品
----------------------------*/
#product ul {
幅: 680px;
マージン左: -10px; }
#product ul li {
位置: 相対;
フロート: 左;
幅: 150px;
マージン: 0 0 10px 10px;
パディング: 5px;
背景色: #fff;
境界半径: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-webkit-transition: -webkit-transform .1s の簡単さ。
-moz-transition: -webkit-transform .1 秒の簡単さ。
-o-transition: -webkit-transform .1 秒の簡単さ。
-ms-transition: -webkit-transform .1 秒の簡単さ。
トランジション: .1 秒の簡単な変換。
}
#product ul li:hover {
背景色: #fff8c1;
}
#product.active ul li {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
フィルター: アルファ(不透明度 = 40);
不透明度: .4;
}
#product.active ul li.active {
z-index: 2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
フィルター: アルファ(不透明度 = 100);
不透明度: 1;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
変換元: 50% 50%;
-webkit-transform:scale(.6);
-moz-transform:scale(.6);
-o-transform:scale(.6);
-ms-transform:scale(.6);
変換:scale(.6);
}
#product ul li a {
display: block;
color: #000
}
#product ul li a h3 {
margin-top: 5px;
}
#product ul li a h3,
#product ul li a p {
white-space: nowrap;
オーバーフロー: 非表示;
-o-text-overflow: 省略記号;
-ms-text-overflow: 省略記号;
テキストオーバーフロー: 省略記号;
}
#product ul li a img { width:150px;height:150px;display: block }
/* バスケット
------ -------------*/
.basket {
位置: 相対;
}
.basket .basket_list {
幅: 220px;
背景色: #fff;
境界線: 2 ピクセルの透明な点線。
境界半径: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.basket.active .basket_list,
.basket.hover .basket_list { border-color: #ffa0a3 }
.basket.active .basket_list { background-color: #fff8c1 }
.basket.hover .basket_list { 背景色: #ffa0a3 }
/* .head */
.basket .head {
オーバーフロー: 非表示;
マージン: 0 10px;
高さ: 26px;
行の高さ: 26px;
カラー: #666;
border-bottom: 1px ソリッド #ddd;
}
.basket .head .name { float: left }
.basket .head .count { float: right }
/* .head */
.basket ul { パディング-底部: 10px }
.basket ul li {
位置: 相対;
クリア: 両方。
オーバーフロー: 非表示;
マージン: 0 10px;
高さ: 26px;
行の高さ: 32px;
border-bottom: 1px 破線 #eee;
}
.basket ul li:hover { border-bottom-color: #ccc }
.basket ul li span.name {
display: block;
フロート: 左;
幅: 165px;
フォントの太さ: 太字;
空白: nowrap;
オーバーフロー: 非表示;
-o-text-overflow: 省略記号;
-ms-text-overflow: 省略記号;
テキストオーバーフロー: 省略記号;
-webkit-transition: 幅 0.2 秒の容易さ。
-moz-transition: 幅 0.2 秒の容易さ。
-o-transition: 幅 0.2 秒の容易さ。
-ms-transition: 幅 0.2 秒の容易さ。
トランジション: 幅 0.2 秒の容易さ。
}
.basket ul li:hover span.name { width: 146px }
.basket ul li input.count {
float: right;
マージン: 3px 2px 0 0;
幅: 25px;
行の高さ: 20px;
text-align: 中央;
ボーダー: 0;
境界半径: 3px;
背景色: #ddd;
}
.basket ul li button.delete {
位置: 絶対;
右: 30px;
上: 3px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
フィルター: alpha(不透明度 = 0);
不透明度: 0;
幅: 20px;
行の高さ: 20px;
高さ: 20px;
text-align: 中央;
フォントサイズ: 11px;
ボーダー: 0;
カラー: #EE5757;
背景色: #eee;
境界半径: 3px;
カーソル: ポインタ;
-webkit-transition: 不透明度 .2 秒の容易さ。
-moz-transition: 不透明度 0.2 秒の容易さ。
-o-transition: 不透明度 0.2 秒の容易さ。
-ms-transition: 不透明度 0.2 秒の容易さ。
トランジション: 不透明度 0.2 秒の緩和。
}
.basket ul li:hover button.delete {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
フィルター: アルファ(不透明度 = 100);
不透明度: 1;
}
.basket ul li button.delete:hover {
color: #fff;
背景色: #ffa0a3;
}
.basket ul li button.delete:active {
color: #fff;
背景色: #EE5757;
}