jQuery学习笔记（九）JQ实现放大镜，轮播图，无缝滚动实现
2018-02-05 09:50
459 查看
这篇为手打，记录原理！
无缝滚动和放大镜效果无缝滚动原理：设置好长条宽度和单一图片的高度，然后让一个DIV包裹，clone这个DIV，然后接到这个DIV之后就可以了
放大镜原理：显示的图片是原图缩小至少一倍。放大镜做一个DIV区域，用来显示图片的原图，根据鼠标移入和移出事件来调出隐藏的放大镜区域。根据鼠标移动的坐标来移动DIV区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../jquery.js"></script>
<script src="./login.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
#login{
width: 250px;
height: 100px;
border: 1px solid red;
position: absolute;
left: 387px;
z-index: 99999;
background: #00FFFF;
display: none;
}
table{
width: 250px;
height: 100px;
}
#bk{
background: #333333;
display: none;
position: absolute;
left: 0;
top: 0;
z-index: 99998;
opacity: 0.5;
filter:alpha(opacity=50);
/*透明度谷歌浏览器和IE分别设置*/
}
li a img{
width: 200px;
}
li{
list-style-type: none;
float: left;
}
#win{
width:1024px;
height: 310px;
border: 1px solid rgb(160,234,252);
overflow: hidden;
}
.image{
width:1600px;
float: left;
}
p{
height: 20px;
line-height: 20px;
text-align: center;
display: block;
}
#images{
width: 180px;
height: 245px;
border: 10px solid pink;
position: relative;
}
#fd{
width: 100px;
height: 100px;
background: yellow;
opacity: 0.4;
position:absolute;
top: 200px;
left: 0px;
cursor: move;
display: none;
}
#source{
width: 160px;
height: 160px;
border: 1px solid #ccc;
position: absolute;
right: -240px;
top: 0px;
display: none;
overflow: hidden;
border: 10px solid #CC3366;
}
#source img{
position: absolute;
top: 0px;
left: 0px;
}
#bk{
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 400px;
background: white;
opacity: 0.6;
filter:alpha(opacity=60);
}
</style>
<title>登录遮光特效</title>
</head>
<body>
<h2>图片放大镜</h2>
<h5>备注：此处的照片是上传后压缩的</h5>
<h5>JQ设置的放大的倍数也是取决于原图缩小的倍数</h5>
<div>
<div id="images">
<img src="./img/1.jpg" alt="" width="170px"/>
<div id="fd"></div>
<div id="source">
<img src="./img/1.jpg" alt="">
</div>
</div>
<button>登录</button>
<div id=login>
<form action="" id="reg">
<table>
<tr><td>用户名</td><td><input type="text"></td></tr>
<tr><td>密码</td><td><input type="text"></td></tr>
<tr>
<td>
<input type="submit" value="提交">
<input type="reset" value="清空">
</td>
<td>
<input type="button" id="close" value="关闭">
</td>
</tr>
</table>
</form>
</div>
<h2>图片无缝滚动</h2>
<div id="win">
<div style="width: 2000px;">
<div id="image" name="image">
<li>
<a href="">
<img src="./img/1.jpg" alt=""/>
</a>
<p>挑选天字号</p>
</li>
<li>
<a href="">
<img src="./img/2.jpg" alt=""/>
</a>
<p>挑选一号</p>
</li>
<li>
<a href="">
<img src="./img/3.jpg" alt=""/>
</a>
<p>挑选二号</p>
</li>
<li>
<a href="">
<img src="./img/4.jpg" alt=""/>
</a>
<p>挑选三号</p>
</li>
<li>
<a href="">
<img src="./img/5.jpg" alt=""/>
</a>
<p>挑选四号</p>
</li>
<li>
<a href="">
<img src="./img/6.jpg" alt=""/>
</a>
<p>挑选五号</p>
</li>
<li>
<a href="">
<img src="./img/7.jpg" alt=""/>
</a>
<p>挑选六号</p>
</li>
<li>
<a href="">
<img src="./img/8.jpg" alt=""/>
</a>
<p>挑选七号</p>
</li>
</div>
</div>
</div>
<div id="bk">
</body>
</html>无缝滚动和是放大镜实现效果JS文件：
$(function(){
//找到button，绑定点击事件
$("button").click(function(){
//获取可见窗口的宽度和高度
var docdq=$(document).scrollTop();//定位到当前元素到上面的高度
var winW=$(window).height();
var pageW=$(document).width();
var pageH=$(window).height();
var sleft=pageW/2-$("#login").width()/2;
var stop=pageH/2-$("#login").height()/2;
//让登陆层和遮罩层显示出来
$("#login").fadeIn(1000).css({"left":sleft,"top":(docdq+stop)});
$("#bk").fadeIn(1000).css({"width":pageW,"height":pageH,"top":docdq});
$(document.body).css({
//禁止窗口滑动
"overflow-x":"hidden",
"overflow-y":"hidden"
});
});
$("#close").click(function(){
$("#login").fadeOut(1000);
$("#bk").fadeOut(1000);
//禁止滑动解除
$(document.body).css({
"overflow-x":"auto",
"overflow-y":"auto"
});
});
/*表单清空
myform.onsubmit=function(){
return false;
}
*/
/*图片滚动开始*/
//图片滚动特效
//1,克隆图片层出来
var speed=10;
var img=$("#image").clone(true);
img.insertAfter($("#image"));
//2,让第一个image层向左移动
var s=setInterval(function(){
//3,判断第一个图片层是否已经去阿奴已经出去，如果已经全部出去，让该层回到初始状态
if(parseInt($("#image").first().css("margin-left"))<=-1600){
$("#image").first().css("margin-left",0);
}
$("#image").first().css("margin-left","-=1px");
},speed);
//给image做一个划入和划出效果
$("#image").hover(function(){
clearInterval(s);
},function(){
s=setInterval(function(){
if(parseInt($("#image").first().css("margin-left"))<=-1600){
$("#image").first().css("margin-left",0);
}
$("#image").first().css("margin-left","-=1px");
},speed);
});
/*图片滚动结束*/
/*图片放大镜开始*/
//1,让黄色的层跟着鼠标走
$("#images").mousemove(function(e){
var sleft=e.clientX-$(this).offset().left-$("#fd").width()/2;
var stop=e.clientY-$(this).offset().top-$("#fd").height()/2;
if(sleft<=0){
sleft=0;//处理越界操作
}
if(stop<=0){
stop=0;//处理越界操作
}
if(sleft>=$("#images").width()-$("#fd").width()){
sleft=$("#images").width()-$("#fd").width();
}
if(stop>=$("#images").height()-$("#fd").height()){
stop=$("#images").height()-$("#fd").height();
}
//黄层移动
$("#fd").css({"top":stop,"left":sleft});
//让大图移动
$("#source").find("img").css({"top":-stop*2,"left":-sleft*2});
//放大倍数
}).hover(function(){
$("#fd").show();
$("#source").show();
},function(){
$("#fd").hide();
$("#source").hide();
});
/*图片放大镜结束*/
});图片轮播HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
li{
list-style-type: none;
float: left;
color: #ccc;
}
#index{
position: absolute;
right: 480px;
top: 400px;
font-size: 130px;
}
b{
position: absolute;
bottom: 5px;
left: 10px;
font-family: Microsoft YaHei;
color: #444;
}
#wind{
width: 960px;
height: 450px;
border: 10px solid #FF3366;
position: relative;
overflow: hidden;
}
#bk{
position: absolute;
bottom: 0;
left: 0;
height: 30px;
width: 960px;
background: white;
opacity: 0.6;
filter:alpha(opacity=60);
}
</style>
<script src="../jquery.js"></script>
<script src="./lunbo.js"></script>
<title>Document</title>
</head>
<body>
<h2>轮播图切换</h2>
<div id="wind">
<div id="image1">
<li alt="第一个图片">
<a href=""><img src="./img/11.jpg" ></a>
</li>
<li alt="第二个图片">
<a href=""><img src="./img/22.jpg" ></a>
</li>
<li>
<a href="" alt="第二个图片"><img src="./img/33.jpg" alt="第三个图片"></a>
</li>
<li>
<a href="" alt="第三个图片"><img src="./img/44.jpg" alt="第四个图片"></a>
</li>
<li>
<a href=""><img src="./img/55.jpg" alt="第五个图片"></a>
</li>
<li>
<a href=""><img src="./img/66.jpg" alt="第六个图片"></a>
</li>
</div>
</div>
<div id="bk"></div>
<b>第一个美女&
b602
lt;/b>
<div id="index">
<li>·</li>
<li>·</li>
<li>·</li>
<li>·</li>
<li>·</li>
<li>·</li>
</div>
</body>
</html>图片轮播JS
$(function(){
/*幻灯片播放开始*/
//1,初始化操作
var s=null;
var index=0;
$("#image1").find("li").hide();
$("#image1").find("li").first().show();
$("#index").find("li").first().css("color","rgb(120,234,252)");
/*幻灯片播放结束*/
//2,制作手动的切换
$("#index").find("li").click(function(){
//先获取当前点击的li的索引
index=$(this).index();
//找到该索引下的图片显示出来
$("#image1").find("li").hide();
$("#image1").find("li").eq(index).show();
//给索引点改变颜色
$("#index").find("li").css("color","#444");
$("#index").find("li").eq(index).css("color","#FF0000");
//修改图片说明
info=$("image1").find("li").eq(index).find("a").attr("alt");
$("#wind").find("b").html(info);
});
//完成自动切换
s=setInterval(function(){
if(index>4){
index=0;
}
$("#index").find("li").eq(index).trigger("click");
index++;
},3000);
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery+css实现图片无缝滚动轮播
- iOS 无缝连接滚动轮播图的一种实现思路
- JS实现文字向上无缝滚动轮播
- Jquery+css实现图片无缝滚动轮播
- js实现图片的无缝轮播滚动
- banner轮播无缝滚动 jq代码
- jq 实现无缝轮播
- JQ实现无缝滚动
- 在页面上实现无缝滚动
- JS实现文字无缝滚动
- margin 和 节点操作实现无缝滚动(跑马灯)
- jQuery插件实现左右无缝轮播
- 无缝滚动和轮播
- js面向对象实现无缝轮播图
- JS让图片无缝滚动的实现（JS代码讲解，非直拷型内容）
- 无缝滚动—marquee实现向上滚动（适合发布通告）
- jq实现方向轮播图-简易版
- 使用Javascript简单实现图片无缝滚动
- 用原生的javascript 实现一个无限滚动的轮播图