正文
jquery图片效果,jquery图片预览
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
jQuery图片标注效果，点击事件触发一次添加一个标注并把前面的标注清除了
这段代码没什么用，没有完成你想要的任何效果。
核心封装在easypinShow这个方法，传入的是一个对象，这个对象只是些参数。
“再添加一个图片标注，并把前面的标注清除掉”其实很简单做到，但是修改的是easypinShow这个方法的代码，除非你把easypinShow这个方法的代码放出来。
你这个应该是在网上找别人的插件直接套进去使用，你这些代码其实只是Dome。
基于jquery的滚动鼠标放大缩小图片效果
今天要出个鼠标滚动放大缩小图片的功能，看似很简单，从网上一搜，出现的都是onmousewheel的例子，全部只支持IE浏览器，结果查出火狐有对应的DOMMouseScroll来处理这个功能，代码如下,并加上注意的注释项：
复制代码
代码如下:
$(function(){
$(".body
img").each(function(){
if($.browser.msie){
$(this).bind("mousewheel",function(e){
var
e=e||event,v=e.wheelDelta||e.detail;
if(v0)
resizeImg(this,false);//放大图片呗
else
resizeImg(this,true);//缩小图片喽
window.event.returnValue
=
false;//去掉浏览器默认滚动事件
//e.stopPropagation();
return
false;
})
}else{
$(this).bind("DOMMouseScroll",function(event){
if(event.detail0)
resizeImg(this,false);
else
resizeImg(this,true);
event.preventDefault()//去掉浏览器默认滚动事件
//event.stopPropagation();
})
}
});
function
resizeImg(node,isSmall){
if(!isSmall){
$(node).height($(node).height()*1.2);
}else
{
$(node).height($(node).height()*0.8);
}
}
});
本文的demo请点击这里：滚动鼠标放大缩小图片效果
JQuery 实现下面图片的效果
先建立HTML代码
复制代码代码如下:
html
head
meta http-equiv="Content-Type" content="text/html; charset=GBK"
titleJquery test web page/title
link rel="stylesheet" href="./css/layout.css" type="text/css" /
script src="./js/jquery.js" type="text/javascript"/script
script src="./js/basic.js" type="text/javascript"/script
/head
body
p id="it"IT业界/p
ul id="ul"
li百度/li
li谷歌/li
li网易/li
li腾讯/li
li淘宝/li
/ul
/body
/html
这条代码是包含Jquery库：
复制代码代码如下:
script src="./js/jquery.js" type="text/javascript"/script
这里我们将CSS和JS文件单独放在一个外部文件中。
layout.css文件的代码为：
复制代码代码如下:
@CHARSET "GBK";
body{
font:12px Arial,Verdana;
}
ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#it{
margin:0px;
width:80px;
height:25px;
color:white;
text-align:center;
line-height:25px;
cursor:pointer;
background:black;
border:1px solid white;
}
#ul li{
width:80px;
height:25px;
color:white;
text-align:center;
line-height:25px;
cursor:pointer;
background:black;
border:1px solid white;
}
.highLight{
width:80px;
height:25px;
background:white;
border:1px solid blue;
color:black;
}
CSS代码大家可以根据自己喜欢的样式来设计，这里豆芽重要来解释JS文件。
复制代码代码如下:
$(document).ready(function (){
$('#ul').hide(); //打开页面隐藏下拉列表
$('#it').hover( //鼠标滑过导航栏目时
function(){
$('#ul').show(); //显示下拉列表
$(this).css({'color':'red','background-color':'orange'}); //设置导航栏目样式，醒目
},
function(){
$('#ul').hide(); //鼠标移开后隐藏下拉列表
}
);
$('#ul').hover( //鼠标滑过下拉列表自身也要显示，防止无法点击下拉列表
function(){
$('#ul').show();
},
function(){
$('#ul').hide();
$('#it').css({'color':'white','background-color':'black'}); //鼠标移开下拉列表后，导航栏目的样式也清除
}
);
$('li').hover( //鼠标滑过下拉列表是改变当前栏目样式
function(){
$(this).css({'color':'red','background-color':'orange'});
},
function(){
$(this).css({'color':'white','background-color':'black'});
}
);
});
jQuery过滤选择器怎么制作图片突出效果？
我们经常在一些网站上看到图片突出效果，即若干个图片摆放在一起，当鼠标放到某一张图片上时，以其他图片变暗的方式突显这张图。大致效果如下：
首先布局HTML：
div class="main" ul liimg src="images/1.jpg" width="350px" height="200px" alt=""/li liimg src="images/6.png" width="350px" height="200px" alt=""/li liimg src="images/3.jpg" width="350px" height="200px" alt=""/li liimg src="images/4.jpg" width="350px" height="200px" alt=""/li liimg src="images/5.jpg" width="350px" height="200px" alt=""/li liimg src="images/2.jpg" width="350px" height="200px" alt=""/li /ul /div
接下来简单调整一下css样式
style *{padding: 0;margin: 0} ul,li{list-style: none;} .main{width:1050px; height: 410px; margin: 100px auto; background-color: #000;} .main li {float: left; } /style
有没有很简单。
再下一步就是要引入jq和编写jq代码来实现效果了
script src="images/jquery-1.12.4.js"/script
script $(function(){ $(".mainulli").mouseenter(function(){ $(this).css("opacity","1").siblings().css("opacity","0.3"); $(".main").mouseleave(function(){ $(this).find("li").css("opacity",1); }) }) });/script
就是这么简单,有没有很意外?主要熟悉使用siblings()和find()两个过滤选择器来实现效果,至于作者的布局好不好看，图片搭配美不美的问题就不要深究了。
jQuery实例教程:jQuery网页图片切换效果
假设你有一组作品，你想不用转跳到另外一个页面就可以显示多个图片，你可以将JPG图片载入到目标元素中去。下面是jQuery图片切换效果示例：
该示例的核心jQuery代码：
$(document).ready(function()
{
$("h2").append('em/em')
$(".thumbs
a").click(function()
{
var
largePath
=
$(this).attr("href");
var
largeAlt
=
$(this).attr("title");
$("#largeImg").attr({
src:
largePath,
alt:
largeAlt
});
$("h2
em").html("
("
+
largeAlt
+
")");
return
false;
});
});
首先给H2添加一个空的em元素。
当点击p中的链接
将链接的href属性保存到
“largePath”变量中。
然后将标题属性保存到”largeAlt”变量中
将img
id=”largeImg”的scr属性用变量
“largePath”替代，而alt属性用变量”largeAlt”替代
将em(在h2中)的内容设置成变量largeAlt的值。
