图片 16

jq完成炫目的鼠标经过图片翻滚效果,案例集合

By admin in web前端 on 2019年7月30日

好景相当长的十多行代码就贯彻了八个炫耀的图片翻滚代码,要促成这几个职能并简单,只要思路对了,一切都好办,相当的少说了,间接上代码看成效!

*例一 鼠标提示并列整个列表向上滚动

html结构:

js代码

//左导航提醒框
var Xzhi,Yzhi;
$(‘a.tooltip’).mouseover(function(e){
Xzhi = e.pageX + 10;
Yzhi = e.pageY + 10;
var Tooltip = $(‘<div class=”tip”>’+this.title+'</div>’);
$(‘body’).append(Tooltip);
$(‘.tip’).hide().show(1000);
$(‘.tip’).css({‘left’:”+Xzhi+’px’,’top’ : ”+Yzhi+’px’});
}).mouseout(function(){
$(‘.tip’).remove();
}).mousemove(function(e){
Xzhi = e.pageX + 10;
Yzhi = e.pageY + 10;
$(‘.tip’).css({‘left’:”+Xzhi+’px’,’top’ : ”+Yzhi+’px’});
})
//向上移动部分
var timer;
$(‘.scrollNews ul’).hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function(){
var Ul = $(‘.scrollNews ul’);
var height = Ul.find(“li:first”).height();
Ul.animate({‘marginTop’:- height + ‘px’},600,function(){
Ul.css({marginTop:0}).append(Ul);
})
},2000);
}).trigger(“mouseleave”);

复制代码 代码如下:

html代码

<div class=”scrollNews”>
<ul>
<li><a href=”#” class=”tooltip”
title=”甜美宽松半袖今秋必将红.”>甜美宽松马夹今秋必将红.</a></li>
<li><a href=”#” class=”tooltip”
title=”秋装百搭小马夹不到50元.”>秋装百搭小马甲不到50元.</a></li>
<li><a href=”#” class=”tooltip”
title=”修身韩版小西装万人疯抢.”>修身韩版小西装万人疯抢.</a></li>
<li><a href=”#” class=”tooltip”
title=”夏末雪纺店主含泪大甩卖.”>夏末雪纺店主含泪大甩卖.</a></li>
<li><a href=”#” class=”tooltip”
title=”瑞丽都疯狂推荐的秋装.”>瑞丽都疯狂推荐的秋装.</a></li>
<li><a href=”#” class=”tooltip”
title=”48元长款针织小开衫卖疯啊.”>48元长款针织小开衫卖疯啦.</a></li>
<li><a href=”#” class=”tooltip”
title=”长袖雪纺衫单穿内搭都超美.”>长袖雪纺衫单穿内搭都超美.</a></li>
</ul>
</div>

<ul class=”list”>
<li><img src=”images/10.jpg” alt=”” /><a
href=”#”><span>1</span></a></li>
<li><img src=”images/11.jpg” alt=”” /><a
href=”#”><span>2</span></a></li>
<li><img src=”images/12.jpg” alt=”” /><a
href=”#”><span>3</span></a></li>
<li><img src=”images/13.jpg” alt=”” /><a
href=”#”><span>4</span></a></li>
<li><img src=”images/10.jpg” alt=”” /><a
href=”#”><span>5</span></a></li>
<li><img src=”images/11.jpg” alt=”” /><a
href=”#”><span>6</span></a></li>
<li><img src=”images/12.jpg” alt=”” /><a
href=”#”><span>7</span></a></li>
<li><img src=”images/13.jpg” alt=”” /><a
href=”#”><span>8</span></a></li>

css代码

.scrollNews{
background:#fff;
width:200px;
height:85px;
line-height:20px;
overflow:hidden;
}
.tip{
position:absolute;
border: 1px solid #000;
background:#ffe699;
color:#f00;
z-index:1000;
}

</ul>

效果图

图片 1

css代码:

*例二 左右轮转,每一次只滚动一张图片

复制代码 代码如下:

html代码

<div class=”goods_content”>
<ul>
<li>
<dl>
<dt><a href=”detail.html”><img src=”images/img_1.jpg”
alt=””><span></span></a></dt>
<dd>免烫高支棉胸罩3</dd>
<dd>$120.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href=”detail.html”><img src=”images/img_2.jpg”
alt=””><span></span></a></dt>
<dd>免烫斜纹背心</dd>
<dd>$129.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href=”detail.html”><img src=”images/img_3.jpg”
alt=””><span></span></a></dt>
<dd>棉小方格正装T恤</dd>
<dd>$129.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href=”detail.html”><img src=”images/img_4.jpg”
alt=””><span></span></a></dt>
<dd>HUAWEI兰格外套墨紫</dd>
<dd>$129.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href=”detail.html”><img src=”images/img_1.jpg”
alt=””><span></span></a></dt>
<dd>免烫高支棉毛衣3</dd>
<dd>$120.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href=”detail.html”><img src=”images/img_2.jpg”
alt=””><span></span></a></dt>
<dd>免烫斜纹半袖</dd>
<dd>$129.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href=”detail.html”><img src=”images/img_3.jpg”
alt=””><span></span></a></dt>
<dd>棉小方格正装外套</dd>
<dd>$129.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href=”detail.html”><img src=”images/img_4.jpg”
alt=””><span></span></a></dt>
<dd>HTC兰格T恤土灰</dd>
<dd>$129.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href=”detail.html”><img src=”images/img_1.jpg”
alt=””><span></span></a></dt>
<dd>免烫高支棉羽绒服3</dd>
<dd>$120.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href=”detail.html”><img src=”images/img_2.jpg”
alt=””><span></span></a></dt>
<dd>免烫斜纹马夹</dd>
<dd>$129.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href=”detail.html”><img src=”images/img_3.jpg”
alt=””><span></span></a></dt>
<dd>棉小方格正装西服</dd>
<dd>$129.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href=”detail.html”><img src=”images/img_4.jpg”
alt=””><span></span></a></dt>
<dd>Nokia兰格T恤青古铜色</dd>
<dd>$129.00</dd>
</dl>
</li>
</ul>
</div>

*{ margin:0; padding:0;}
.list{ width:640px; margin:100px auto; border:1px solid #ddd;
overflow:hidden;}
.list li{ float:left; width:150px; height:80px; overflow:hidden;
list-style:none; margin:5px; display:inline; position:relative;}
.list li img{ float:left; width:150px; height:80px; border:none;}
.list li a{ position:absolute; left:0; top:0; width:150px; height:0;
background:#999; margin-top:40px; display:inline; text-align:center;
line-height:80px; overflow:hidden; color:#fff; text-decoration:none;}

js代码

//横向滚动
var i = 4;//可知页面有多少个
var m = 4;//变量的变化
var count = $(‘.goods_content li’).length;
var goods_content = $(‘.goods_content’);
$(‘.right’).click(function(){
//alert(1);
if(! goods_content.is(“:animated”)){
if(m<count){
m++;
goods_content.animate({left:’-=146px’},600);
}
}
})
$(‘.left’).click(function(){
if(! goods_content.is(“:animated”)){
if(m>i){
m–;
goods_content.animate({left:’+=146px’},600);
}
}
})

jq代码(注意要引进jq库):

css代码

.content_right .goods{
width:586px;
height:220px;
margin-bottom:10px;
overflow:hidden;
background:#FFFFFF;
}
.content_right .goods .btn{
float:right;
margin:5px 10px 0px 0px;
}
.content_right .goods .goods_content{
width:1800px;
position:absolute;
top:26px;
left:0;
padding:20px 0px 0px 8px;
}
.goods .goods_content ul{
float:left;
height:220px;
float:left;
}
.goods .goods_content ul li{
float:left;
display:inline;
margin-right:22px;
text-align:center;
position:relative;
}
.goods .goods_content ul li img{
width:124px;
height:124px;
background:#eee;
border:none;
}

复制代码 代码如下:

效果图

图片 2

$(function () {
$(‘.list li’).hover(function () {
$(this).children(‘a,img’).stop();
$(this).children(‘img’).stop().animate({ ‘marginTop’: 40, ‘height’: 0 },
200, function () {
$(this).siblings(‘a’).stop().animate({ ‘height’: 80, ‘marginTop’: 0 },
200);
});

*例三滚动轮播图

}, function () {
$(this).children(‘a,img’).stop();
$(this).children(‘a’).stop().animate({ ‘height’: 0, ‘marginTop’: 40 },
200, function () {
$(this).siblings(‘img’).stop().animate({ ‘marginTop’: 0, ‘height’: 80 },
200);

html代码

<div class=”ad”>
<ul>
<li><img src=”images/ads/1.gif” alt=””></li>
<li><img src=”images/ads/2.gif” alt=””></li>
<li><img src=”images/ads/3.gif” alt=””></li>
<li><img src=”images/ads/4.gif” alt=””></li>
<li><img src=”images/ads/5.gif” alt=””></li>
</ul>
<ol>
<li class=”accuent”>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>

});
});

jq代码

//ad广告部分
var num =0,
timer = null,
index= 0,
length = $(‘.ad ol li’).length;

function changeImg(index){
var height = $(‘.ad’).height();
$(‘.ad ul’).animate({top:-height * index},1000);
$(‘.ad ol li’).removeClass(‘accuent’).eq(index).addClass(‘accuent’);
}
$(‘.ad ol li’).mouseover(function(){
index = $(‘.ad ol li’).index(this);
changeImg(index);
})
$(‘.ad’).hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function(){
changeImg(index);
index ++ ;
if(index == length){
index= 0;
}
},2000);
}).trigger(“mouseleave”);

});

*css代码

.content_right{
width:586px;
background:#eee;
border: 1px solid #AAA;
float:left;
}

.content_right .ad{
width:586px;
height:150px;
overflow:hidden;
position:relative;
margin-bottom:10px;
}
.content_right .ad ul{
position:absolute;
z-index:8;
}
.content_right .ad ol{
position:absolute;
z-index:10;
bottom:10px;
right:0px;
}
.content_right .ad ol li{
float:left;
width:20px;
height:20px;
background:#fff;
border: 1px solid #000;
margin-right:10px;
line-height:20px;
text-align:center;
cursor:pointer;
font-weight:bolder;
}
.content_right .ad ol li.accuent{
border: 1px solid #f00;
color:#f00;
}

是还是不是一点也不细略的几句jq代码?亲,无妨copy下来看下效果呗!

*效果图

图片 3

您只怕感兴趣的稿子:

  • 兼容ie和firefox的鼠标经过(onmouseover和onmouseout)落成–简短版
  • js达成图片展现局地,鼠标经过显示任何的成效
  • Javascript达成的鼠标经过时播放声音
  • 鼠标经过导航菜单时颜色改造作用
  • javascript学习笔记(二)
    鼠标经过时,更换div块的背景象的代码
  • javascript中onmouse事件在div中失效难点的消除方式
  • jquery插件实现鼠标经过图片侧边突显大图的效能(类似天猫)
  • 鼠标经过展现二级菜单js特效
  • CSS鼠标响应事件经过、移动、点击示例介绍
  • jquery左右轮转核心图banner图片鼠标经过展现上下页按键
  • jquery给图片增加鼠标经过时的边框效果
  • jquery简单落到实处鼠标经过导航条改换背景图
  • 鼠标经过tr时,退换tr当前背景颜色
  • Jquery中夏族民共和国地图热销效应-鼠标经过弹出提醒层新闻的简易实例
  • jQuery
    鼠标经过(hover)事件的延时管理示例
  • 利用mouse事件完毕轻便的鼠标经过特效

*例四网页换肤

*html代码

<ul id=”skin”>
<li id=”skin_0″ title=”蓝色” class=”selected”>蓝色</li>
<li id=”skin_1″ title=”紫色”>紫色</li>
<li id=”skin_2″ title=”红色”>红色</li>
<li id=”skin_3″ title=”天蓝色”>天蓝色</li>
<li id=”skin_4″ title=”橙色”>橙色</li>
<li id=”skin_5″ title=”淡绿色”>淡绿色</li>
</ul>

图片 4

*css代码

图片 5

图片 6

图片 7

*jq代码

//网页换肤部分
$(‘#skin li’).click(function(){
$(this).addClass(‘selected’).siblings().removeClass(‘selected’);
$(‘#cssfile’).attr(‘href’,’css/skin/’+this.id+’.css’);
})
*内需的按键换肤图片

图片 8

*效果图

图片 9

例五 *进展瘾藏

*html代码

<ul class=”item”>
<li class=”active”>
<span>衬衫</span>
<ul>
<li><a href=”#”>短袖胸罩</a></li>
<li><a href=”#”>长袖半袖</a></li>
</ul>
</li>
<li >
<span>卫衣</span>
<ul>
<li><a href=”#”>开襟卫衣</a></li>
<li><a href=”#”>套头卫衣</a></li>
</ul>
</li>
<li>
<span>裤子</span>
<ul>
<li><a href=”#”>休闲裤</a></li>
<li><a href=”#”>免烫卡其裤</a></li>
<li><a href=”#”>牛仔裤</a></li>
<li><a href=”#”>短裤</a></li>
</ul>
</li>
</ul>

*css代码

ul.item{
padding:5px 0px 5px 15px;
}
.item{
background:#fff;
}
.procude .item li span{
background:url(..treeview-expanded.gif) no-repeat 0px 0px;
padding-left:20px;
}
.item li.active span{
background:url(..treeview-collapsed.gif) no-repeat 0px 0px;
}
.item ul{
margin-left:40px;
}
.item li{cursor:pointer;}
.item .active ul{
display:none;
}
.procude .item ul li{
list-style-image:url(..treeview-item.gif);
}

*jq代码

$(‘.item li span’).click(function(){
$(this).parent().toggleClass(‘active’);
});

*效果图

图片 10

例六 征引jqzoom.js完成放大镜效果

html代码

<div class=”jqzoom”>
<img src=”images/pro_img/blue_one_small.jpg” class=”fs” alt=””
jqimg=”images/pro_img/blue_one_big.jpg” id=”bigImg” >
</div>
<span>
<a href=”images/pro_img/blue_one_big.jpg” id=”thickImg”
title=”介绍文字”>
<img alt=”点击看大图” src=”images/look.gif” />
</a>
</span>
<ul class=”imgList”>
<li><img src=”images/pro_img/blue_one.jpg” alt=””
/></li>
<li><img src=”images/pro_img/blue_two.jpg” alt=””
/></li>
<li><img src=”images/pro_img/blue_three.jpg” alt=””
/></li>
</ul>

*css代码

.jqzoom{
border:1px solid #BBB;
float:left;
position:relative;
padding:0px;
cursor:pointer;
}
div.zoomdiv {
z-index: 999;
position: absolute;
top:0px;
left:0px;
width: 200px;
height: 200px;
background: #ffffff;
border:1px solid #CCCCCC;
display:none;
text-align: center;
overflow: hidden;
}
div.jqZoomPup {
z-index : 999;
visibility : hidden;
position : absolute;
top:0px;
left:0px;
width: 50px;
height: 50px;
border: 1px solid #aaa;
background: #ffffff ;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(Opacity=50);
}
.jqzoom .fs{
width:300px;
height:300px;
}
.detail_left span{
display:block;
width:310px;
text-align:center;
padding:10px 0px;
}
.detail_left .imgList{
height:80px;
}
.detail_left .imgList li{
float:left;
margin-right:10px;
}
.detail_left .imgList li img{
width:60px;
height:60px;
padding:1px;
background:#EEE;
cursor:pointer;
}
.detail_left .imgList li img:hover{
padding:1px;
background:#999;
}

*jq代码

//引用jqzoom插件
$(“.jqzoom”).jqueryzoom({
xzoom: 300, //放大图的幅度(暗中同意是 200)
yzoom: 300, //放大图的莫斯中国科学技术大学学(默许是 200)
offset:-300, //离原图的相距(暗中同意是 10)
position: “right”, //放大图的一向(默许是 “right”)
preload: 1
});
//大图切换小图
$(‘.imgList li img’).click(function(){
//alert(1);
var imgSrc = $(this).attr(“src”);
var i = imgSrc.lastIndexOf(“.”);//最终地方以.相配
var unit = imgSrc.substring(i);//从字符串中领到部分字符
imgSrc = imgSrc.substring(0,i);
var imgSrc_small = imgSrc + “_small”+ unit;
var imgSrc_big = imgSrc + “_big”+ unit;
$(“#bigImg”).attr({“src”: imgSrc_small ,”jqimg”: imgSrc_big });
$(“#thickImg”).attr(“href”, imgSrc_big);
});

*效果图

图片 11

图片 12

*例七 尺寸变动例子

*html代码

<div class=”price_size”>
尺寸:<span>未选择</span>
<ul>
<li>S</li>
<li>L</li>
<li>XL</li>
<li>XXL</li>
</ul>
</div>
<div class=”price_num”>
数量:
<select name=”” id=”num_sort”>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
</select>
</div>

*css代码

.price_size{
float:left;
width:380px;
margin-top:20px;
margin-bottom:10px;
font-weight: bolder;
}
.price_size ul li{
float:left;
margin-right:10px;
padding:1px 12px;
border: 1px solid #000;
cursor:pointer;
}
.price_num{
font-weight:bolder;
width:380px;
float:left;
margin-bottom:10px;
}

*jq代码

//尺寸变动
$(‘.price_size ul li’).click(function(){
//alert(1);
$(this).parents(‘ul’).siblings(‘span’).text( $(this).text());
})

*效果图

图片 13

图片 14

例八 价格变动例子

*html 代码

<div class=”price_num”>
数量:
<select name=”” id=”num_sort”>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
</select>
</div>
<div class=”price_total”>
总计 : <span>200</span>元
</div>

*css代码

.price_num,
.price_total{
font-weight:bolder;
width:380px;
float:left;
margin-bottom:10px;
}

*jq代码

//价格总结
var total = $(‘.price_total span’);
var price = total.text();
//当数码变动时带来价格转移
$(‘#num_sort’).change(function(){
var count = $(this).val();
var totalPrice = count*price;
total.text(totalPrice);
}).change();

*效果图

图片 15

图片 16

回到最上部
var timerl = null;
$(‘.top’).click(function(){
timerl = setInterval(function(){
var oStop = $(document).scrollTop();
var Speed = Math.ceil(oStop / 6);
$(document).scrollTop(oStop – Speed);
if(oStop == 0){
clearInterval(timerl);
}
},30)
})
$(window).scroll(function(){
var Scroll=$(window).scrollTop();
var height=$(window).height();
if(Scroll>=height){
$(“.top”).css(“display”,”block”);
}else{
$(“.top”).css(“display”,”none”);
}
})

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有