前端框架之jQuery 轮播图，放大镜
事件
页面载入
ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){})
事件处理
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
// .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
// $('ul').on('click', 'li', function())就是筛选出ul下的li给其绑定
// click事件；
[selector]参数的好处:
好处在于.on方法为动态添加的元素也能绑上指定事件；如：
//$('ul li').on('click', function())的绑定方式和
//$('ul li').bind('click', function())一样；我通过js给ul添加了一个
//li：$('ul').append('
js new li
')；这个新加的li是不会被绑上click事件的
//但是用$('ul').on('click', 'li', function()方式绑定，然后动态添加
//li:$('ul').append('
js new li
');这个新生成的li被绑上了click事件
[data]参数的调用:
function myHandler(event) {
alert(event.data.foo);
}
$("li").on("click", , myHandler)
实例之面板拖动
标题
内容
$(function(){
// 页面加载完成之后自动执行
$('#title').mouseover(function(){
$(this).css('cursor','move');
}).mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
// 原始鼠标横纵坐标位置
var ord_x = _event.clientX;
var ord_y = _event.clientY;
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
$(this).bind('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;
var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y);
$(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px');
})
}).mouseup(function(){
$(this).unbind('mousemove');
});
})
实例之放大镜
bigger
*{
margin: 0;
padding:0;
}
.outer{
height: 350px;
width: 350px;
border: dashed 5px cornflowerblue;
}
.outer .small_box{
position: relative;
}
.outer .small_box .float{
height: 175px;
width: 175px;
background-color: darkgray;
opacity: 0.4;
fill-opacity: 0.4;
position: absolute;
display: none;
}
.outer .big_box{
height: 400px;
width: 400px;
overflow: hidden;
position:absolute;
left: 360px;
top: 0px;
z-index: 1;
border: 5px solid rebeccapurple;
display: none;
}
.outer .big_box img{
position: absolute;
z-index: 5;
}
$(function(){
$(".small_box").mouseover(function(){
$(".float").css("display","block");
$(".big_box").css("display","block")
});
$(".small_box").mouseout(function(){
$(".float").css("display","none");
$(".big_box").css("display","none")
});
$(".small_box").mousemove(function(e){
var _event=e || window.event;
var float_width=$(".float").width();
var float_height=$(".float").height();
console.log(float_height,float_width);
var float_height_half=float_height/2;
var float_width_half=float_width/2;
console.log(float_height_half,float_width_half);
var small_box_width=$(".small_box").height();
var small_box_height=$(".small_box").width();
// 鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理
var mouse_left=_event.clientX-float_width_half;
var mouse_top=_event.clientY-float_height_half;
if(mouse_left
mouse_left=0
}else if (mouse_left>small_box_width-float_width){
mouse_left=small_box_width-float_width
}
if(mouse_top
mouse_top=0
}else if (mouse_top>small_box_height-float_height){
mouse_top=small_box_height-float_height
}
$(".float").css("left",mouse_left+"px");
$(".float").css("top",mouse_top+"px")
var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);
var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);
console.log(percentX,percentY)
$(".big_box img").css("left", -percentX*mouse_left+"px")
$(".big_box img").css("top", -percentY*mouse_top+"px")
})
})
动画效果
回调函数
Title
hide
helloworld helloworld helloworld
$("button").click(function(){
$("p").hide(1000,function(){
alert($(this).html())
})
})
扩展方法 (插件机制)
用JQuery写插件时，最核心的方两个方法
$.extend(object) //为JQuery 添加一个静态方法。
$.fn.extend(object) //为JQuery实例添加一个方法。
jQuery.extend({
min: function(a, b) { return a
max: function(a, b) { return a > b ? a : b; }
});
console.log($.min(3,4));
//-----------------------------------------------------------------------
$.fn.extend({
"print":function(){
for (var i=0;i
console.log($(this)[i].innerHTML)
}
}
});
$("p").print();
实例之注册验证
Title
li{
list-style: disc;;
}
img{
display: block;
height: 200px;
}
// 注意:
// DOM对象--->jquery对象 $(DOM)
// jquery对象--->DOM对象 $("")[0]
//---------------------------------------------------------
// DOM绑定版本
function validate(){
flag=true;
$("Form .v1").each(function(){
$(this).next("span").remove();// 防止对此点击按钮产生多个span标签
var value=$(this).val();
if (value.trim().length==0){
var mark=$(this).attr("mark");
var ele=document.createElement("span");
ele.innerHTML=mark+"不能为空!";
$(this).after(ele);
$(ele).prop("class","error");// DOM对象转换为jquery对象
flag=false;
// return false-------->引出$.each的return false注意点
}
});
return flag
}
轮播图
轮播图
* {
margin: 0;
padding: 0;
}
#Number li{
width: 50px;
height: 50px;
background-color: #303a40;
color: white;
text-align: center;
line-height: 50px;
border-radius: 50%;
margin-left: 30px;
font-size: large;
list-style-type: none;
display: inline-block;
}
#Number{
position: absolute;
width: 100%;
text-align: center!important;
top: 80%;
}
.outer{
cursor: pointer;
width: 60%;
height: 75%;
position: absolute;
left: 50%;
top: 10%;
margin-left: -30%;
}
.outer:hover .button{
display: inline-block;
}
.img img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.button{
display: none;
opacity: 0.3;
color: white;
font-size: 50px;
text-align: center;
line-height: 80px;
top: 50%;
margin-top: -40px;
position: absolute;
width: 80px;
height: 80px;
background-color: black;
}
.r{
right: 0;
}
.l1{
background-color: red!important;
}
>
var arr=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg']
$.each(arr,function (i,v) {
console.log(i)
$('.img').append("")
if(i==0){
$('ul').append("
"+(i+1)+"
")
}else{
$('ul').append("
"+(i+1)+"
")
}
})
$('.img').append("")
$('#Number li').mouseover(function () {
$(this).addClass('l1').siblings().removeClass('l1')
var index=$(this).index()
i=index
$('.img a').eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
})
var time = setInterval(move,2000)
var i =0;
function move() {
if(i==arr.length-1){
i=-1
}
i++
$('#Number li').eq(i).addClass('l1').siblings().removeClass('l1')
$('.img a').eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
$('.outer').hover(function () {
clearInterval(time)
},function () {
time=setInterval(move,2000)
})
$('.r').click(function () {
move()
})
$('.l').click(function () {
if(i==0){
i=arr.length
}
i--
$('#Number li').eq(i).addClass('l1').siblings().removeClass('l1')
$('.img a').eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
})
识别图中二维码,领取python全套视频资料
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20180702A09QEZ00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
