文档章节

jQuery鼠标悬停图片由中心点逐渐放大效果

ycYinG
 ycYinG
发布于 2016/12/08 16:00
字数 101
阅读 7
收藏 0

####html代码 <div class="box"> <img src=“xxx.jpg" class="pic" /> </div> ####css代码 *{ margin:0; padding:0; list-style:none;} .box{ width:250px; height:321px; margin:100px auto; position:relative;} img{ position:absolute; left:0; top:0; cursor:pointer;} ####js代码 $(function(){ pic_width = $('.pic').width(); pic_height = $('.pic').height(); pic_width2 = pic_width + 20; pic_height2 = pic_height + 20; $('.pic').hover(function(){ $(this).stop().animate({height:pic_height2,width:pic_width2,left:"-10px",top:"-10px"},500); },function(){ $(this).stop().animate({height:pic_height,width:pic_width,left:"0px",top:"0px"},500); }); });

© 著作权归作者所有

共有 人打赏支持
上一篇: 放大镜效果
ycYinG
粉丝 1
博文 10
码字总数 4889
作品 0
昌平
程序员
私信 提问
10 款免费的 jQuery 图像缩放插件

设计电子商务网站必知的十款免费 jQuery 图像缩放插件 Jquery 图像缩放插件不仅简单易用,而且还能够给予用户更好的体验。你只需要在图像或产品上移动鼠标,你将看到图片或产品的详细信息。 ...

oschina
2015/05/12
36.7K
9
7 个效果震憾的 HTML5 应用组件

在HTML5的世界里,任何文本、图像都可以变得令人难以想象,很多HTML5应用也都已经随着浏览器的升级而变得运行飞速,而且兼容性也越来越好。下面为大家介绍7款效果震憾的HTML5应用组件,HTML5...

yykj
2013/07/02
10.4K
19
10 个基于 jQuery/CSS3 的图片特效

jQuery作为理想的开源Javascript开发库,已经被广大前端开发者所接受和使用,由jQuery编写的图片插件也数不胜数。CSS3是最近几年刚兴起的新技术,CSS3的应用,可以让图片拥有非常绚丽的特效,...

ruby_chen
2013/10/26
607
0
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
11/04
0
0
20 个具有惊艳效果的 jQuery 图像缩放插件

jQuery相对与Flash的魔力已经贯穿整个网络。尽管,Flash层被认为是用于网页设计的首选,然而随着jQuery的出现,以及他的酷似Flash的交互式特效使得网页更加的优雅——Flash开始靠边站了。 相...

oschina
2014/02/04
37.5K
22

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 你一口我一口多咬一口是小狗

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文 :分享Roy Orbison的单曲《She's a Mystery to Me》 《She's a Mystery to Me》- Roy Orbison 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
15
3
Spring源码学习笔记-1-Resource

打算补下基础,学习下Spring源码,参考书籍是《Spring源码深度解析》,使用版本是Spring 3.2.x,本来想试图用脑图记录的,发现代码部分不好贴,还是作罢,这里只大略记录下想法,不写太细了 ...

zypy333
今天
12
0
RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
19
0

中国龙-扬科
昨天
2
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部