1. tab列表折叠效果
html:
<div class="container clear">
<h2 class="acc_trigger"><a href="#">能源系统事业部</a></h2>
<div class="acc_container">
<div class="block clear">
<ul class="block_lef">
<li>岗位名称：</li>
<li>工作地点</li>
</ul>
<div class="block_right"><input type="btn" value="点击申请"></div>
</div>
<div class="block clear">
<ul class="block_lef">
<li>岗位名称：</li>
<li>工作地点</li>
</ul>
<div class="block_right"><input type="btn" value="点击申请"></div>
</div>
</div>
<h2 class="acc_trigger"><a href="#">AC Power事业部</a></h2>
<div class="acc_container">
<div class="block clear">
<ul class="block_lef">
<li>岗位名称：</li>
<li>工作地点</li>
</ul>
<div class="block_right"><input type="btn" value="点击申请"></div>
</div>
<div class="block clear">
<ul class="block_lef">
<li>岗位名称：</li>
<li>工作地点</li>
</ul>
<div class="block_right"><input type="btn" value="点击申请"></div>
</div>
</div>
<h2 class="acc_trigger"><a href="#">信息工程部</a></h2>
<div class="acc_container">
<div class="block clear">
<ul class="block_lef">
<li>岗位名称：</li>
<li>工作地点</li>
</ul>
<div class="block_right"><input type="btn" value="点击申请"></div>
</div>
<div class="block clear">
<ul class="block_lef">
<li>岗位名称：</li>
<li>工作地点</li>
</ul>
<div class="block_right"><input type="btn" value="点击申请"></div>
</div>
</div>
<h2 class="acc_trigger"><a href="#">财务部</a></h2>
<div class="acc_container">
<div class="block clear">
<ul class="block_lef">
<li>岗位名称：</li>
<li>工作地点</li>
</ul>
<div class="block_right"><input type="btn" value="点击申请"></div>
</div>
</div>
</div>
</div>
css
.container {
width: 1200px;
margin:0 auto;
}
ul li{
list-style:none;
}
h1 {
font: 4em normal Georgia, 'Times New Roman', Times, serif;
text-align:center;
padding: 20px 0;
color: #aaa;
}
h1 span { color: #666; }
h1 small{
font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing: 0.5em;
display: block;
color: #666;
}
h2.acc_trigger {
border-radius: 6px;
padding: 0; margin: 0 0 5px 0;
background-color:#f5ab28;
height: 32px;
line-height: 32px;
width: 1200px;
font-size: 1.5em;
font-weight: normal;
float: left;
}
h2.acc_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
font-size:16px;
}
h2.acc_trigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
margin: 0 0 5px;
padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 1200px;
clear: both;
}
.acc_container .block {
font: 1em normal Georgia, "Times New Roman", Times, serif;
height:60px;
margin-top:20px;
/margin-left:68px;/
border-bottom: 1px dashed #ccc;
}
.block_right{
float: right;
margin-top: -50px;
}
.block_right input{
background:none;
border:none;
border:1px solid #f5ab28;
border-radius: 10px;
width:136px;
text-align: center;
height:30px;
color:#f5ab28;
}
.clear:after{
height:0;
line-height:0;
display:block;
visibility:hidden;
clear:both;
}
js
<script src="js/jquery-2.1.3.min.js" type="text/javascript"></script>
(嵌入jq插件)
$(document).ready(function(){
$(".acc_container:not('.acc_container:first')").hide();
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) {
$('.acc_trigger').removeClass('active').next().slideUp();
$(this).toggleClass('active').next().slideDown();
}else{
$(this).toggleClass('active');
$(this).next().slideUp();
}
return false;
});
});
2. 无缝滚动效果
html
<div id="marquee1">
<ul class="clear marqueel_ul">
<li><img src="img/1.png" width="245" height="173"></li>
<li><img src="img/2.png" width="245" height="173"></li>
<li><img src="img/3.png" width="245" height="173"></li>
<li><img src="img/4.png" width="245" height="173"></li>
<li><img src="img/1.png" width="245" height="173"></li>
<li><img src="img/2.png" width="245" height="173"></li>
<li><img src="img/3.png" width="245" height="173"></li>
<li><img src="img/4.png" width="245" height="173"></li>
</ul>
</div>
css
ul{list-style:none;}
'#marquee1{width:1200px;height:170px;overflow:hidden; margin:0 auto;}
'#marquee1 ul li{float:left; padding:0 1px;margin-left:10px;}
'#marquee1 ul li img{display:block;}
.clear:after{
height:0;
line-height:0;
display:block;
visibility:hidden;
clear:both;
}
js
<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery.kxbdMarquee.js"></script>
<script>
(function(){
$("#marquee1").kxbdMarquee({direction:"left"});
})();
</script>
jquery.kxbdMarquee.js
(function($){
$.fn.kxbdMarquee=function(options){
var opts=$.extend({},$.fn.kxbdMarquee.defaults, options);
return this.each(function(){
var $marquee=$(this); //滚动元素容器
var _scrollObj=$marquee.get(0); //滚动元素容器DOM
var scrollW=$marquee.width(); //滚动元素容器的宽度
var scrollH=$marquee.height(); //滚动元素容器的高度
var $element=$marquee.children(); //滚动元素
var $kids=$element.children(); //滚动子元素
var scrollSize=0; //滚动元素尺寸
//滚动类型，1左右，0上下
var _type=(opts.direction=="left"||opts.direction=="right") ? 1:0;
//防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度
$element.css(_type?"width":"height",10000);
//获取滚动元素的尺寸
if(opts.isEqual){
scrollSize=$kids_type?"outerWidth":"outerHeight"$kids.length;
}else{
$kids.each(function(){
scrollSize+=$(this)_type?"outerWidth":"outerHeight";
});
};
//滚动元素总尺寸小于容器尺寸，不滚动
if(scrollSize<(_type?scrollW:scrollH)){return;};
//克隆滚动子元素将其插入到滚动元素后，并设定滚动元素宽度
$element.append($kids.clone()).css(_type?"width":"height",scrollSize2);
var numMoved=0;
function scrollFunc(){
var _dir=(opts.direction=="left"||opts.direction=="right") ? "scrollLeft":"scrollTop";
if (opts.loop>0) {
numMoved+=opts.scrollAmount;
if(numMoved>scrollSize*opts.loop){
_scrollObj[_dir]=0;
return clearInterval(moveId);
};
};
if(opts.direction=="left"||opts.direction=="up"){
var newPos=_scrollObj[_dir]+opts.scrollAmount;
if(newPos>=scrollSize){
newPos-=scrollSize;
}
_scrollObj[_dir]=newPos;
}else{
var newPos=_scrollObj[_dir]-opts.scrollAmount;
if(newPos<=0){
newPos += scrollSize;
};
_scrollObj[_dir]=newPos;
};
};
//滚动开始
var moveId=setInterval(scrollFunc, opts.scrollDelay);
//鼠标划过停止滚动
$marquee.hover(function(){
clearInterval(moveId);
},function(){
clearInterval(moveId);
moveId=setInterval(scrollFunc, opts.scrollDelay);
});
});
};
$.fn.kxbdMarquee.defaults={
isEqual:true, //所有滚动的元素长宽是否相等,true,false
loop: 0, //循环滚动次数，0时无限
direction: "left", //滚动方向，"left","right","up","down"
scrollAmount:1, //步长
scrollDelay:20 //时长
};
$.fn.kxbdMarquee.setDefaults=function(settings) {
$.extend( $.fn.kxbdMarquee.defaults, settings );
};
})(jQuery);
3.（1）自定义滚动条样式（兼容ie8）
html
<div class="left">
<img src="imgs/shape_3.png" class="lef_img"/>
<div class="lef_content">
<div class="soncom">
<div class="container clear" style="width: 734px; border: 1px solid #dbdbdb;">
<div class="div_scroll">
<ul class="lef_ul clear">
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">股份有限公司</li>
<li class="lef_item">开发有限公司</li>
<li class="lef_item">都商用飞机股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">视股份有限公司</li>
<li class="lef_item">股份有限公司</li>
<li class="lef_item">房地产开发有限公司</li>
<li class="lef_item">商用飞机股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">股份有限公司</li>
<li class="lef_item">开发有限公司</li>
<li class="lef_item">商用飞机股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item"> (集团)股份有限公司</li>
<li class="lef_item">房地产开发有限公司</li>
<li class="lef_item">用飞机股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">股份有限公司</li>
<li class="lef_item">房地产开发有限公司</li>
<li class="lef_item">用飞机股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">股份有限公司</li>
<li class="lef_item">房地产开发有限公司</li>
<li class="lef_item">商用飞机股份有限公司</li>
</ul>
</div>
</div>
</div>
</div>
</div>
css
.container { height: auto; background-color: #fff;overflow: hidden; }
.container .div_scroll { width: 100%; height: 390px; overflow: auto; float: left; }
.container .scroll_container { overflow: hidden; position: relative; height: 390px; }
.container .scroll_absolute { position: absolute; padding-top: 10px !important; }
.container .scroll_vertical_bar {position: absolute;top: 0;right: 0;width: 8px;height: 100%;background: green;margin: 0;padding: 0; }
.container .scroll_track { position: relative; background-color: #e0e0e0; height: 390px; }
.container .scroll_drag { position: relative; top: 0; left: 0; cursor: pointer; background-color: #065daa; }
.container .scroll_arrow { text-indent: -20000px; display: block; cursor: pointer; background-color: #e0e0e0; }
.container .scroll_vertical_bar .scroll_arrow { height: 4px; }
/left/
.lef_img{
width:734px;
height:42px;
}
.lef_content{
width:734px;
height:390px;
background-color:#fff;
}
.lef_ul{
height:390px;
list-style: none;
padding:0;
font-size:16px;
margin-left:36px;
}
.lef_ul .lef_item{
width:26%;
float:left;
padding-left:24px;
border-bottom:1px dashed #000;
margin-top:20px;
}
.clear::after{
height:0;
line-height:0;
display:block;
visibility:hidden;
clear:both;
}
js(嵌入easyscroll.js插件)
（2）垂直滚动出现滚动条
html
<div class="left">
<img src="imgs/shape_3.png" class="lef_img"/>
<div class="lef_content">
<div class="swiper-container">
<div class="swiper-scrollbar"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<ul class="lef_ul clear">
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">集团)股份有限公司</li>
<li class="lef_item">房地产开发有限公司</li>
<li class="lef_item">商用飞机股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">(集团)股份有限公司</li>
<li class="lef_item">房地产开发有限公司</li>
<li class="lef_item">商用飞机股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">(集团)股份有限公司</li>
<li class="lef_item">房地产开发有限公司</li>
<li class="lef_item">商用飞机股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">(集团)股份有限公司</li>
<li class="lef_item">房地产开发有限公司</li>
<li class="lef_item">商用飞机股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">(集团)股份有限公司</li>
<li class="lef_item">房地产开发有限公司</li>
<li class="lef_item">商用飞机股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">电视股份有限公司</li>
<li class="lef_item">(集团)股份有限公司</li>
<li class="lef_item">房地产开发有限公司</li>
<li class="lef_item">商用飞机股份有限公司</li>
</ul>
</div>
</div>
</div>
</div>
</div>
css
.swiper-container {
width: 734px;
height: 390px;
}
.swiper-slide {
width: 734px;
background: #fff;
}
.swiper-scrollbar {
width: 4px;
height:100%;
position: absolute;
right: 0;
bottom: 5px;
z-index: 1;
}
.lef_img{
width:734px;
height:42px;
}
.lef_content{
width:734px;
height:390px;
background-color:#fff;
}
.lef_ul{
height:390px;
list-style: none;
margin:0px;
padding:0;
margin-left:36px;
}
.lef_ul .lef_item{
width:26%;
float:left;
padding-left:26px;
border-bottom:1px dashed #000;
margin-top:20px;
}
.clear::after{
height:0;
line-height:0;
display:block;
visibility:hidden;
clear:both;
}
js
var mySwiper = new Swiper('.swiper-container',{
scrollContainer: true,
mode:'vertical',
scrollbar:{
container: '.swiper-scrollbar'
}
})
4.背景拉伸
5.水平切换-轮播图
（1）swiper2水平自动滑动(兼容ie8)
html
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="title"><img src="imgs/lunbo1.png" width="1200" height="438"></div>
</div>
<div class="swiper-slide">
<div class="title"><img src="imgs/lunbo2.png" width="1200" height="438"></div>
</div>
<div class="swiper-slide">
<div class="title"><img src="imgs/lunbo3.png" width="1200" height="438"></div>
</div>
</div>
<div class="pagination"></div>
</div>
css
.swiper-container {
width: 1200px;
height: 438px;
color: #fff;
text-align: center;
}
.swiper-slide {
width: 1200px;
}
.pagination {
position: absolute;
z-index: 20;
left: 50%;
margin-left:-20px;
bottom: 10px;
}
.swiper-pagination-switch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #222;
margin-right: 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-visible-switch {
background: #aaa;
}
.swiper-active-switch {
background: #fff;
}
js
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
moveStartThreshold: 100,
autoplay: 1500,
loop:true
})
（2）自定义设置图片切换
Js
$(function(){
var i=0;
var len=$("#scroll ul li").length-1;
$("#scroll ul li").eq(0).fadeIn().siblings().hide();
$(".subl").click(function(){
if(i==len){
i=-1;
}
i++;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
});
$(".subr").click(function(){
if(i==0){
i=len+1;
}
i--;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
});
});
Css
'#scroll{width:100%;position:relative;padding-bottom: 90px;}
'#scroll ul{list-style:none;}
'#scroll ul li{width:100%;margin:0px; padding:0px; display:none;}
.subl{position:absolute;top:260px;left:-100px;z-index:99;cursor:pointer;}
.subr{position:absolute;top:260px;right:-100px;cursor:pointer;}
Html
<div id="scroll" style="width:1100px;margin:0 auto;">
<p class="subl"><img src="imgs/left_btn.png" width="100%" /><p/>
<p class="subr"><img src="imgs/right_btn.png" width="100%" /><p/>
<ul style="margin-left:70px;margin-top:70px;">
<li><img src="imgs/2-1.png" width="1000" height="670"/></li>
<li><img src="imgs/2-7.png" width="1000" height="670"/></li>
<li><img src="imgs/style.png" width="1000" height="670"/></li>
<li><img src="imgs/2-5.png" width="1000" height="670"/></li>
<li><img src="imgs/2-4.png" width="1000" height="670"/></li>
<li><img src="imgs/2-3.png" width="1000" height="670"/></li>
<li><img src="imgs/2-2.png" width="1000" height="670"/></li>
</ul>
</div>
6.秒杀倒计时
html
<div class="rag clear-fix" id="redandgreen"></div>
css
.clear-fix{zoom:1;}
.clear-fix:after{clear:both;content:"";display:block;visibility:hidden;}
.rag{margin:0 auto;width:40px;height:30px;}
.rag .zero{position:relative;float:left;_display:inline;margin-left:3.3%;height:100%;width:30%;}
.rag .zero .dot{position:absolute;width:25%;background-color:#ccc;}
.rag .zero .sel{background-color:#f00;}
js
function RedAndGreen(p){
this.node = typeof p.node == "string" ? document.getElementById(p.node) : p.node;
this.num = p.num;
this.tpl = '<s class="dot dot1"></s><s class="dot dot2"></s><s class="dot dot3"></s><s class="dot dot4"></s><s class="dot dot5"></s><s class="dot dot6"></s><s class="dot dot7"></s><s class="dot dot8"></s><s class="dot dot9"></s><s class="dot dot10"></s><s class="dot dot11"></s><s class="dot dot12"></s><s class="dot dot13"></s><s class="dot dot14"></s><s class="dot dot15"></s><s class="dot dot16"></s><s class="dot dot17"></s><s class="dot dot18"></s><s class="dot dot19"></s><s class="dot dot20"></s>';
this.rect = {
0:[0,1,2,3,4,5,6,7,8,11,12,13,14,15,16,17,18,19],
1:[3,5,7,11,13,15,19],
2:[0,1,2,3,5,7,8,9,10,11,12,14,16,17,18,19],
3:[0,1,2,3,5,7,8,9,10,11,13,15,16,17,18,19],
4:[0,3,4,5,6,7,8,9,10,11,13,15,19],
5:[0,1,2,3,4,6,8,9,10,11,13,15,16,17,18,19],
6:[0,1,2,3,4,6,8,9,10,11,12,13,14,15,16,17,18,19],
7:[0,1,2,3,5,7,11,13,15,19],
8:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19],
9:[0,1,2,3,4,5,6,7,8,9,10,11,13,15,16,17,18,19]
};
this.init();
}
RedAndGreen.prototype = {
_zs:[],
_t:null,
addClass:function(node,cls){
var reg = new RegExp("(^|\s+)" + cls + "(\s+|$)","g");
if(reg.test(node.className)){
reg.lastIndex = 0;
}else{
node.className += " " + cls;
reg.lastIndex = 0;
}
},
removeClass:function(node,cls){
var reg = new RegExp("(^|\s+)" + cls + "(\s+|$)","g");
var ncls = node.className;
if(reg.test(ncls)){
node.className = ncls.replace(cls,"").replace(/\s+/g," ").replace(/(^\s)|(\s$)/g,"");
reg.lastIndex = 0;
}else{
reg.lastIndex = 0;
}
},
getByClass:function(cls,p){
var _this = this,arr = [],reg = new RegExp("(^|\s+)" + cls + "(\s+|$)","g");
var nodes = p.getElementsByTagName("*"),len = nodes.length;
for(var i = 0; i < len; i++){
if(reg.test(nodes[i].className)){
arr.push(nodes[i]);
reg.lastIndex = 0;
}
}
return arr;
},
each:function(arr,func){
var len = arr.length;
for(var i = 0; i < len; i++){
func(arr[i]);
}
},
createNumber:function(){
var _this = this,dots = [];
for(var i = 0; i < 3; i++){
var newNode = document.createElement("div");
newNode.className = "zero";
newNode.innerHTML = _this.tpl;
_this.node.appendChild(newNode);
}
_this._zs = _this.getByClass("zero",_this.node);
_this.each(_this._zs,function(a){
//a.style.width = (1 / 3 * 100).toFixed(2) + "%";//可根据实际情况改成动态计算的
//a.style.marginLeft = "3%";
//a.style.width = "30%";
a.style.height = _this.node.clientHeight + "px";
});
dots = _this.getByClass("dot",_this.node);
_this.each(dots,function(a){
var _h = Math.floor(a.parentNode.offsetHeight / 8);
var _bdrz = a.offsetWidth / 2;
var _reg = /dot(\d{1,2})/g;
var _f = _reg.test(a.className);
var _one = RegExp.$1;
a.style.height = _h + "px";
a.style.borderRadius = _bdrz + "px";
if(_f && _one < 5){
a.style.left = (parseInt(_one) - 1) * a.offsetWidth + "px";
a.style.top = 0;
_reg.lastIndex = 0;
}else if(_f && _one == 5){
a.style.left = 0;
a.style.top = _h + "px";
_reg.lastIndex = 0;
}else if(_f && _one == 6){
a.style.left = "75%";
a.style.top = _h + "px";
_reg.lastIndex = 0;
}else if(_f && _one == 7){
a.style.left = 0;
a.style.top = 2 * _h + "px";
_reg.lastIndex = 0;
}else if(_f && _one == 8){
a.style.left = "75%";
a.style.top = 2 * _h + "px";
_reg.lastIndex = 0;
}else if(_f && _one > 8 && _one < 13){
a.style.left = (parseInt(_one) - 9) * a.offsetWidth + "px";
a.style.top = 3 * _h + "px";
_reg.lastIndex = 0;
}else if(_f && _one == 13){
a.style.left = 0;
a.style.top = 4 * _h + "px";
_reg.lastIndex = 0;
}else if(_f && _one == 14){
a.style.left = "75%";
a.style.top = 4 * _h + "px";
_reg.lastIndex = 0;
}else if(_f && _one == 15){
a.style.left = 0;
a.style.top = 5 * _h + "px";
_reg.lastIndex = 0;
}else if(_f && _one == 16){
a.style.left = "75%";
a.style.top = 5 * _h + "px";
_reg.lastIndex = 0;
}else if(_f && _one > 16 && _one < 21){
a.style.left = (parseInt(_one) - 17) * a.offsetWidth + "px";
a.style.top = 6 * _h + "px";
_reg.lastIndex = 0;
}
});
},
lightNumber:function(index,n){
var _this = this,dots = _this.getByClass("dot",_this._zs[index]),dl = dots.length,len = _this.rect[n].length;
for(var i = 0; i < dl; i++){
_this.removeClass(dots[i],"sel");
}
for(var i = 0; i < len; i++){
_this.addClass(dots[_this.rect[n][i]],"sel");
}
},
showNumber:function(mynum){
var _this = this,ns = [];
var number = mynum.toString();
for(; number.length < 3;){
number = "0" + number;
}
ns = number.split("");
for(var i = 0; i < ns.length; i++){
_this.lightNumber(i,ns[i]);
}
},
init:function(){
var _this = this,num = _this.num;
_this.createNumber();
_this.showNumber(num);
_this._t = setInterval(function(){
if(num > 0){
_this.showNumber(--num);
}else{
clearInterval(_this._t);
}
},1000);
}
};
new RedAndGreen({"node":"redandgreen","num":59});
7.
（1）拖拽购物车
这里是pc端拖拽，温馨提示：pc端与移动端拖拽有区分
css
body{ margin:0; padding:0;}
li{ list-style:none;}
li{ float:left; width:200px; border:1px #000 solid; margin:10px;}
li img{ width:200px;}
p{ height:20px; border-bottom:1px #333 dashed;}
'#div1{ width:600px; border:1px #000 solid; height:300px; clear:both;}
.box1{ float:left; width:200px;}
.box2{ float:left; width:200px;}
.box3{ float:left; width:200px;}
'#allMoney{ float:right;}
js
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var oDiv = document.getElementById('div1');
var obj = {};
var iNum = 0;
var allMoney = null;
for(var i=0;i<aLi.length;i++){
aLi[i].ondragstart = function(ev)
var aP = this.getElementsByTagName('p');
ev.dataTransfer.setData('title',aP[0].innerHTML);
ev.dataTransfer.setData('money',aP[1].innerHTML);
ev.dataTransfer.setDragImage(this,0,0);
};
}
oDiv.ondragover = function(ev){
ev.preventDefault();
};
oDiv.ondrop = function(ev){
ev.preventDefault();
var sTitle = ev.dataTransfer.getData('title');
var sMoney = ev.dataTransfer.getData('money');
if( !obj[sTitle] ){
var oP = document.createElement('p');
var oSpan = document.createElement('span');
oSpan.className = 'box1';
oSpan.innerHTML = 1;
oP.appendChild( oSpan );
var oSpan = document.createElement('span');
oSpan.className = 'box2';
oSpan.innerHTML = sTitle;
oP.appendChild( oSpan );
var oSpan = document.createElement('span');
oSpan.className = 'box3';
oSpan.innerHTML = sMoney;
oP.appendChild( oSpan );
oDiv.appendChild( oP );
obj[sTitle] = 1;
}
else{
var box1 = document.getElementsByClassName('box1');
var box2 = document.getElementsByClassName('box2')
for(var i=0;i<box2.length;i++){
if(box2[i].innerHTML == sTitle){
box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1;
}
}
}
if(!allMoney){
allMoney = document.createElement('div');
allMoney.id = 'allMoney';
}
iNum += parseInt(sMoney);
allMoney.innerHTML = iNum + '￥';
oDiv.appendChild( allMoney );
};
};
html
<ul>
<li draggable="true">
<img src="img1.jpg" />
<p>javascript语言精粹</p>
<p>40￥</p>
</li>
<li draggable="true">
<img src="img2.jpg" />
<p>javascript权威指南</p>
<p>120￥</p>
</li>
<li draggable="true">
<img src="img3.jpg" />
<p>精通javascript</p>
<p>35￥</p>
</li>
<li draggable="true">
<img src="img4.jpg" />
<p>DOM编程艺术</p>
<p>45￥</p>
</li>
</ul>
<div id="div1"></div>
（2）拖拽删除
css
li{ list-style:none; width:100px; height:30px; background:yellow; margin:10px;}
'#div1{ width:100px; height:100px; background:red; margin:200px;}
js
window.onload = function(){
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var oDiv = document.getElementById('div1');
var i = 0;
for(var i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].ondragstart = function(ev){
var ev = ev || window.event;
//ev.dataTransfer.setData('name','hello');
ev.dataTransfer.setData('name',this.index);
this.style.background = 'green';
};
/aLi[i].ondrag = function(){ //开始与结束连续触发
document.title = i++;
};/
aLi[i].ondragend = function(){
this.style.background = 'yellow';
};
}
oDiv.ondragenter = function(){
this.style.background = 'blue';
};
oDiv.ondragover = function(ev){
//enter和leave之间连续触发
//要想触发drop事件，就 必须在dragover当中阻止默认事件
//document.title = i++;
ev.preventDefault();
};
oDiv.ondragleave = function(){
this.style.background = 'red';
};
oDiv.ondrop = function(ev){
//alert(123);
//alert( ev.dataTransfer.getData('name') );
oUl.removeChild( aLi[ev.dataTransfer.getData('name')] );
for(var i=0;i<aLi.length;i++){
aLi[i].index = i;
}
};
};
html
<ul>
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
</ul>
<div id="div1"></div>
8．数字随机选择
js
window.onload = function(){
var oInput = document.getElementById('input1');
var oDiv = document.getElementById('div1');
var json = {};
oInput.onclick = function(){
var num = Math.random();
var arr = randomNum(35,7);
json[num] = arr;
oDiv.innerHTML = arr;
window.location.hash = num;
};
window.onhashchange = function(){
oDiv.innerHTML = json[window.location.hash.substring(1)];
};
function randomNum(iAll,iNow){
var arr = [];
var newArr = [];
for(var i=1;i<=iAll;i++){
arr.push(i);
}
for(var i=0;i<iNow;i++){
newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
}
return newArr;
}
};
html
<input type="button" value="随机选择" id="input1">
<div id="div1"></div>
9.文字滚动效果
css
.qimo8{ overflow:hidden; width:100px;}/宽度调整文字出来的长度/
.qimo8 .qimo {width:1000px; height:30px;}
.qimo8 .qimo div{ float:left;}
.qimo8 .qimo ul{float:left; height:30px; overflow:hidden; zoom:1; }
.qimo8 .qimo ul li{float:left; line-height:30px; list-style:none;}
.qimo8 li a{margin-right:10px;color:#444444;}
html
<div id="demo" class="qimo8">
<div class="qimo">
<div id="demo1">
<ul>
<li><a href="#" >环法全装备特惠</a></li>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>
js
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
demo2.innerHTML=document.getElementById("demo1").innerHTML;
function Marquee(){
if(demo.scrollLeft-demo2.offsetWidth>=0){
demo.scrollLeft-=demo1.offsetWidth;
}
else{
demo.scrollLeft++;
}
}
var myvar=setInterval(Marquee,30);
demo.onmouseout=function (){myvar=setInterval(Marquee,30);}
demo.onmouseover=function(){clearInterval(myvar);}
10.鼠标划线
css
body{ background:black;}
'#c1{ background:white;}
span{ color:white;}
js
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
oC.onmousedown = function(ev){
var ev = ev || window.event;
oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
document.onmousemove = function(ev){
var ev = ev || window.event;
oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
oGC.stroke();
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
};
html
<canvas id="c1" width="400" height="400">
<span> </span>
</canvas>
11.加入购物车
html
<div id="M-main-b">
<div class="M-main-list">
<div class="M-main-A left">
</div>
<div class="M-main-E left">
<a href="###" title="加入购物车" class="baseBg Q-buy-btn" id="buy-s-1">加入购物车</a>
<p><span class="attention-btn">立即购买</span></p>
</div>
</div>
<div class="M-main-list">
<div class="M-main-A left">
</div>
<div class="M-main-E left">
<a href="###" title="加入购物车" class="baseBg Q-buy-btn" id="buy-s-2">加入购物车</a>
<p><span class="attention-btn">立即购买</span></p>
</div>
</div>
<div class="M-main-list">
<div class="M-main-A left">
</div>
<div class="M-main-E left">
<a href="###" title="加入购物车" class="baseBg Q-buy-btn" id="buy-s-3">加入购物车</a>
<p><span class="attention-btn">立即购买</span></p>
</div>
</div>
<div class="M-main-list">
<div class="M-main-A left">
</div>
<div class="M-main-E left">
<a href="###" title="加入购物车" class="baseBg Q-buy-btn" id="buy-s-4">加入购物车</a>
<p><span class="attention-btn">立即购买</span></p>
</div>
</div>
<div class="M-main-list">
<div class="M-main-A left">
</div>
<div class="M-main-E left">
<a href="###" title="加入购物车" class="baseBg Q-buy-btn" id="buy-s-5">加入购物车</a>
<p><span class="attention-btn">立即购买</span></p>
</div>
</div>
<div class="M-main-list">
<div class="M-main-A left">
</div>
<div class="M-main-E left">
<a href="###" title="加入购物车" class="baseBg Q-buy-btn" id="buy-s-6">加入购物车</a>
<p><span class="attention-btn">立即购买</span></p>
</div>
</div>
</div>
<div class="J-shoping J-shoping-small">
<div class="J-shoping-item">
<a href="#" title="" id="U-attion"><em class="baseBg"></em>我关注的宝贝<span class="baseBg"></span></a>
<div class="baseBg J-L-ico J-shoping-pos"></div>
<div class="J-shoping-main">
<div class="J-shoping-title">
<a href="#" title="" class="J-go"><em class="baseBg"></em>购物车</a>
<span class="baseBg J-shoping-num">0</span>
</div>
<div class="baseBg J-shoping-mx"></div>
<div class="J-shoping-px"></div>
<div class="J-shoping-body">
<div class="J-shoping-buy">
<span>最多显示最新<strong></strong>条</span>
<a class="baseBg" href="#" title="去购物车结算"></a>
</div>
</div>
</div>
<div class="baseBg J-R-ico J-shoping-pos"></div>
</div>
</div>
js
$(function(){
$('.Q-buy-btn').shoping(); //调用shoping函数
});
css
body{margin:0;padding:0;list-style-type:none;}
.M-main-list a{text-decoration:none;color:#347bc7;}
.M-main-list a:hover{text-decoration:underline;}
.J-shoping-item a{text-decoration:none;color:#347bc7;}
.J-shoping-item a:hover{text-decoration:underline;}
.left{float:left;}
.right{float:right;}
.block{display:block;}
.clear{clear:both;}
/* J-shoping /
.baseBg{background-image:url(base_bg.png);background-repeat: no-repeat;font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.deleteBg{background-image:url(deleteBg.jpg);background-repeat: no-repeat;}
.J-shoping{height:34px;position:fixed;right:45px;bottom:0px;z-index:900;}
.J-shoping{position:absolute;top:expression(eval(document.documentElement.scrollTop));margin:500px 0 0 0;}
.J-shoping-item{position:relative;padding:0px 6px;height:34px;}
.J-shoping-pos{position:absolute;width:6px;height:34px;z-index:920;top:-3px;}
.J-L-ico{background-position:-55px -84px;left:0px;}
.J-R-ico{background-position:-66px -84px;right:0px;}
.J-shoping-main{position:relative;}
.J-shoping-title{height:27px;cursor:pointer;line-height:27px;padding:0px 10px 4px 10px;position:relative;z-index:920;background:url(bg5.png) repeat-x 0px 0px;}
.J-shoping-title .J-go{color:#fff;display:block;float:left;}
.J-shoping-title .J-go em{display:inline-block;width:17px;height:14px;vertical-align:middle;margin:-2px 10px 0px 0px;margin-top:0px\9;background-position:-56px -124px;}
.J-shoping-num{width:14px;height:14px;background-position:-28px -88px;text-align:center;overflow:hidden;line-height:14px;display:block;position:absolute;left:70px;top:2px;color:#fff;font-size:10px;}
.J-shoping-body{width:255px;display:none;border:solid 1px #d6d6d6;box-shadow:0px 0px 5px #8b8b8b;behavior: url(pie.htc);padding:10px 10px 35px 10px;position:absolute;bottom:5px;left:0px;background:url(p-bg.png) repeat;z-index:910;}
.J-shoping-list{padding:5px;color:#999;border:solid 1px #e3e3e3;background:#fff;height:50px;margin-bottom:10px;position:relative;}
.J-shoping-list-remove{background:#ffd2d3;}
.J-shoping-list img{float:left;}
.J-shoping-list-a{float:right;width:185px;}
.J-shoping-list-a p{height:25px;line-height:25px;}
.J-shoping-list-a p em{color:#0363BD;font-weight:bold;margin-right:3px;}
.J-shoping-close{position:absolute;cursor:pointer;right:5px;top:5px;width:11px;height:11px;background-position:-32px -147px;overflow:hidden;}
.J-shoping-close:hover{background-position:-41px -147px;}
.J-shoping-buy{height:26px;}
.J-shoping-buy span{float:left;color:#555;}
.J-shoping-buy a{width:112px;height:26px;background-position:-3px -249px;display:block;float:right;}
.J-shoping-buy a:hover{background-position:-3px -277px;}
.J-shoping-px{width:275px;border:solid 1px #d6d6d6;display:none;box-shadow:0px 0px 5px #8b8b8b;behavior: url(pie.htc);height:28px;position:absolute;bottom:5px;left:0px;background:url(p-bg.png) repeat;z-index:905;}
.J-shoping-mx{width:113px;position:absolute;left:-3px;top:-3px;height:3px;background-position:-4px -187px;z-index:921;}
.J-shoping-small{width:119px;}
'#floatOrder{width:50px;height:50px;padding:2px;background:#fff;border:solid 5px #e54144;overflow:hidden;position:absolute;z-index:890;}
.Q-online{width:28px;height:20px;display:block;background-position:-78px -130px;position:fixed;right:10px;bottom:13px;}
.Q-online{position:absolute;top:expression(eval(document.documentElement.scrollTop));margin:500px 0 0 0;}
'#U-attion{display:block;width:120px;padding-right:20px;height:28px;background:#eee;line-height:28px;text-align: center;border:solid 1px '#d0d0d0;color:#181818;position:absolute;left:-145px;top:-2px;}
'#U-attion em{display:inline-block;vertical-align:middle;margin:-2px 5px 0px 0px;margin-top:0px\9;width:16px;height:15px;background-position:-65px -47px;}
'#U-attion span{display:inline-block;width:22px;height:11px;background-position:-65px -32px;position:absolute;right:5px;top:2px;}
/ M-main */
.M-main-list{width:100%;padding:15px 0px;height:65px;}
.M-main-A{width:45%;height:63px;line-height:22px;padding-top:2px;}
.M-main-A-a{float:left;width:20%;position:relative;}
.M-main-A-a img{display:block;margin:0px auto;}
.M-main-A-a span{display:block;width:13px;height:13px;position:absolute;right:0px;bottom:0px;}
.M-main-A-b{float:right;width:75%;}
.M-main-A-b h3{font-size:14px;}
.M-main-A-b h3 em{display:inline-block;vertical-align:middle;margin:-2px 0px 0px 5px;margin-top:0px\9;}
.M-main-A-b h3 em.ico1{background-position:-25px -67px;width:17px;height:19px;}
.M-main-A-b h3 em.ico2{background-position:-3px -67px;width:17px;height:16px;}
.M-main-A-b h3 a{color:#0162bc;}
.M-main-A-b h3 span{color:#7c7c7c;font-size:12px;font-weight:normal;}
.M-main-A-b p{color:#999;}
.M-main-A-b span{margin-left:10px;}
.M-main-B{width:10%;text-align:center;padding-top:10px;}
.M-main-B span{color:#0363bd;font-weight:bold;margin-right:3px;}
.M-main-B .num{color:#999;}
.M-main-B .Number{padding-top:14px;}
.M-main-C{width:15%;text-align:center;padding-top:10px;}
.M-main-C a{color:#787878;text-decoration:underline;}
.M-main-D{width:11%;padding-left:4%;text-align:left;color:#999;padding-top:10px;position:relative;}
.M-main-D del{margin:0px 3px;}
.M-main-D span{font-weight:bold;color:#ff4400;margin:0px 3px;}
.M-main-D em{position:absolute;left:5px;top:30px;}
.M-main-E{width:15%;height:65px;text-align:center;}
.M-main-E a{display:block;color:#fff;background-position:-6px -193px;width:75px;height:21px;line-height:21px;padding-left:30px;margin:12px auto 0px;}
.M-main-E a:hover{text-decoration:none;}
.M-main-E a.dis-click{background-position:-3px -307px;color:#cdcdcd;cursor:default;}
.M-main-E span{cursor:pointer;color:#666;}
.M-main-E span.attention-btn-gz{color:#4ca100;cursor:default;}
.M-main-E span:hover{text-decoration:underline;}
.M-main-E span.attention-btn-gz:hover{text-decoration:none;}
'#buy-s-1{margin-left:100px;}/调整购物车的按钮位置/
.attention-btn{margin-left:60px;}/调整关注此资源的位置/
嵌入jQuery-shopping-1.js
$(function(){
$.extend($.fn,{
shoping:function(options){
var self=this,
$shop=$('.J-shoping'),
$title=$('.J-shoping-title'),
$body=$('.J-shoping-body'),
$num=$('.J-shoping-num'),
$close=$('.J-shoping-close');
var S={
init:function(){
$title.bind('click',this.clickOnTitle);
$close.live('click',this.removeList);
$(self).data('click',true).live('click',this.addShoping);
$(document).bind('click',S.slideBoxMini);
$body.bind('click',this.clickOnBody);
},
clickOnBody:function(e){
if(!$(e.target).hasClass('J-shoping-close')){
e.stopPropagation(); //阻止冒泡
};
},
addShoping:function(e){
e.stopPropagation();
var $target=$(e.target),
id=$target.attr('id'),
dis=$target.data('click'),
x = $target.offset().left + 30,
y = $target.offset().top + 10,
X = $shop.offset().left+$shop.width()/2-$target.width()/2+10,
Y = $shop.offset().top;
if(dis){
if ($('#floatOrder').length <= 0) {
$('body').append('<div id="floatOrder" id="test-1"><img src="pic1.png" width="50" height="50" /></div');/点击加入购物车图标对应/ };
var $obj=$('#floatOrder');
if(!$obj.is(':animated')){
$obj.css({'left': x,'top': y}).animate({'left': X,'top': Y-80},500,function() {
$obj.stop(false, false).animate({'top': Y-20,'opacity':0},500,function(){
$obj.fadeOut(300,function(){
$obj.remove();
$target.data('click',false).addClass('dis-click');
var l=$('.J-shoping-list').length,
num=Number($num.text());
if(l<num+1){/按照预览的图的数量/
$body.prepend('<div class="J-shoping-list" data-id="'+id+'"><a href="#" title=""><img src="pic1.png" width="50" height="50"/></a><div class="J-shoping-list-a"><p>彩涂板卷(镀铝锌基板)</p><p><span class="left">TDC51D+AZ</span><span class="right"><em>150.000</em>吨</span></p></div><div class="baseBg J-shoping-close"></div></div>');
};
$num.text(num+1);/收藏进入购物车的数量显示/
$('.J-shoping-buy span strong').text(num+1);
});
});
});
};
};
},
clickOnTitle:function(e){
e.stopPropagation();
var length=$('.J-shoping-list').length;
if(length>0){
if(!$shop.hasClass('J-shoping-small')){
$body.slideToggle();
}else{
$('.J-shoping-mx').hide();
$('.J-shoping-px').show();
$shop.animate({'width':289},100,function(){
$shop.removeClass('J-shoping-small');
$body.slideDown();
});
};
};
},
slideBoxMini:function(){
$('.J-shoping-px,.J-shoping-body').hide();
$('.J-shoping-mx').show();
$shop.animate({'width':119},100,function(){
$shop.addClass('J-shoping-small');
});
},
removeList:function(e){
e.stopPropagation();
var $target=$(e.target),
$parent=$target.parents('.J-shoping-list'),
id=$parent.attr('data-id');
$parent.addClass('J-shoping-list-remove').fadeOut(300,function(){
$('#'+id).data('click',true).removeClass('dis-click');
$parent.remove();
S.hideBody();
if(options&&options.callback){
options.callback($(self));
};
});
},
hideBody:function(){
var length=$('.J-shoping-list').length;
$num.text(length);
if(length==0){
$('.J-shoping-px,.J-shoping-body').hide();
$('.J-shoping-mx').show();
$shop.animate({'width':119},100,function(){
$shop.addClass('J-shoping-small');
});
};
}
};
S.init();
}
});
})(jQuery);
以上列出的特效是本人使用过的demo（只列出了部分），希望也可以帮助到读者们，若写的有不好，请大神指导纠正！
本文作者lilyping
越努力，越幸运
原文链接：https://www.jianshu.com/u/3908e601f4ec
微信公众号：BestLilyPing
github:https://github.com/lilyping
Demos源码地址：https://github.com/lilyping
